fix: Fix a screenshot bug when using hover & focus state at the same …

…story
reg-viz · Jan 12, 2020 · ed3b6da · ed3b6da
1 parent 1361740
commit ed3b6da
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/examples/v5-managed-react/src/stories/index.js b/examples/v5-managed-react/src/stories/index.js
@@ -1,20 +1,15 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
-
 import { Button, Welcome } from '@storybook/react/demo';
-
+import { isScreenshot } from 'storycap';
 import MyButton from '../MyButton';
 import MyInputText from '../MyInputText';
 import ImageButton from '../ImageButton';
 
-import { isScreenshot } from 'storycap';
-
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-storiesOf('Welcome_override', module)
-.add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
+storiesOf('Welcome_override', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
   screenshot: {
     viewport: 'iPhone 6',
     variants: {
@@ -26,7 +21,7 @@ storiesOf('Welcome_override', module)
 });
 
 storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello { isScreenshot() ? 'Storycap' : 'Button'}</Button>)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello {isScreenshot() ? 'Storycap' : 'Button'}</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
       <span role="img" aria-label="so cool">
@@ -41,25 +36,27 @@ storiesOf('Button_to_be_skipped', module)
       skip: true,
     },
   })
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
 
-storiesOf('MyInputText', module)
-  .add('default', () => <MyInputText />, {
-    screenshot: {
-      focus: 'input[type="text"]',
-    },
-  });
+storiesOf('MyInputText', module).add('default', () => <MyInputText />, {
+  screenshot: {
+    focus: 'input[type="text"]',
+  },
+});
 
-storiesOf('MyButton', module)
-  .add('default', () => <MyButton />, {
-    screenshot: {
-      variants: {
-        hover: {
-          extends: ['LARGE', 'SMALL'],
-          hover: '.my-button',
-        },
+storiesOf('MyButton', module).add('default', () => <MyButton />, {
+  screenshot: {
+    variants: {
+      hovered: {
+        extends: ['LARGE', 'SMALL'],
+        hover: '.my-button',
+      },
+      focused: {
+        extends: ['LARGE', 'SMALL'],
+        focus: '.my-button',
       },
     },
-  });
+  },
+});
 
-storiesOf('ImageButton', module).add('default', () => <ImageButton />)
+storiesOf('ImageButton', module).add('default', () => <ImageButton />);
diff --git a/packages/storycap/src/node/capturing-browser.ts b/packages/storycap/src/node/capturing-browser.ts
@@ -112,7 +112,13 @@ export class CapturingBrowser extends StoryPreviewBrowser {
     if (!this.touched || !story) return;
     this.debug('Reset story because page state got dirty in this request.', this.currentRequestId);
     await this.setCurrentStory(story, { forceRerender: true });
+
+    // Clear the browser state.
+    await this.page.hover('body');
+    await this.page.focus('body');
+
     this.touched = false;
+
     return;
   }