Skip to content

Commit

Permalink
Button: Adding visual regression tests for focused scenarios (microso…
Browse files Browse the repository at this point in the history 
…ft#13832)

#### Pull request checklist

- [ ] Addresses an existing issue: Fixes #0000
- [x] Include a change request file using `$ yarn change`

#### Description of changes

This PR adds visual regression tests for scenarios where the `Button` has been focused.

#### Focus areas to test

(optional)
  • Loading branch information
@khmakoto
khmakoto committed Jun 30, 2020
1 parent 7932ae5 commit a41ab1f
Showing 1 changed file with 82 additions and 0 deletions.
82 changes: 82 additions & 0 deletions apps/vr-tests/src/stories/ButtonNext.stories.tsx
View file
Expand Up @@ -3,8 +3,10 @@ import * as React from 'react';
import Screener, { Steps } from 'screener-storybook/src/screener';
import { storiesOf } from '@storybook/react';
import { Button } from '@fluentui/react-button';
import { FabricDecorator } from '../utilities';

storiesOf('Button Next', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -13,6 +15,14 @@ storiesOf('Button Next', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -24,6 +34,7 @@ storiesOf('Button Next', module)
.addStory('Primary Disabled', () => <Button primary disabled content="Hello, world" />);

storiesOf('Button Next - With icon before content', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -32,6 +43,14 @@ storiesOf('Button Next - With icon before content', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -43,6 +62,7 @@ storiesOf('Button Next - With icon before content', module)
.addStory('Primary Disabled', () => <Button primary disabled content="Hello, world" icon="X" />);

storiesOf('Button Next - With icon after content', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -51,6 +71,14 @@ storiesOf('Button Next - With icon after content', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -68,6 +96,7 @@ storiesOf('Button Next - With icon after content', module)
));

storiesOf('Button Next - Circular', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -76,6 +105,14 @@ storiesOf('Button Next - Circular', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -89,6 +126,7 @@ storiesOf('Button Next - Circular', module)
));

storiesOf('Button Next - Icon only', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -97,6 +135,14 @@ storiesOf('Button Next - Icon only', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -110,6 +156,7 @@ storiesOf('Button Next - Icon only', module)
));

storiesOf('Button Next - Fluid', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -118,6 +165,14 @@ storiesOf('Button Next - Fluid', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -131,6 +186,7 @@ storiesOf('Button Next - Fluid', module)
));

storiesOf('Button Next - Inverted', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -139,6 +195,14 @@ storiesOf('Button Next - Inverted', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -152,6 +216,7 @@ storiesOf('Button Next - Inverted', module)
));

storiesOf('Button Next - Loading', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -160,6 +225,14 @@ storiesOf('Button Next - Loading', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand All @@ -173,6 +246,7 @@ storiesOf('Button Next - Loading', module)
));

storiesOf('Button Next - Sizes', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
Expand All @@ -181,6 +255,14 @@ storiesOf('Button Next - Sizes', module)
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
)
.executeScript("document.getElementsByTagName('button')[0].focus()")
.snapshot('focus', { cropTo: '.testWrapper' })
.executeScript(
"document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
)
.end()}
>
{story()}
Expand Down

0 comments on commit a41ab1f

Please sign in to comment.