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.

Sign up for GitHub

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

Button: Adding visual regression tests #9159

Merged
merged 6 commits into from
May 29, 2019
Merged

Button: Adding visual regression tests #9159

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5f8120a
Button: Adding vr tests.
khmakoto May 20, 2019
f869831
Adding change file.
khmakoto May 20, 2019
8f2009a
Fixing BEM style inconsistency.
khmakoto May 21, 2019
b2516ce
Fixing merge conflicts.
khmakoto May 24, 2019
102a08d
Merge branch 'fabric-7' of https://github.com/OfficeDev/office-ui-fab…
khmakoto May 28, 2019
4f906a9
Merge branch 'fabric-7' of https://github.com/OfficeDev/office-ui-fab…
khmakoto May 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
293 changes: 293 additions & 0 deletions apps/vr-tests/src/stories/NewButton.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,293 @@
/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
import * as React from 'react';
import Screener, { Steps } from 'screener-storybook/src/screener';
import { storiesOf } from '@storybook/react';
import { FabricDecorator } from '../utilities';
import {
Button,
IButtonProps,
MenuButton,
IMenuButtonProps,
SplitButton,
DefaultButton,
PrimaryButton,
ActionButton,
BaseButton,
CommandBarButton,
CompoundButton,
IconButton,
MessageBarButton
} from '@uifabric/experiments';
import { Stack, Text } from 'office-ui-fabric-react';

const baseProps: IButtonProps = {
icon: 'AddFriend',
content: 'Button'
};

const menuProps: IMenuButtonProps = {
content: 'Button',
menu: {
items: [
{
key: 'a',
name: 'Item a'
},
{
key: 'b',
name: 'Item b'
}
]
}
};

storiesOf('Button', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <Button {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <Button disabled {...baseProps} />)
.addStory('Primary', () => <Button primary {...baseProps} />, { rtl: true })
.addStory('Primary Disabled', () => <Button primary disabled {...baseProps} />)
.addStory(
'Multiline',
() => (
<Button icon="Share">
<Stack as="span" horizontalAlign="start" tokens={{ padding: '8px 0px' }}>
<Text>Compound multiline button</Text>
<Text variant="small">Caption</Text>
</Stack>
</Button>
),
{ rtl: true }
);

storiesOf('Button - Circular', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <Button circular icon="AddFriend" />)
.addStory('Disabled', () => <Button circular disabled icon="AddFriend" />)
.addStory('Primary', () => <Button circular primary icon="AddFriend" />)
.addStory('Primary Disabled', () => <Button circular primary disabled icon="AddFriend" />);

storiesOf('MenuButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-MenuButton')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-MenuButton')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <MenuButton {...menuProps} />, { rtl: true })
.addStory('Disabled', () => <MenuButton disabled {...menuProps} />)
.addStory('Primary', () => <MenuButton primary {...menuProps} />, { rtl: true })
.addStory('Primary Disabled', () => <MenuButton primary disabled {...menuProps} />);

storiesOf('SplitButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('button hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('button pressed', { cropTo: '.testWrapper' })
.mouseUp('.ms-Button')
.hover('.ms-MenuButton')
.snapshot('menu button hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-MenuButton')
.snapshot('menu button pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <SplitButton {...menuProps} />, { rtl: true })
.addStory('Disabled', () => <SplitButton disabled {...menuProps} />)
.addStory('Primary', () => <SplitButton primary {...menuProps} />, { rtl: true })
.addStory('Primary Disabled', () => <SplitButton primary disabled {...menuProps} />);

storiesOf('DefaultButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <DefaultButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <DefaultButton disabled {...baseProps} />);

storiesOf('PrimaryButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <PrimaryButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <PrimaryButton disabled {...baseProps} />);

storiesOf('ActionButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <ActionButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <ActionButton disabled {...baseProps} />);

storiesOf('BaseButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <BaseButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <BaseButton disabled {...baseProps} />);

storiesOf('CommandBarButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <CommandBarButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <CommandBarButton disabled {...baseProps} />);

storiesOf('CompoundButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <CompoundButton text="Button" secondaryText="Caption" />, {
rtl: true
})
.addStory('Disabled', () => <CompoundButton disabled text="Button" secondaryText="Caption" />)
.addStory('Primary', () => <CompoundButton primary text="Button" secondaryText="Caption" />, {
rtl: true
})
.addStory('Primary Disabled', () => (
<CompoundButton primary disabled text="Button" secondaryText="Caption" />
));

storiesOf('IconButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <IconButton icon="Emoji2" />, { rtl: true })
.addStory('Disabled', () => <IconButton disabled icon="Emoji2" />);

storiesOf('MessageBarButton', module)
.addDecorator(FabricDecorator)
.addDecorator(story => (
<Screener
steps={new Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('.ms-Button')
.snapshot('hovered', { cropTo: '.testWrapper' })
.mouseDown('.ms-Button')
.snapshot('pressed', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</Screener>
))
.addStory('Default', () => <MessageBarButton {...baseProps} />, { rtl: true })
.addStory('Disabled', () => <MessageBarButton disabled {...baseProps} />)
.addStory('Primary', () => <MessageBarButton primary {...baseProps} />, { rtl: true })
.addStory('Primary Disabled', () => <MessageBarButton primary disabled {...baseProps} />);
11 changes: 11 additions & 0 deletions common/changes/@uifabric/experiments/buttonVRTests_2019-05-20-23-49.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/experiments",
"comment": "Button: Adding VR tests and fixing some className assignments in styling.",
khmakoto marked this conversation as resolved.
Show resolved Hide resolved
"type": "patch"
}
],
"packageName": "@uifabric/experiments",
"email": "[email protected]"
}
15 changes: 8 additions & 7 deletions packages/experiments/src/components/Button/Button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,14 +204,15 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):

const globalClassNames = getGlobalClassNames(
{
icon: 'ms-Icon'
msButton: 'ms-Button',
msButtonIcon: 'ms-Button-Icon'
khmakoto marked this conversation as resolved.
Show resolved Hide resolved
},
theme,
true
theme
);

return {
root: [
globalClassNames.msButton,
!circular && getFocusStyle(theme, { inset: 1, outlineColor: tokens.outlineColor }),
circular && {
selectors: {
Expand Down Expand Up @@ -281,7 +282,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
}
}
},
[`:hover .${globalClassNames.icon}`]: {
[`:hover .${globalClassNames.msButtonIcon}`]: {
color: tokens.iconColorHovered,

selectors: {
Expand All @@ -290,7 +291,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
}
}
},
[`:active .${globalClassNames.icon}`]: {
[`:active .${globalClassNames.msButtonIcon}`]: {
color: tokens.iconColorPressed,

selectors: {
Expand Down Expand Up @@ -319,6 +320,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
height: '100%'
},
icon: [
globalClassNames.msButtonIcon,
{
display: 'flex',
fontSize: tokens.iconSize,
Expand All @@ -332,8 +334,7 @@ export const ButtonStyles: IButtonComponent['styles'] = (props, theme, tokens):
color: tokens.highContrastIconColor
}
}
},
globalClassNames.icon
}
],
content: {
overflow: 'visible',
Expand Down
2 changes: 1 addition & 1 deletion packages/experiments/src/components/Button/Button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as renderer from 'react-test-renderer';
import { CommandBar, Icon, Text } from 'office-ui-fabric-react';
import { Button } from './Button';

describe('Button view', () => {
describe('Button', () => {
it('renders a default Button with content correctly', () => {
const component = renderer.create(<Button content="Default button" />);
const tree = component.toJSON();
Expand Down
2 changes: 1 addition & 1 deletion packages/experiments/src/components/Button/ButtonVariants.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as renderer from 'react-test-renderer';

import { ActionButton, CommandBarButton, CompoundButton, DefaultButton, IconButton, MessageBarButton, PrimaryButton } from './index';

describe('Button view', () => {
describe('Button Variants', () => {
it('renders a DefaultButton correctly', () => {
const component = renderer.create(<DefaultButton content="Button" />);
const tree = component.toJSON();
Expand Down
Loading