diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 66c3ac40876f01..17f1fcda10381b 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -35,6 +35,7 @@ "@fluentui/react-persona": "^9.0.0", "@fluentui/react-popover": "^9.1.1", "@fluentui/react-positioning": "^9.2.0", + "@fluentui/react-progress": "9.0.0-alpha.0", "@fluentui/react-provider": "^9.1.3", "@fluentui/react-radio": "^9.0.7", "@fluentui/react-select": "9.0.0-beta.10", diff --git a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx new file mode 100644 index 00000000000000..05d2c567954f92 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { Progress } from '@fluentui/react-progress'; + +storiesOf('Progress converged', module) + .addStory('Indeterminate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Indeterminate with thickness large', () => ) + .addStory('Determinate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Determinate with thickness large', () => ); diff --git a/change/@fluentui-react-progress-0341ff0e-8632-492b-8459-66f2acc50ea6.json b/change/@fluentui-react-progress-0341ff0e-8632-492b-8459-66f2acc50ea6.json new file mode 100644 index 00000000000000..42cf99b94a79a3 --- /dev/null +++ b/change/@fluentui-react-progress-0341ff0e-8632-492b-8459-66f2acc50ea6.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Add vr and conformance tests.", + "packageName": "@fluentui/react-progress", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-progress/Spec.md b/packages/react-components/react-progress/Spec.md index 3ccc354c4ef3f8..611709c849e994 100644 --- a/packages/react-components/react-progress/Spec.md +++ b/packages/react-components/react-progress/Spec.md @@ -2,7 +2,7 @@ ## Background -The `Progress` component is used to display the current progress of an operation flow. +The `Progress` component is used to display the current progress of an operation flow, or show that an operation is currently being executed. ## Prior Art @@ -34,7 +34,7 @@ Basic example: import { Progress } from '@fluentui/react-progress'; function App() { - return ; + return ; } ``` @@ -45,6 +45,28 @@ function App() { - Determinate Progress - The determinate form of the Progress component that incrementally loads from 0% to 100% +#### Adding Label and Description with ProgressField + +There is a `ProgressField` component that adds a `label`, validation state(`success`, `warning`, `error`), and hint text to the `Progress`. +You can use it like so: + +```jsx +import * as React from 'react'; +import type { ProgressFieldProps } from '@fluentui/react-field'; +import { ProgressField } from '@fluentui/react-field'; + +export const Default = (props: ProgressFieldProps) => ( + +); +``` + ### Shape The Progress is represented as a rounded rectangular area with an inner animated bar that either travels across the area indefinitely or animates up till a specified point @@ -53,28 +75,19 @@ The Progress is represented as a rounded rectangular area with an inner animated ### Slots -- `root` - The root element of the Progress. The html element is a `div` +- `root` - The root element of the Progress, which also serves as the track for the Progress bar. The html element is a `div` - `bar` - The div element that gets animated into a Progress bar. The html element is `div` -- `track` - The div element that functions as the track for the Progress bar. The html element is `div` -- `label` - The text shown above the Progress. The html element is a `span` -- `description` - The text shown below the Progress. The html element is a `span` ### Props -See API at [Progress.types.tsx](./src/components/Progress/Progress.types.ts). +See API at [Progress.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-progress/src/components/Progress/Progress.types.ts). ## Structure ```html
- - Loading... - -
- - Loading Text
``` @@ -88,7 +101,7 @@ See [MIGRATION.md](./MIGRATION.md). - **Display** - The Progress will use the following priority: - - Specifying the `percentComplete` from `0` to `1` will alter the Progress from indeterminate to determinate. + - Specifying the `value` prop will alter the Progress from `indeterminate` to `determinate`. - The component also has `rtl` support and will animate the progress bar from right to left if set. ### Interaction @@ -103,3 +116,5 @@ The Progress is non-interactive. - **Touch** - Nothing ## Accessibility + +- The `determinate` Progress has the proper `aria` attributes assigned to the element that will allow screen readers to get the `max` and current `value` of the `Progress`. diff --git a/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx b/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx index 467578b5ef4758..8d0ee6f72d9f50 100644 --- a/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx +++ b/packages/react-components/react-progress/src/components/Progress/Progress.test.tsx @@ -19,10 +19,26 @@ describe('Progress', () => { }, }); - // TODO add more tests here, and create visual regression tests in /apps/vr-tests - - it('renders a default state', () => { - const result = render(Default Progress); - expect(result.container).toMatchSnapshot(); + it('has role progressbar', () => { + const result = render(); + expect(result.getByRole('progressbar')).toBeDefined(); + }); + it('does not add aria attributes for indeterminate', () => { + const result = render(); + expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toBeFalsy(); + expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toBeFalsy(); + expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toBeFalsy(); + }); + it('adds aria attributes for determinate', () => { + const result = render(); + expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('0.52'); + expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0'); + expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('1'); + }); + it('updates the max prop properly', () => { + const result = render(); + expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toEqual('13'); + expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toEqual('0'); + expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toEqual('42'); }); }); diff --git a/packages/react-components/react-progress/src/components/Progress/__snapshots__/Progress.test.tsx.snap b/packages/react-components/react-progress/src/components/Progress/__snapshots__/Progress.test.tsx.snap deleted file mode 100644 index e3869fcb8905d1..00000000000000 --- a/packages/react-components/react-progress/src/components/Progress/__snapshots__/Progress.test.tsx.snap +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Progress renders a default state 1`] = ` -
-
-
-
-
-`; diff --git a/packages/react-components/react-progress/src/components/Progress/useProgress.tsx b/packages/react-components/react-progress/src/components/Progress/useProgress.tsx index 47eca9757ae664..6806630d81cf6f 100644 --- a/packages/react-components/react-progress/src/components/Progress/useProgress.tsx +++ b/packages/react-components/react-progress/src/components/Progress/useProgress.tsx @@ -15,15 +15,17 @@ export const useProgress_unstable = (props: ProgressProps, ref: React.Ref