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 animation options karma test #7069

Merged
merged 6 commits into from
Apr 8, 2021
Merged

Fix animation options karma test #7069

merged 6 commits into from
Apr 8, 2021

Conversation

embarks
Copy link
Contributor

@embarks embarks commented Apr 5, 2021

Context

This PR re-enables a flaky test and introduces some fixes to help the test pass. The test was for checking that the animation plays after the effect chooser is changed. The other fixes are detailed in Relevant Technical Choices.

Summary

  • The error which was causing the test to fail reads as follows:

  • ResizeObserver loop limit exceeded thrown

  • This was due to a "benign error" with the ResizeObserver, some discussion can be found here in a github issue thread for the resize-observer and here-- in the stack overflow thread which details the chosen solution.

  • The error is intermittent. I ran the karma test suite 10 times on main and saw a failure once. In order to test I found where the resize observer was being instantiated when interacting with the effect chooser dropdown and running and added the requestAnimationFrame there which prevents the error from occurring.

  • In order to verify, I re-ran the same test suite 30 times and never saw the error locally.

Relevant Technical Choices

I noticed a couple other problems while I was replicating:

  • animations not firing in Firefox when animation dropdown is changed
    • I added 200ms to the debounce callback which seemed to resolve this (And a 300ms sleep to the karma test as a result of that change)
  • console errors when None selected
    • I added a return to prevent these errors

To-do

User-facing changes

This is a bug fix.

Testing Instructions

QA

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

UAT

  • UAT should use the same steps as above.

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 #6953

@google-cla google-cla bot added the cla: yes label Apr 5, 2021
@embarks embarks added P1 High priority, must do soon Pod: Pea Type: Bug Something isn't working labels Apr 5, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Apr 5, 2021

Size Change: +110 B (0%)

Total Size: 1.66 MB

ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 715 B 0 B
assets/css/carousel-view.css 716 B 0 B
assets/css/edit-story-rtl.css 792 B 0 B
assets/css/edit-story.css 792 B 0 B
assets/css/stories-dashboard-rtl.css 768 B 0 B
assets/css/stories-dashboard.css 768 B 0 B
assets/css/vendors-edit-story-rtl.css 752 B 0 B
assets/css/vendors-edit-story.css 752 B 0 B
assets/css/web-stories-block-rtl.css 3.23 kB 0 B
assets/css/web-stories-block.css 3.26 kB 0 B
assets/css/web-stories-embed-rtl.css 284 B 0 B
assets/css/web-stories-embed.css 284 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.26 kB 0 B
assets/css/web-stories-list-styles.css 2.27 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 252 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 252 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 286 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 286 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 311 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 311 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 239 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 239 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 144 B 0 B
assets/css/web-stories-theme-style-twentyten.css 145 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 263 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 263 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 265 B 0 B
assets/css/web-stories-widget-rtl.css 489 B 0 B
assets/css/web-stories-widget.css 489 B 0 B
assets/js/carousel-view.js 3.72 kB 0 B
assets/js/chunk-fonts-********************.js 45.2 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 11.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10.9 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 7.14 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 10.1 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 5.23 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-2-********************.js 7.81 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.3 kB 0 B
assets/js/chunk-web-stories-textset-4-********************.js 4.38 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.64 kB 0 B
assets/js/chunk-web-stories-textset-6-********************.js 5.43 kB 0 B
assets/js/chunk-web-stories-textset-7-********************.js 10.3 kB 0 B
assets/js/edit-story.js 340 kB +42 B (0%)
assets/js/lightbox.js 986 B 0 B
assets/js/stories-dashboard.js 264 kB +39 B (0%)
assets/js/tinymce-button.js 3.48 kB 0 B
assets/js/vendors-chunk-ffmpeg-********************.js 5.57 kB 0 B
assets/js/vendors-edit-story-********************.js 60.1 kB 0 B
assets/js/vendors-edit-story-stories-dashboard-********************.js 269 kB 0 B
assets/js/web-stories-activation-notice.js 70 kB 0 B
assets/js/web-stories-block.js 430 kB +29 B (0%)
assets/js/web-stories-embed.js 493 B 0 B
assets/js/web-stories-widget.js 984 B 0 B

compressed-size-action

@swissspidy
Copy link
Collaborator

Looks like we already do the same in TextPane. Might be time to document this somewhere, otherwise every dev ends up doing the same research at some point 😄

In other places we just ignore the errors (as most people seem to do)

Also https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded#comment118281231_58701523 is worth reading.

@BrittanyIRL
Copy link
Contributor

Looks like we already do the same in TextPane. Might be time to document this somewhere, otherwise every dev ends up doing the same research at some point 😄

I think if anything is the outcome of last week's bummer of having to disable a bunch of tests it's this - we really should start documenting this better.

@embarks
Copy link
Contributor Author

embarks commented Apr 6, 2021

Looks like we already do the same in TextPane. Might be time to document this somewhere, otherwise every dev ends up doing the same research at some point 😄

In other places we just ignore the errors (as most people seem to do)

Also https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded#comment118281231_58701523 is worth reading.

I'll add some documentation!

I saw the cypress fix, which is nice, but I'm not sure how to add an event handler for uncaught exceptions for jest/karma... I did some searching and I'm not sure if it runs on process or what the global is called to add a handler in the same way. Are you familiar with that @swissspidy?

Copy link
Contributor

@samwhale samwhale left a comment

Choose a reason for hiding this comment

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

Nice, this works locally for me. Would be great if we could get a document of common 'gotchas' to track stuff like this

Comment on lines -78 to +79
// TODO #6953
// eslint-disable-next-line jasmine/no-disabled-tests
xit('plays the animation when a control in the panel is changed.', async function () {
it('plays the animation when a control in the panel is changed.', async function () {
Copy link
Contributor

Choose a reason for hiding this comment

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

There's another test right above this that I think you can unskip too!

@embarks embarks force-pushed the fix/6953-animations branch from abcb461 to 8baee02 Compare April 6, 2021 21:40
Copy link
Contributor

@BrittanyIRL BrittanyIRL left a comment

Choose a reason for hiding this comment

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

Also works locally for me!

@embarks embarks force-pushed the fix/6953-animations branch from 68fc6c0 to 1b853d8 Compare April 7, 2021 18:17
@embarks embarks force-pushed the fix/6953-animations branch from a98e8fa to 57eefac Compare April 7, 2021 18:48
@codecov
Copy link

codecov bot commented Apr 7, 2021

Codecov Report

Merging #7069 (57eefac) into main (ea98b90) will increase coverage by 15.93%.
The diff coverage is 83.33%.

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #7069       +/-   ##
===========================================
+ Coverage   65.96%   81.90%   +15.93%     
===========================================
  Files        1129     1133        +4     
  Lines       17523    17554       +31     
===========================================
+ Hits        11559    14377     +2818     
+ Misses       5964     3177     -2787     
Flag Coverage Δ
karmatests 72.43% <83.33%> (+31.52%) ⬆️
unittests 64.68% <0.00%> (-0.01%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
assets/src/design-system/components/popup/index.js 100.00% <ø> (+4.34%) ⬆️
...ry/components/panels/design/animation/animation.js 86.36% <ø> (+75.00%) ⬆️
...ion/effectChooserDropdown/effectChooserDropdown.js 91.66% <0.00%> (+87.31%) ⬆️
assets/src/edit-story/components/popup/index.js 100.00% <ø> (+8.00%) ⬆️
assets/src/design-system/utils/useResizeEffect.js 100.00% <100.00%> (ø)
...ls/design/imageAccessibility/imageAccessibility.js 80.00% <0.00%> (-8.89%) ⬇️
...ls/design/videoAccessibility/videoAccessibility.js 86.36% <0.00%> (-4.12%) ⬇️
...tory/components/panels/document/publish/publish.js 89.65% <0.00%> (-3.21%) ⬇️
assets/src/edit-story/app/prepublish/types.js 100.00% <0.00%> (ø)
assets/src/animation/types.js 100.00% <0.00%> (ø)
... and 293 more

@embarks embarks merged commit 623e68b into main Apr 8, 2021
@embarks embarks deleted the fix/6953-animations branch April 8, 2021 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P1 High priority, must do soon Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix Animation Options Karma Tests
4 participants