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.

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

Social Icons - Begin Automating Existing Manual Test Cases. #39027

Merged
merged 5 commits into from Mar 1, 2022

Conversation

ttahmouch
Copy link
Contributor

@ttahmouch ttahmouch commented Feb 23, 2022

Description

This is a first pass at beginning to automate some of the manual regression test cases for the Social Icons block types that we assert during some of our release rotations.

They are derived from here:
https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001

The couple tests in this PR cover most of the assertions from this test:

TC001
The newly created Social Icons block is added with 4 icons
Add Social Icons block
Expect added 4 icons (WordPress, Facebook, Twitter, Instagram)
Expect WordPress icon to be active, already fulfilled with the link and to have product color

They assert that, by default, WordPress, Facebook, Twitter, and Instagram icons are add added when Social Icons are added. They also assert that WordPress contains a link making it active by default, and the remaining three do not contain a link making them inactive by default. The icon color for the active and inactive icons hasn't been asserted, but the state of activity has been.

I think that when asserting the UX, checking the active state of each of the Social Icons by default makes sense, but I see little value in asserting the color of the icons in each state. That being said, if we want to remain faithful to the original manual test, asserting the colors of the icons would be necessary before the manual test could be removed.

Testing Instructions

npm run native test -- ../block-library/src/social-link/test/index.native.js

Screenshots

N/A

Types of changes

New "feature." Adding automated integration tests.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
  • I've updated related schemas if appropriate.

@ttahmouch ttahmouch requested review from geriux and fluiddot Feb 23, 2022
@ttahmouch ttahmouch self-assigned this Feb 23, 2022
@ttahmouch ttahmouch marked this pull request as draft Feb 23, 2022
…ial Icons, e.g., which Social Icons are rendered, in/active, hyperlinked, etc.

The manual tests being referenced come from here:
https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001
@ttahmouch ttahmouch force-pushed the feature/automate-test-cases branch from 8088574 to 2604748 Compare Feb 23, 2022
@github-actions
Copy link

@github-actions github-actions bot commented Feb 23, 2022

Size Change: -244 B (0%)

Total Size: 1.15 MB

Filename Size Change
build/api-fetch/index.min.js 2.27 kB +21 B (+1%)
build/block-editor/index.min.js 143 kB +27 B (0%)
build/block-library/blocks/button/editor-rtl.css 445 B -25 B (-5%)
build/block-library/blocks/button/editor.css 445 B -25 B (-5%)
build/block-library/blocks/code/style-rtl.css 103 B +13 B (+14%) ⚠️
build/block-library/blocks/code/style.css 103 B +13 B (+14%) ⚠️
build/block-library/blocks/code/theme-rtl.css 124 B -7 B (-5%)
build/block-library/blocks/code/theme.css 124 B -7 B (-5%)
build/block-library/blocks/cover/style-rtl.css 1.56 kB -10 B (-1%)
build/block-library/blocks/cover/style.css 1.56 kB -10 B (-1%)
build/block-library/blocks/tag-cloud/style-rtl.css 226 B +12 B (+6%) 🔍
build/block-library/blocks/tag-cloud/style.css 227 B +12 B (+6%) 🔍
build/block-library/common-rtl.css 934 B +13 B (+1%)
build/block-library/common.css 932 B +13 B (+1%)
build/block-library/editor-rtl.css 9.89 kB -14 B (0%)
build/block-library/editor.css 9.9 kB -15 B (0%)
build/block-library/index.min.js 167 kB +68 B (0%)
build/block-library/style-rtl.css 11.4 kB +14 B (0%)
build/block-library/style.css 11.4 kB +14 B (0%)
build/block-library/theme-rtl.css 665 B -7 B (-1%)
build/block-library/theme.css 670 B -6 B (-1%)
build/components/index.min.js 215 kB +49 B (0%)
build/components/style-rtl.css 15.6 kB +31 B (0%)
build/components/style.css 15.6 kB +32 B (0%)
build/compose/index.min.js 11.2 kB +16 B (0%)
build/customize-widgets/index.min.js 11.2 kB -197 B (-2%)
build/customize-widgets/style-rtl.css 1.39 kB -103 B (-7%)
build/customize-widgets/style.css 1.39 kB -102 B (-7%)
build/data/index.min.js 7.65 kB +169 B (+2%)
build/edit-post/index.min.js 29.9 kB -1 B (0%)
build/edit-site/index.min.js 42.1 kB -16 B (0%)
build/edit-site/style-rtl.css 7.23 kB +5 B (0%)
build/edit-site/style.css 7.22 kB +5 B (0%)
build/edit-widgets/index.min.js 16.5 kB -132 B (-1%)
build/edit-widgets/style-rtl.css 4.12 kB -48 B (-1%)
build/edit-widgets/style.css 4.13 kB -45 B (-1%)
build/editor/index.min.js 38.5 kB -17 B (0%)
build/url/index.min.js 1.94 kB +16 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 14.8 kB
build/block-editor/style.css 14.8 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 353 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 965 B
build/block-library/blocks/gallery/editor.css 967 B
build/block-library/blocks/gallery/style-rtl.css 1.61 kB
build/block-library/blocks/gallery/style.css 1.61 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 518 B
build/block-library/blocks/image/style.css 523 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.01 kB
build/block-library/blocks/navigation/editor.css 2.02 kB
build/block-library/blocks/navigation/style-rtl.css 1.89 kB
build/block-library/blocks/navigation/style.css 1.88 kB
build/block-library/blocks/navigation/view.min.js 2.85 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 323 B
build/block-library/blocks/post-template/style.css 323 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 389 B
build/block-library/blocks/pullquote/style.css 388 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 201 B
build/block-library/blocks/quote/style.css 201 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 744 B
build/block-library/blocks/site-logo/editor.css 744 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.4 kB
build/core-data/index.min.js 13.9 kB
build/data-controls/index.min.js 663 B
build/date/index.min.js 31.9 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.53 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/style-rtl.css 7.19 kB
build/edit-post/style.css 7.18 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 3.32 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.1 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.18 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

@fluiddot
Copy link
Contributor

@fluiddot fluiddot commented Feb 24, 2022

Hey @ttahmouch 👋, I see you requested a review for this PR but looks like it's still in draft, just wanted to check whether is ready or if you're looking for something specific to get reviewed before marking it as ready for review 🤔 .

@ttahmouch
Copy link
Contributor Author

@ttahmouch ttahmouch commented Feb 24, 2022

Hey @ttahmouch 👋, I see you requested a review for this PR but looks like it's still in draft, just wanted to check whether is ready or if you're looking for something specific to get reviewed before marking it as ready for review 🤔 .

Hey, @fluiddot . I marked it as Draft because I still had intended to make some minor refactors, but I ended up dealing with IDE issue with ESLint for a little while yesterday afternoon. Apologies.

I may remove the mocked hook in test/unit/config/global-mocks.js since that I don't believe it's necessary with the other mock in test/native/setup.js. I also planned to push changes making the default style values for active icons feel less arbitrary in packages/block-library/src/social-link/edit.native.js. I was going to also consider if there's any useful utils available or that I could make to simplify staging the tests, but I'm conflicted because I prefer WET instead of DRY test implementations to make them easier to understand.

@ttahmouch ttahmouch removed request for geriux and fluiddot Feb 24, 2022
ttahmouch added 2 commits Feb 24, 2022
…active icon styles to a constant defined closer to the styles import, and mentioned where the values are derived.

The rest of the changes are unrelated by came from a `npm run lint-js:fix`.
…the "global mocks" as the "native mocks," i.e., `test/native/setup.js` are the only relevant ones for the component.
@@ -493,12 +493,12 @@ SPEC CHECKSUMS:
React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated. They are unrelated to the implementation details of the component being tested, or the tests.

@@ -36,9 +36,9 @@ export function finishResolution( selectorName, args ) {
* Returns an action object used in signalling that a batch of selector resolutions has
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated by npm run lint-js:fix. They are unrelated to the implementation details of the component being tested, or the tests.

@@ -25,8 +25,8 @@ export type HigherOrderComponent< HOCProps extends Record< string, any > > = <
* Given a function mapping a component to an enhanced component and modifier
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated with npm run lint-js:fix. They are unrelated to the implementation details of the component being tested, or the tests.

@@ -19364,16 +19364,6 @@
"yauzl": "^2.7.0"
},
"dependencies": {
"are-we-there-yet": {
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes were generated. They are unrelated to the implementation details of the component being tested, or the tests.

@@ -222,6 +222,12 @@ jest.mock( '@wordpress/compose', () => {
mockComponent( 'ResizeObserverMock' )( {} ),
{ width: 100, height: 100 },
] ),
usePreferredColorSchemeStyle: jest.fn( () => {
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These mock values are effectively "arbitrary," but were taken from values like $light-quaternary in gutenberg/packages/base-styles/_colors.native.scss

*/
it( 'should display WORDPRESS, FACEBOOK, TWITTER, INSTAGRAM by default.', async () => {
// Arrange
const subject = await initializeEditor( {} );
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The staging in each of these tests is purposefully redundant in an effort to keep the code easy to understand in isolation. I don't like DRY code in test suites personally, but the thought crossed my mind about checking for existing utils or creating one. It just doesn't feel worth it at the moment.

@@ -0,0 +1,138 @@
/**
Copy link
Contributor Author

@ttahmouch ttahmouch Feb 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests written for the Edit Social Links Block type started to be derived from here:
https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/social-icons.md#tc001

They're just rudimentary at the moment to start incrementally, and keep the size of the PR down to easily discuss them. I planned to add more tests in future PRs when I started this.

@ttahmouch
Copy link
Contributor Author

@ttahmouch ttahmouch commented Feb 24, 2022

I just noticed some test failures unrelated to the tests in this PR because the snapshot assertions they are running were affected by the default active icon styles I added in the <EditSocialLink/> component. I'll try to ensure that the snapshots are updated correctly soon.

https://github.com/WordPress/gutenberg/runs/5324097673?check_suite_focus=true

@jhnstn
Copy link
Contributor

@jhnstn jhnstn commented Feb 25, 2022

@ttahmouch The changes look good to me. Your reasoning to keep avoid going DRY at this point also makes sense to me.
I also appreciate that you are keeping this PR small. Much easier to grok the test flow.

I ran the tests locally and they all passed. I did get this ugly warning :

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

but it didn't break anything. I'm guessing I have something off on my dev environment.

@ttahmouch
Copy link
Contributor Author

@ttahmouch ttahmouch commented Feb 25, 2022

@ttahmouch The changes look good to me. Your reasoning to keep avoid going DRY at this point also makes sense to me. I also appreciate that you are keeping this PR small. Much easier to grok the test flow.

❤️ 🙏 Thank you so much for taking a look, @jhnstn . I appreciate it a lot. I'm glad you feel the same way regarding DRY.

I ran the tests locally and they all passed. I did get this ugly warning :

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

but it didn't break anything. I'm guessing I have something off on my dev environment.

I did get that ugly warning as well, but it didn't impact the test assertions since I saw them go from red to green when TDDing it. I thought about spending some time trying to fix whatever was wrong with the forwardRef in order to make the warning go away, but it didn't feel like something that needed to be included in this PR at the moment. Does that make sense?

@ttahmouch ttahmouch requested a review from jhnstn Feb 25, 2022
@jhnstn
Copy link
Contributor

@jhnstn jhnstn commented Feb 25, 2022

I did get that ugly warning as well, but it didn't impact the test assertions since I saw them go from red to green when TDDing it. I thought about spending some time trying to fix whatever was wrong with the forwardRef in order to make the warning go away, but it didn't feel like something that needed to be included in this PR at the moment. Does that make sense?

Agreed. Doesn't seem to block this work so no need to fix it here.

@ttahmouch ttahmouch marked this pull request as ready for review Feb 25, 2022
ttahmouch added 2 commits Mar 1, 2022
…st having default inactive icon styles in the `<SocialLinkEdit/>` component to avoid breaking snapshot assertions.
@ttahmouch
Copy link
Contributor Author

@ttahmouch ttahmouch commented Mar 1, 2022

All of the tests and workflows are now, @jhnstn . If you have some time soon, would you mind giving the remaining changes a cursory glance? They're fairly small.

jhnstn
jhnstn approved these changes Mar 1, 2022
Copy link
Contributor

@jhnstn jhnstn left a comment

The latest changes look good. Getting the snapshots sorted out does feel like a priority but your solution is the right choice for this effort

:shipit:

@ttahmouch
Copy link
Contributor Author

@ttahmouch ttahmouch commented Mar 1, 2022

The latest changes look good. Getting the snapshots sorted out does feel like a priority but your solution is the right choice for this effort

:shipit:

I agree, and I appreciate your input and the review. It means a lot to me. I just wanted to time box the changes for this specific PR, and addressing the snapshot assertions was taking longer than I thought was reasonable at the moment. This just felt like a good compromise.

@ttahmouch ttahmouch merged commit 0e1e0b4 into trunk Mar 1, 2022
23 checks passed
@ttahmouch ttahmouch deleted the feature/automate-test-cases branch Mar 1, 2022
@github-actions github-actions bot added this to the Gutenberg 12.8 milestone Mar 1, 2022
@hypest
Copy link
Contributor

@hypest hypest commented Mar 2, 2022

Yay, cool to see more automated tests merged! @ttahmouch , for easier reference, can you call out in the PR description exactly which tests (titles) have been added by the PR? And more interestingly, can we drop those from the manual testsuites or there are parts that are performed in manual but not yet in the automated tests so we need to keep those manual for now?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants