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

Fix eyedropper test #8530

Merged
merged 7 commits into from
Aug 6, 2021
Merged

Fix eyedropper test #8530

merged 7 commits into from
Aug 6, 2021

Conversation

merapi
Copy link
Contributor

@merapi merapi commented Aug 2, 2021

Context

Summary

Relevant Technical Choices

To-do

User-facing changes

Testing Instructions

QA

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

UAT

  • UAT should use the same steps as above.

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it in ZenHub
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This PR contains automated tests (unit, integration, and/or e2e) to verify the code works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #

@merapi merapi added the Type: Bug Something isn't working label Aug 2, 2021
@google-cla google-cla bot added the cla: yes label Aug 2, 2021
@swissspidy
Copy link
Collaborator

Does this supersede #8524?

@github-actions
Copy link
Contributor

github-actions bot commented Aug 2, 2021

Size Change: +234 kB (+8%) 🔍

Total Size: 3.13 MB

Filename Size Change
assets/js/chunk-web-stories-template-100-********************.js 6.75 kB -1.4 kB (-17%) 👏
assets/js/chunk-web-stories-template-106-********************.js 10.6 kB +3.03 kB (+40%) 🚨
assets/js/chunk-web-stories-template-112-********************.js 6.75 kB -2.44 kB (-27%) 🎉
assets/js/chunk-web-stories-template-118-********************.js 6.39 kB -5.64 kB (-47%) 🎉
assets/js/chunk-web-stories-template-124-********************.js 7.28 kB +1.3 kB (+22%) 🚨
assets/js/chunk-web-stories-template-130-********************.js 8.16 kB +1.02 kB (+14%) ⚠️
assets/js/chunk-web-stories-template-136-********************.js 8.15 kB -626 B (-7%)
assets/js/chunk-web-stories-template-148-********************.js 9.19 kB +1.19 kB (+15%) ⚠️
assets/js/chunk-web-stories-template-154-********************.js 12 kB +2.16 kB (+22%) 🚨
assets/js/chunk-web-stories-template-160-********************.js 8.65 kB +838 B (+11%) ⚠️
assets/js/chunk-web-stories-template-166-********************.js 5.98 kB -2.17 kB (-27%) 🎉
assets/js/chunk-web-stories-template-172-********************.js 7.14 kB -2.08 kB (-23%) 🎉
assets/js/chunk-web-stories-template-178-********************.js 8.77 kB -4.98 kB (-36%) 🎉
assets/js/chunk-web-stories-template-184-********************.js 7.46 kB -857 B (-10%) 👏
assets/js/chunk-web-stories-template-190-********************.js 6.63 kB -1.92 kB (-22%) 🎉
assets/js/chunk-web-stories-template-46-********************.js 8.06 kB +913 B (+13%) ⚠️
assets/js/chunk-web-stories-template-52-********************.js 7.05 kB -701 B (-9%)
assets/js/chunk-web-stories-template-58-********************.js 7.15 kB -861 B (-11%) 👏
assets/js/chunk-web-stories-template-64-********************.js 7.75 kB -1.91 kB (-20%) 🎉
assets/js/chunk-web-stories-template-70-********************.js 8.01 kB -393 B (-5%)
assets/js/chunk-web-stories-template-76-********************.js 9.65 kB +1.13 kB (+13%) ⚠️
assets/js/chunk-web-stories-template-82-********************.js 8.4 kB +1.44 kB (+21%) 🚨
assets/js/chunk-web-stories-template-88-********************.js 8.52 kB +1.77 kB (+26%) 🚨
assets/js/chunk-web-stories-template-94-********************.js 6.96 kB -1.2 kB (-15%) 👏
assets/js/edit-story.js 1.18 MB +81.6 kB (+7%) 🔍
assets/js/stories-dashboard.js 1.08 MB +77.4 kB (+8%) 🔍
assets/js/vendors-chunk-react-moveable-********************.js 0 B -53.4 kB (removed) 🏆
assets/js/vendors-edit-story-stories-dashboard-********************.js 230 kB +53 kB (+30%) 🚨
assets/js/chunk-web-stories-template-192-********************.js 483 B +483 B (new file) 🆕
assets/js/chunk-web-stories-template-196-********************.js 8 kB +8 kB (new file) 🆕
assets/js/chunk-web-stories-template-198-********************.js 503 B +503 B (new file) 🆕
assets/js/chunk-web-stories-template-202-********************.js 9.88 kB +9.88 kB (new file) 🆕
assets/js/chunk-web-stories-template-204-********************.js 490 B +490 B (new file) 🆕
assets/js/chunk-web-stories-template-208-********************.js 7.81 kB +7.81 kB (new file) 🆕
assets/js/chunk-web-stories-template-210-********************.js 430 B +430 B (new file) 🆕
assets/js/chunk-web-stories-template-214-********************.js 8.15 kB +8.15 kB (new file) 🆕
assets/js/chunk-web-stories-template-216-********************.js 527 B +527 B (new file) 🆕
assets/js/chunk-web-stories-template-220-********************.js 9.73 kB +9.73 kB (new file) 🆕
assets/js/chunk-web-stories-template-222-********************.js 471 B +471 B (new file) 🆕
assets/js/chunk-web-stories-template-226-********************.js 9.23 kB +9.23 kB (new file) 🆕
assets/js/chunk-web-stories-template-228-********************.js 464 B +464 B (new file) 🆕
assets/js/chunk-web-stories-template-232-********************.js 13.8 kB +13.8 kB (new file) 🆕
assets/js/chunk-web-stories-template-234-********************.js 510 B +510 B (new file) 🆕
assets/js/chunk-web-stories-template-238-********************.js 8.32 kB +8.32 kB (new file) 🆕
assets/js/chunk-web-stories-template-240-********************.js 446 B +446 B (new file) 🆕
assets/js/chunk-web-stories-template-244-********************.js 8.56 kB +8.56 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 701 B 0 B
assets/css/carousel-view.css 701 B 0 B
assets/css/edit-story-rtl.css 1.23 kB +26 B (+2%)
assets/css/edit-story.css 1.23 kB +26 B (+2%)
assets/css/stories-dashboard-rtl.css 658 B +33 B (+5%) 🔍
assets/css/stories-dashboard.css 659 B +33 B (+5%) 🔍
assets/css/web-stories-block-rtl.css 4.43 kB 0 B
assets/css/web-stories-block.css 4.47 kB 0 B
assets/css/web-stories-embed-rtl.css 288 B 0 B
assets/css/web-stories-embed.css 288 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.3 kB 0 B
assets/css/web-stories-list-styles.css 2.32 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 251 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 287 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 287 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 288 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 288 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 224 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 224 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 143 B 0 B
assets/css/web-stories-theme-style-twentyten.css 143 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 256 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 325 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 326 B 0 B
assets/css/web-stories-widget-rtl.css 484 B 0 B
assets/css/web-stories-widget.css 484 B 0 B
assets/js/carousel-view.js 3.72 kB 0 B
assets/js/chunk-colorthief-********************.js 2.61 kB 0 B
assets/js/chunk-focus-visible-********************.js 999 B 0 B
assets/js/chunk-fonts-********************.js 46.3 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 476 B 0 B
assets/js/chunk-web-stories-template-10-********************.js 8.77 kB 0 B
assets/js/chunk-web-stories-template-102-********************.js 449 B -56 B (-11%) 👏
assets/js/chunk-web-stories-template-108-********************.js 476 B +33 B (+7%) 🔍
assets/js/chunk-web-stories-template-114-********************.js 533 B +53 B (+11%) ⚠️
assets/js/chunk-web-stories-template-12-********************.js 473 B +1 B (0%)
assets/js/chunk-web-stories-template-120-********************.js 472 B +10 B (+2%)
assets/js/chunk-web-stories-template-126-********************.js 459 B -58 B (-11%) 👏
assets/js/chunk-web-stories-template-132-********************.js 490 B +1 B (0%)
assets/js/chunk-web-stories-template-138-********************.js 506 B +15 B (+3%)
assets/js/chunk-web-stories-template-142-********************.js 7.52 kB +59 B (+1%)
assets/js/chunk-web-stories-template-144-********************.js 444 B -38 B (-8%)
assets/js/chunk-web-stories-template-150-********************.js 479 B -24 B (-5%)
assets/js/chunk-web-stories-template-156-********************.js 429 B -61 B (-12%) 👏
assets/js/chunk-web-stories-template-16-********************.js 7.96 kB 0 B
assets/js/chunk-web-stories-template-162-********************.js 461 B +32 B (+7%) 🔍
assets/js/chunk-web-stories-template-168-********************.js 517 B +46 B (+10%) ⚠️
assets/js/chunk-web-stories-template-174-********************.js 489 B +25 B (+5%) 🔍
assets/js/chunk-web-stories-template-18-********************.js 491 B -1 B (0%)
assets/js/chunk-web-stories-template-180-********************.js 491 B -19 B (-4%)
assets/js/chunk-web-stories-template-186-********************.js 455 B +10 B (+2%)
assets/js/chunk-web-stories-template-22-********************.js 9.01 kB 0 B
assets/js/chunk-web-stories-template-24-********************.js 499 B 0 B
assets/js/chunk-web-stories-template-28-********************.js 7.97 kB 0 B
assets/js/chunk-web-stories-template-30-********************.js 516 B +1 B (0%)
assets/js/chunk-web-stories-template-34-********************.js 8.09 kB 0 B
assets/js/chunk-web-stories-template-36-********************.js 464 B -1 B (0%)
assets/js/chunk-web-stories-template-4-********************.js 10.4 kB +1 B (0%)
assets/js/chunk-web-stories-template-40-********************.js 6.64 kB 0 B
assets/js/chunk-web-stories-template-42-********************.js 471 B -35 B (-7%)
assets/js/chunk-web-stories-template-48-********************.js 454 B -12 B (-3%)
assets/js/chunk-web-stories-template-54-********************.js 506 B +28 B (+6%) 🔍
assets/js/chunk-web-stories-template-6-********************.js 506 B 0 B
assets/js/chunk-web-stories-template-60-********************.js 467 B +42 B (+10%) ⚠️
assets/js/chunk-web-stories-template-66-********************.js 479 B -2 B (0%)
assets/js/chunk-web-stories-template-72-********************.js 424 B -34 B (-7%)
assets/js/chunk-web-stories-template-78-********************.js 481 B +30 B (+7%) 🔍
assets/js/chunk-web-stories-template-84-********************.js 458 B -18 B (-4%)
assets/js/chunk-web-stories-template-90-********************.js 452 B -7 B (-2%)
assets/js/chunk-web-stories-template-96-********************.js 530 B +40 B (+8%) 🔍
assets/js/chunk-web-stories-textset-0-********************.js 5.29 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.79 kB +1 B (0%)
assets/js/chunk-web-stories-textset-2-********************.js 7.91 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.4 kB -1 B (0%)
assets/js/chunk-web-stories-textset-4-********************.js 4.4 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.71 kB -1 B (0%)
assets/js/chunk-web-stories-textset-6-********************.js 5.52 kB +1 B (0%)
assets/js/chunk-web-stories-textset-7-********************.js 10.4 kB 0 B
assets/js/imgareaselect.js 4.14 kB 0 B
assets/js/lightbox.js 991 B 0 B
assets/js/tinymce-button.js 3.49 kB 0 B
assets/js/vendors-chunk-ffmpeg-********************.js 5.6 kB 0 B
assets/js/vendors-chunk-html-to-image-********************.js 4.64 kB +20 B (0%)
assets/js/vendors-chunk-react-calendar-********************.js 11.7 kB 0 B
assets/js/vendors-chunk-react-color-********************.js 42.9 kB -20 B (0%)
assets/js/vendors-chunk-resize-observer-polyfill-edit-story-********************.js 2.55 kB 0 B
assets/js/vendors-chunk-web-animations-js-********************.js 14.6 kB -1 B (0%)
assets/js/web-stories-activation-notice.js 23.7 kB 0 B
assets/js/web-stories-block.js 18.2 kB 0 B
assets/js/web-stories-embed.js 493 B 0 B
assets/js/web-stories-widget.js 984 B 0 B

compressed-size-action

@merapi
Copy link
Contributor Author

merapi commented Aug 2, 2021

Looks like we have two separate issues:

  1. Inserting media element - no fix yet? (for me it works locally with step option but we need a better fix).
  2. Eyedropper - issue caused by dynamic import, can be fixed by waiting. Not sure about "misalignment issue at it's core" - I didn't saw that in my tests.

@swissspidy
Copy link
Collaborator

  • Inserting media element - no fix yet? (for me it works locally with step option but we need a better fix).

See #7481 for that.

Seems like it was introduced in #8320 or at least surfaced by it. See #8320 (comment) and 6614515 for context.

@maxyinger
Copy link
Contributor

Yea I just put up #8524 to help out. fine if we scrap the entire PR.

As for the misalignment issue, once I was able to add media to the canvas, I was getting this part of the test failing:
https://github.com/google/web-stories-wp/blob/2e0b822bcd77f1ede25cb34d54b7aac14abdbda7/assets/src/edit-story/components/colorPicker/karma/eyedropper.karma.js#L86

Because of this behavior(notice the zoomed in image bubble isn't pink when the cursor is over the pink image, and it's not until I move the cursor pretty far down on the image that the zoomed in canvas picks up the top of the picture):

Kapture.2021-07-30.at.15.07.17.mp4

@miina
Copy link
Contributor

miina commented Aug 2, 2021

Seems like it was introduced in #8320 or at least surfaced by it.

Is this happening only with Media btw? It seems to me that it's also happening to other elements that use Moveable (e.g. reload the page, go to the Shapes tab quickly and try inserting one).

I'm guessing that since Moveable is now dynamically loading, it's not getting loaded fast enough for the tests (and usage as well when trying to use it right away). We might need to revert the lazy loading for it.

@merapi merapi self-assigned this Aug 4, 2021
@merapi
Copy link
Contributor Author

merapi commented Aug 4, 2021

This fix is still useful (just the Moveable part was removed), let's merge it (one ✅ needed).

@merapi merapi requested review from barklund, miina and swissspidy August 4, 2021 15:27
@swissspidy
Copy link
Collaborator

There's this one screenshot on Percy where the eyedropper hasn't fully loaded yet. Flakey, bug, or expected change?

@merapi
Copy link
Contributor Author

merapi commented Aug 5, 2021

There's this one screenshot on Percy where the eyedropper hasn't fully loaded yet. Flakey, bug, or expected change?

Fixed (kinda expected because the whole Color Picker is now lazy-loaded).

@merapi merapi merged commit d2d64f1 into main Aug 6, 2021
@merapi merapi deleted the fix/eyedropper-test branch August 6, 2021 11:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants