Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Gallery as nested image blocks #16699

Merged
merged 5 commits into from
Jul 7, 2021
Merged

Refactor Gallery as nested image blocks #16699

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d3b6e7c
Updates gutenberg reference
Jun 17, 2021
7a1f7fc
Adds tests to verify that the existing processor handles the new refa…
Jun 22, 2021
8336a8d
Merge pull request #16721 from wordpress-mobile/gutenberg/refactor/ga…
Jun 29, 2021
cf9ced1
Revert "Updates gutenberg reference"
Jul 7, 2021
05c666a
Merge branch 'develop' into gutenberg/refactor/gallery-as-nested-imag…
Jul 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions WordPress/WordPress.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1728,6 +1728,7 @@
AB758D9E25EFDF9C00961C0B /* LikesListController.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB758D9D25EFDF9C00961C0B /* LikesListController.swift */; };
ACBAB5FE0E121C7300F38795 /* PostSettingsViewController.m in Sources */ = {isa = PBXBuildFile; fileRef = ACBAB5FD0E121C7300F38795 /* PostSettingsViewController.m */; };
ADF544C2195A0F620092213D /* CustomHighlightButton.m in Sources */ = {isa = PBXBuildFile; fileRef = ADF544C1195A0F620092213D /* CustomHighlightButton.m */; };
AEE0828A2681C23C00DCF54B /* GutenbergRefactoredGalleryUploadProcessorTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AEE082892681C23C00DCF54B /* GutenbergRefactoredGalleryUploadProcessorTests.swift */; };
B03B9234250BC593000A40AF /* SuggestionService.swift in Sources */ = {isa = PBXBuildFile; fileRef = B03B9233250BC593000A40AF /* SuggestionService.swift */; };
B03B9236250BC5FD000A40AF /* Suggestion.swift in Sources */ = {isa = PBXBuildFile; fileRef = B03B9235250BC5FD000A40AF /* Suggestion.swift */; };
B0637527253E7CEC00FD45D2 /* SuggestionsTableView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B0637526253E7CEB00FD45D2 /* SuggestionsTableView.swift */; };
Expand Down Expand Up @@ -6345,6 +6346,7 @@
ADE06D6829F9044164BBA5AB /* Pods-WordPressIntents.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WordPressIntents.release.xcconfig"; path = "../Pods/Target Support Files/Pods-WordPressIntents/Pods-WordPressIntents.release.xcconfig"; sourceTree = "<group>"; };
ADF544C0195A0F620092213D /* CustomHighlightButton.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = CustomHighlightButton.h; sourceTree = "<group>"; };
ADF544C1195A0F620092213D /* CustomHighlightButton.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = CustomHighlightButton.m; sourceTree = "<group>"; };
AEE082892681C23C00DCF54B /* GutenbergRefactoredGalleryUploadProcessorTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GutenbergRefactoredGalleryUploadProcessorTests.swift; sourceTree = "<group>"; };
B03B9233250BC593000A40AF /* SuggestionService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SuggestionService.swift; sourceTree = "<group>"; };
B03B9235250BC5FD000A40AF /* Suggestion.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Suggestion.swift; sourceTree = "<group>"; };
B0637526253E7CEB00FD45D2 /* SuggestionsTableView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; name = SuggestionsTableView.swift; path = Suggestions/SuggestionsTableView.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -14328,6 +14330,7 @@
9123471A221449E200BD9F97 /* GutenbergInformativeDialogTests.swift */,
FF0B2566237A023C004E255F /* GutenbergVideoUploadProcessorTests.swift */,
4629E4222440C8160002E15C /* GutenbergCoverUploadProcessorTests.swift */,
AEE082892681C23C00DCF54B /* GutenbergRefactoredGalleryUploadProcessorTests.swift */,
);
name = Gutenberg;
sourceTree = "<group>";
Expand Down Expand Up @@ -18410,6 +18413,7 @@
3F1AD48123FC87A400BB1375 /* BlogDetailsViewController+MeButtonTests.swift in Sources */,
08F8CD3B1EBD2D020049D0C0 /* MediaURLExporterTests.swift in Sources */,
D81C2F6220F89632002AE1F1 /* EditCommentActionTests.swift in Sources */,
AEE0828A2681C23C00DCF54B /* GutenbergRefactoredGalleryUploadProcessorTests.swift in Sources */,
E66969CD1B9E2EBF00EC9C00 /* SafeReaderTopicToReaderTopic.m in Sources */,
E6A215901D1065F200DE5270 /* AbstractPostTest.swift in Sources */,
D8BA274D20FDEA2E007A5C77 /* NotificationTextContentTests.swift in Sources */,
Expand Down
141 changes: 141 additions & 0 deletions WordPress/WordPressTest/GutenbergRefactoredGalleryUploadProcessorTests.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import XCTest
@testable import WordPress

class GutenbergRefactoredGalleryUploadProcessorTests: XCTestCase {
struct ImageUploadJob {
let localId: Int32
let remoteId: Int
let localUrl: String
let remoteURL: String
let mediaLink: String
}

let oldPostContent = """
<!-- wp:gallery {"ids":[-708],"columns":1,"linkTo":"file"} -->
<figure class="wp-block-gallery columns-1 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<a href="file:///usr/temp/image708.jpg">
<img src="file:///usr/temp/image708.jpg" data-id="-708" class="wp-image--708" data-full-url="file:///usr/temp/image708.jpg" data-link="https://files.wordpress.com/?p=-708"/>
</a>
<figcaption class="blocks-gallery-item__caption">
<p>Caption</p>
</figcaption>
</figure>
</li>
</ul>
</figure>
<!-- /wp:gallery -->
"""

let oldPostResultContent = """
<!-- wp:gallery {"columns":1,"ids":[708],"linkTo":"file"} -->
<figure class="wp-block-gallery columns-1 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure>
<a href="https://files.wordpress.com/708.jpg" >
<img src="https://files.wordpress.com/708.jpg" data-id="708" class="wp-image-708" data-full-url="https://files.wordpress.com/708.jpg" data-link="https://files.wordpress.com/?p=708" />
</a>
<figcaption class="blocks-gallery-item__caption">
<p>Caption</p>
</figcaption>
</figure>
</li>
</ul>
</figure>
<!-- /wp:gallery -->
"""

func imageBlockContent(localMediaId: Int32, localImageUrl: String) -> String {
return """
<!-- wp:image {"id":\(localMediaId)} -->
<figure class="wp-block-image"><img src="\(localImageUrl)" alt="" class="wp-image-\(localMediaId)"/></figure>
<!-- /wp:image -->
"""
}

func imageBlockResultContent(remoteMediaId: Int, remoteImageUrl: String) -> String {
return """
<!-- wp:image {"id":\(remoteMediaId)} -->
<figure class="wp-block-image"><img src="\(remoteImageUrl)" alt="" class="wp-image-\(remoteMediaId)"/></figure>
<!-- /wp:image -->
"""
}

func galleryBlock(innerBlocks: String, imageCount: Int) -> String {
return """
<!-- wp:gallery {"linkTo":"none","imageCount":\(imageCount)} -->
<figure class="wp-block-gallery blocks-gallery-grid has-nested-images columns-\(imageCount) is-cropped">
\(innerBlocks)</figure>
<!-- /wp:gallery -->
"""
}

func testRefactoredGalleryImageBlockProcessor() {
let job = ImageUploadJob(localId: -123456789, remoteId: 123456789, localUrl: "file:///usr/temp/123.jpg", remoteURL: "https://files.wordpress.com/123.jpg", mediaLink: "https://files.wordpress.com/?p=123")

let gutenbergImgPostUploadProcessor = GutenbergImgUploadProcessor(mediaUploadID: job.localId, serverMediaID: job.remoteId, remoteURLString: job.remoteURL)

let image = imageBlockContent(localMediaId: job.localId, localImageUrl: job.localUrl)
let refactoredGalleryContent = galleryBlock(innerBlocks: image, imageCount: 1)
let resultContent = gutenbergImgPostUploadProcessor.process(refactoredGalleryContent)
let imageResult = imageBlockResultContent(remoteMediaId: job.remoteId, remoteImageUrl: job.remoteURL)

let refactoredGalleryResultContent = galleryBlock(innerBlocks: imageResult, imageCount: 1)

XCTAssertEqual(resultContent, refactoredGalleryResultContent, "Post content should be updated correctly")
}

func testRefactoredGalleryBlockProcessor() {
let mediaJobs = [
ImageUploadJob(localId: -1, remoteId: 1, localUrl: "file:///usr/temp/1.jpg", remoteURL: "https://files.wordpress.com/1.jpg", mediaLink: "https://files.wordpress.com/?p=1"),
ImageUploadJob(localId: -2, remoteId: 2, localUrl: "file:///usr/temp/2.jpg", remoteURL: "https://files.wordpress.com/2.jpg", mediaLink: "https://files.wordpress.com/?p=2"),
ImageUploadJob(localId: -3, remoteId: 3, localUrl: "file:///usr/temp/3.jpg", remoteURL: "https://files.wordpress.com/3.jpg", mediaLink: "https://files.wordpress.com/?p=3")
]

var galleryInnerBlocks = ""
var galleryResultInnerBlocks = ""
for job in mediaJobs {
galleryInnerBlocks += imageBlockContent(localMediaId: job.localId, localImageUrl: job.localUrl) + "\n"
galleryResultInnerBlocks += imageBlockResultContent(remoteMediaId: job.remoteId, remoteImageUrl: job.remoteURL) + "\n"
}
let galleryBlockContent = galleryBlock(innerBlocks: galleryInnerBlocks, imageCount: mediaJobs.count)
let galleryResultBlockContent = galleryBlock(innerBlocks: galleryResultInnerBlocks, imageCount: mediaJobs.count)

var resultContent = galleryBlockContent

resultContent = mediaJobs.reduce(into: resultContent) { (content, mediaJob) in
let gallerydProcessor = GutenbergGalleryUploadProcessor(mediaUploadID: mediaJob.localId, serverMediaID: mediaJob.remoteId, remoteURLString: mediaJob.remoteURL, mediaLink: mediaJob.mediaLink)
let imageProcessor = GutenbergImgUploadProcessor(mediaUploadID: mediaJob.localId, serverMediaID: mediaJob.remoteId, remoteURLString: mediaJob.remoteURL)
content = gallerydProcessor.process(content)
content = imageProcessor.process(content)
}

XCTAssertEqual(resultContent, galleryResultBlockContent, "Post content should be updated correctly")
}

func testMixedOldRefactoredGalleryBlockProcessor() {
let mediaJobs = [
ImageUploadJob(localId: -708, remoteId: 708, localUrl: "file:///usr/temp/image708.jpg", remoteURL: "https://files.wordpress.com/708.jpg", mediaLink: "https://files.wordpress.com/?p=708"),
ImageUploadJob(localId: -1, remoteId: 1, localUrl: "file:///usr/temp/1.jpg", remoteURL: "https://files.wordpress.com/1.jpg", mediaLink: "https://files.wordpress.com/?p=1")
]
let job = mediaJobs[1]
let galleryInnerBlocks = imageBlockContent(localMediaId: job.localId, localImageUrl: job.localUrl) + "\n"
let galleryResultInnerBlocks = imageBlockResultContent(remoteMediaId: job.remoteId, remoteImageUrl: job.remoteURL) + "\n"
let galleryBlockContent = galleryBlock(innerBlocks: galleryInnerBlocks, imageCount: mediaJobs.count)
let galleryResultBlockContent = galleryBlock(innerBlocks: galleryResultInnerBlocks, imageCount: mediaJobs.count)
let postResultContent = oldPostResultContent + "\n" + galleryResultBlockContent
var resultContent = oldPostContent + "\n" + galleryBlockContent

resultContent = mediaJobs.reduce(into: resultContent) { (content, mediaJob) in
let gallerydProcessor = GutenbergGalleryUploadProcessor(mediaUploadID: mediaJob.localId, serverMediaID: mediaJob.remoteId, remoteURLString: mediaJob.remoteURL, mediaLink: mediaJob.mediaLink)
let imageProcessor = GutenbergImgUploadProcessor(mediaUploadID: mediaJob.localId, serverMediaID: mediaJob.remoteId, remoteURLString: mediaJob.remoteURL)
content = gallerydProcessor.process(content)
content = imageProcessor.process(content)
}

XCTAssertEqual(resultContent, postResultContent, "Post content should be updated correctly")
}
}