Add conformance and vr tests to react-progress

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",
+    "@fuentui/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",

apps/vr-tests-react-components/src/stories/Progress.stories.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Progress } from '@fluentui/react-progress';
+import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator';
+
+storiesOf('Progress converged', module)
+  .addDecorator(TestWrapperDecoratorNoAnimation)
+  .addStory('Indeterminate', () => <Progress className="test-class" />, {
+    includeDarkMode: true,
+    includeHighContrast: true,
+    includeRtl: true,
+  })
+  .addStory('Indeterminate with thickness large', () => <Progress className="test-class" thickness="large" />)
+  .addStory('Determinate', () => <Progress className="test-class" value={0.5} />, {
+    includeDarkMode: true,
+    includeHighContrast: true,
+    includeRtl: true,
+  })
+  .addStory('Determinate with thickness large', () => (
+    <Progress className="test-class" value={0.5} thickness="large" />
+  ));

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 <Progress thickness="large" label="Loading" />;
+  return <Progress thickness="large" />;
 }
 ```
 
@@ -53,28 +53,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
 <div class="fui-Progress">
-  <!-- Label for Progress -->
-  <span className="fui-Progress__label">Loading...</span>
-  <!-- Track for Progress -->
-  <div class="fui-Progress__track" />
   <!-- Bar for Progress -->
   <div class="fui-Progess__bar" />
-  <!-- Label for Progress description -->
-  <span className="fui-Progress__description">Loading Text</span>
 </div>
 ```
 
@@ -88,7 +79,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 +94,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`.

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(<Progress>Default Progress</Progress>);
     expect(result.container).toMatchSnapshot();
   });
+  it('has role progressbar', () => {
+    const result = render(<Progress />);
+    expect(result.getByRole('progressbar')).toBeDefined();
+  });
+  it('doesnt add aria attributes for indeterminate', () => {
+    const result = render(<Progress />);
+    expect(result.getByRole('progressbar').getAttribute('aria-valuenow')).toBeFalsy();
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemax')).toBeFalsy();
+    expect(result.getByRole('progressbar').getAttribute('aria-valuemin')).toBeFalsy();
+  });
+  it('adds aria attributes for determinate', () => {
+    const result = render(<Progress value={0.52} />);
+    expect(result.container.getElementsByClassName('fui-Progress__bar')[0].getAttribute('aria-valuenow')).toEqual(
+      '0.52',
+    );
+    expect(result.container.getElementsByClassName('fui-Progress__bar')[0].getAttribute('aria-valuemin')).toEqual('0');
+    expect(result.container.getElementsByClassName('fui-Progress__bar')[0].getAttribute('aria-valuemax')).toEqual('1');
+  });
 });