Added VR tests for Breadcrumb (microsoft#28653)

* Added Breadcrumb stories to the folder. * Added VR tests for the Breadcrumb
GeoffCoxMSFT · Jul 31, 2023 · 58c60bc · 58c60bc
1 parent 9250428
commit 58c60bc
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 6 deletions.
diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -23,6 +23,7 @@
     "@fluentui/react-accordion": "*",
     "@fluentui/react-avatar": "*",
     "@fluentui/react-badge": "*",
+    "@fluentui/react-breadcrumb-preview": "*",
     "@fluentui/react-button": "*",
     "@fluentui/react-card": "*",
     "@fluentui/react-checkbox": "*",

diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/Breadcrumb.stories.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Breadcrumb } from '@fluentui/react-breadcrumb-preview';
+import { SampleBreadcrumbButtons, SampleBreadcrumbLinks, SampleBreadcrumbItems, steps } from './utils';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities';
+
+export default {
+  title: 'Breadcrumb Converged',
+  decorators: [story => withStoryWrightSteps({ story, steps })],
+} as ComponentMeta<typeof Breadcrumb>;
+
+export const Appearance = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <h2>Transparent</h2>
+    <SampleBreadcrumbButtons appearance="transparent" />
+    <h2>Subtle</h2>
+    <SampleBreadcrumbButtons appearance="subtle" />
+
+    <h1>BreadcrumbLink</h1>
+    <h2>Transparent</h2>
+    <SampleBreadcrumbLinks appearance="transparent" />
+    <h2>Subtle</h2>
+    <SampleBreadcrumbLinks appearance="subtle" />
+  </>
+);
+
+Appearance.storyName = 'appearance';
+
+export const AppearanceDarkMode = getStoryVariant(Appearance, DARK_MODE);
+export const AppearanceHighContrast = getStoryVariant(Appearance, HIGH_CONTRAST);
+export const AppearanceRTL = getStoryVariant(Appearance, RTL);
+
+export const Size = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <SampleBreadcrumbButtons size="small" />
+    <SampleBreadcrumbButtons size="medium" />
+    <SampleBreadcrumbButtons size="large" />
+
+    <h1>BreadcrumbLink</h1>
+    <SampleBreadcrumbLinks size="small" />
+    <SampleBreadcrumbLinks size="medium" />
+    <SampleBreadcrumbLinks size="large" />
+
+    <h1>BreadcrumbItem</h1>
+    <SampleBreadcrumbItems size="small" />
+    <SampleBreadcrumbItems size="medium" />
+    <SampleBreadcrumbItems size="large" />
+  </>
+);
+
+Size.storyName = 'size';
+
+export const DividerType = () => (
+  <>
+    <h1>BreadcrumbButton</h1>
+    <SampleBreadcrumbButtons dividerType="chevron" />
+
+    <h1>BreadcrumbLink</h1>
+    <SampleBreadcrumbLinks dividerType="chevron" />
+
+    <h1>BreadcrumbItem</h1>
+    <SampleBreadcrumbItems dividerType="slash" size="small" />
+    <SampleBreadcrumbItems dividerType="chevron" />
+  </>
+);
+
+DividerType.storyName = 'divider type';
diff --git a/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx b/apps/vr-tests-react-components/src/stories/Breadcrumb/utils.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Steps } from 'storywright';
+import {
+  Breadcrumb,
+  BreadcrumbButton,
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbDivider,
+} from '@fluentui/react-breadcrumb-preview';
+import { bundleIcon, CalendarMonth20Filled, CalendarMonth20Regular } from '@fluentui/react-icons';
+const CalendarMonth = bundleIcon(CalendarMonth20Filled, CalendarMonth20Regular);
+
+export const steps = new Steps()
+  .snapshot('default', { cropTo: '.testWrapper' })
+  .hover('.breadcrumb-sample')
+  .snapshot('hover', { cropTo: '.testWrapper' })
+  .mouseDown('.breadcrumb-sample')
+  .snapshot('pressed', { cropTo: '.testWrapper' })
+  .focus('.breadcrumb-sample')
+  .snapshot('focused', { cropTo: '.testWrapper' })
+  .end();
+
+export const SampleBreadcrumbButtons = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>
+      <BreadcrumbButton icon={<CalendarMonth />}>Item 1</BreadcrumbButton>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbButton disabled>Item 2</BreadcrumbButton>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbButton current>Item 3</BreadcrumbButton>
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const SampleBreadcrumbLinks = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>
+      <BreadcrumbLink icon={<CalendarMonth />}>Item 1</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbLink disabled>Item 2</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>
+      <BreadcrumbLink current>Item 3</BreadcrumbLink>
+    </BreadcrumbItem>
+  </Breadcrumb>
+);
+
+export const SampleBreadcrumbItems = (props: BreadcrumbProps) => (
+  <Breadcrumb {...props} className="breadcrumb-sample">
+    <BreadcrumbItem>Item 1</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem>Item 2</BreadcrumbItem>
+    <BreadcrumbDivider />
+    <BreadcrumbItem current>Item 3</BreadcrumbItem>
+  </Breadcrumb>
+);
diff --git a/...components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx b/...components/react-breadcrumb-preview/stories/Breadcrumb/BreadcrumbWithOverflow.stories.tsx
@@ -130,7 +130,7 @@ const useExampleStyles = makeStyles({
     height: 'fit-content',
     minWidth: '150px',
     resize: 'horizontal',
-    width: '500px',
+    width: '600px',
   },
 });
 

diff --git a/...ages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx b/...ages/react-components/react-breadcrumb-preview/stories/BreadcrumbButton/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbButtonBestPractices.md';
 export { Default } from './BreadcrumbButtonDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbButton',
+  title: 'Preview Components/Breadcrumb/BreadcrumbButton',
   component: BreadcrumbButton,
   parameters: {
     docs: {

diff --git a/...ges/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx b/...ges/react-components/react-breadcrumb-preview/stories/BreadcrumbDivider/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbDividerBestPractices.md';
 export { Default } from './BreadcrumbDividerDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbDivider',
+  title: 'Preview Components/Breadcrumb/BreadcrumbDivider',
   component: BreadcrumbDivider,
   parameters: {
     docs: {

diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbItem/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbItemBestPractices.md';
 export { Default } from './BreadcrumbItemDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbItem',
+  title: 'Preview Components/Breadcrumb/BreadcrumbItem',
   component: BreadcrumbItem,
   parameters: {
     docs: {

diff --git a/...ponents/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx b/...ponents/react-breadcrumb-preview/stories/BreadcrumbLink/BreadcrumbLinkDefault.stories.tsx
@@ -102,7 +102,7 @@ export const Default = () => {
   const [appearance, setAppearance] = React.useState('transparent' as BreadcrumbProps['appearance']);
   return (
     <>
-      <Label>Appearance (see the difference on `hover`)</Label>
+      <Label>Appearance</Label>
       <RadioGroup
         aria-labelledby="breadcrumb-appearance"
         value={appearance}

diff --git a/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx b/packages/react-components/react-breadcrumb-preview/stories/BreadcrumbLink/index.stories.tsx
@@ -6,7 +6,7 @@ import bestPracticesMd from './BreadcrumbLinkBestPractices.md';
 export { Default } from './BreadcrumbLinkDefault.stories';
 
 export default {
-  title: 'Preview Components/BreadcrumbLink',
+  title: 'Preview Components/Breadcrumb/BreadcrumbLink',
   component: BreadcrumbLink,
   parameters: {
     docs: {