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

Add unit and vr tests to Rating #30414

Merged
merged 13 commits into from
Feb 2, 2024
Merged

Add unit and vr tests to Rating #30414

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
93a0f0a
Add unit and vr tests to Rating
tomi-msft Jan 29, 2024
6e07210
Merge branch 'master' into react-rating-tests
tomi-msft Jan 29, 2024
2b63aa2
Add accesibllity props to Rating and RatingDisplay and update package…
tomi-msft Jan 29, 2024
05c3a26
change file
tomi-msft Jan 29, 2024
695c023
Merge branch 'master' of https://github.com/microsoft/fluentui into r…
tomi-msft Jan 31, 2024
da49b42
update unit tests to use testing queries and reduce vr tests
tomi-msft Feb 1, 2024
6ba5146
update RatingDisplay queries
tomi-msft Feb 2, 2024
9cf8d07
apply suggestions from code review
tomi-msft Feb 2, 2024
87a34e0
Merge branch 'master' into react-rating-tests
tomi-msft Feb 2, 2024
1988e0f
update RatingDisplay vr test with new icon prop
tomi-msft Feb 2, 2024
22d38ce
make all Rating stories under same name
tomi-msft Feb 2, 2024
d5028da
crop test screenshots
tomi-msft Feb 2, 2024
bb405ac
crop stories properly
tomi-msft Feb 2, 2024
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
1 change: 1 addition & 0 deletions apps/vr-tests-react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"@fluentui/react-progress": "*",
"@fluentui/react-provider": "*",
"@fluentui/react-radio": "*",
"@fluentui/react-rating-preview": "*",
"@fluentui/react-search-preview": "*",
"@fluentui/react-select": "*",
"@fluentui/react-shared-contexts": "*",
Expand Down
213 changes: 213 additions & 0 deletions apps/vr-tests-react-components/src/stories/Rating.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
import * as React from 'react';
import { Steps, StoryWright } from 'storywright';
import { storiesOf } from '@storybook/react';
import { CircleRegular, CircleFilled, SquareRegular, SquareFilled } from '@fluentui/react-icons';
import { Rating } from '@fluentui/react-rating-preview';
import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';

storiesOf('Rating Converged', module)
.addDecorator(TestWrapperDecoratorFixedWidth)
.addDecorator(story => (
<StoryWright
steps={new Steps()
.snapshot('rest', { cropTo: '.testWrapper' })
.hover('input')
.snapshot('hover', { cropTo: '.testWrapper' })
.mouseDown('input')
.snapshot('active', { cropTo: '.testWrapper' })
.end()}
>
{story()}
</StoryWright>
))
.addStory('Neutral Rating size small no value', () => <Rating size="small" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size small with value', () => <Rating size="small" defaultValue={3} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size small filled', () => <Rating size="small" defaultValue={5} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size medium no value', () => <Rating size="medium" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size medium with value', () => <Rating size="medium" defaultValue={3} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size medium filled', () => <Rating size="medium" defaultValue={5} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size large no value', () => <Rating size="large" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size large with value', () => <Rating size="large" defaultValue={3} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size large filled', () => <Rating size="large" defaultValue={5} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size extra large no value', () => <Rating size="extra-large" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size extra large with value', () => <Rating size="extra-large" defaultValue={3} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Neutral Rating size extra large filled', () => <Rating size="extra-large" defaultValue={5} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory(
'Neutral Rating with custom circle icons',
() => <Rating iconFilled={<CircleFilled />} iconOutline={<CircleRegular />} defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Neutral Rating with custom square icons',
() => <Rating iconFilled={<SquareFilled />} iconOutline={<SquareRegular />} defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory('Neutral Rating with half value', () => <Rating defaultValue={2.5} step={0.5} />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size small no value', () => <Rating size="small" color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size small with value', () => <Rating size="small" defaultValue={3} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size small filled', () => <Rating size="small" defaultValue={5} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size medium no value', () => <Rating size="medium" color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size medium with value', () => <Rating size="medium" defaultValue={3} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size medium filled', () => <Rating size="medium" defaultValue={5} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size large no value', () => <Rating size="large" color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size large with value', () => <Rating size="large" defaultValue={3} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size large filled', () => <Rating size="large" defaultValue={5} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Brand Rating size extra large no value', () => <Rating size="extra-large" color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory(
'Brand Rating size extra large with value',
() => <Rating size="extra-large" defaultValue={3} color="brand" />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Brand Rating size extra large filled',
() => <Rating size="extra-large" defaultValue={5} color="brand" />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Brand Rating with custom circle icons',
() => <Rating iconFilled={<CircleFilled />} iconOutline={<CircleRegular />} color="brand" defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Brand Rating with custom square icons',
() => <Rating iconFilled={<SquareFilled />} iconOutline={<SquareRegular />} color="brand" defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory('Brand Rating with half value', () => <Rating defaultValue={2.5} step={0.5} color="brand" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size small no value', () => <Rating size="small" color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size small with value', () => <Rating size="small" defaultValue={3} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size small filled', () => <Rating size="small" defaultValue={5} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size medium no value', () => <Rating size="medium" color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory(
'Marigold Rating size medium with value',
() => <Rating size="medium" defaultValue={3} color="marigold" />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory('Marigold Rating size medium filled', () => <Rating size="medium" defaultValue={5} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size large no value', () => <Rating size="large" color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size large with value', () => <Rating size="large" defaultValue={3} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size large filled', () => <Rating size="large" defaultValue={5} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('Marigold Rating size extra large no value', () => <Rating size="extra-large" color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory(
'Marigold Rating size extra large with value',
() => <Rating size="extra-large" defaultValue={3} color="marigold" />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Marigold Rating size extra large filled',
() => <Rating size="extra-large" defaultValue={5} color="marigold" />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Marigold Rating with custom circle icons',
() => <Rating iconFilled={<CircleFilled />} iconOutline={<CircleRegular />} color="marigold" defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory(
'Marigold Rating with custom square icons',
() => <Rating iconFilled={<SquareFilled />} iconOutline={<SquareRegular />} color="marigold" defaultValue={3} />,
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory('Marigold Rating with half value', () => <Rating defaultValue={2.5} step={0.5} color="marigold" />, {
includeHighContrast: true,
includeDarkMode: true,
});
Loading
Loading