Merge pull request #92 from happo/cancel-animation-frame

Stop no-op:ing cancelAnimationFrame

src/JSDOMDomProvider.js

@@ -46,7 +46,7 @@ export default class JSDOMDomProvider {
               availHeight: { value: height },
             });
             win.requestAnimationFrame = (callback) => setTimeout(callback, 0);
-            win.cancelAnimationFrame = () => {};
+            win.cancelAnimationFrame = clearTimeout;
           },
         },
         jsdomOptions,

test/integrations/examples/Foo-react-happo.js

@@ -107,3 +107,41 @@ export const themedExampleAsync = (renderInDom) => {
   );
   return new Promise((resolve) => setTimeout(resolve, 20));
 };
+
+class RAFExample extends React.Component {
+  async componentDidMount() {
+    window.requestAnimationFrame(() => {
+      this.setState({ label: 'Loaded' });
+    });
+  }
+
+  render() {
+    if (!this.state) {
+      return null;
+    }
+    return <div>{this.state.label}</div>;
+  }
+}
+
+export const rafExample = () => <RAFExample />;
+
+class RAFUnmountExample extends React.Component {
+  async componentDidMount() {
+    this.raf = window.requestAnimationFrame(() => {
+      document.title = 'Foobar';
+    });
+  }
+
+  componentWillUnmount() {
+    window.cancelAnimationFrame(this.raf);
+  }
+
+  render() {
+    if (!this.state) {
+      return <div>Not loaded</div>;
+    }
+    return <div>{this.state.label}</div>;
+  }
+}
+
+export const rafUnmountExample = () => <RAFUnmountExample />;

test/integrations/react-test.js

@@ -123,6 +123,18 @@ it('produces the right html', async () => {
       html: '<button>I am dark</button>',
       variant: 'themedExampleAsync',
     },
+    {
+      component: 'Foo-react',
+      css: '',
+      html: '<div>Loaded</div>',
+      variant: 'rafExample',
+    },
+    {
+      component: 'Foo-react',
+      css: '',
+      html: '<div>Not loaded</div>',
+      variant: 'rafUnmountExample',
+    },
     {
       component: 'Foo-react',
       css: '',
@@ -175,7 +187,7 @@ describe('with the puppeteer plugin', () => {
 
   it('produces the right number of snaps', async () => {
     await subject();
-    expect(config.targets.chrome.snapPayloads.length).toBe(16);
+    expect(config.targets.chrome.snapPayloads.length).toBe(18);
   });
 });