chore(vr-tests-v9): Convert Accordion VR tests to CSF (#25525)

microsoft · Nov 9, 2022 · 372cb4b · 372cb4b
1 parent 891868c
commit 372cb4b
Show file tree

Hide file tree

Showing 3 changed files with 186 additions and 161 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion.stories.tsx
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/Accordion.stories.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { CircleRegular } from '@fluentui/react-icons';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Accordion Converged',
+
+  decorators: [
+    story => (
+      <Screener steps={new Screener.Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Accordion>;
+
+export const Size = () => (
+  <Accordion openItems={[0, 1, 2, 3]}>
+    <AccordionItem value={0}>
+      <AccordionHeader size="small">Small</AccordionHeader>
+      <AccordionPanel>Small Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader size="medium">Medium</AccordionHeader>
+      <AccordionPanel>Medium Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader size="large">Large</AccordionHeader>
+      <AccordionPanel>Large Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={3}>
+      <AccordionHeader size="extra-large">Extra Large</AccordionHeader>
+      <AccordionPanel>Extra Large Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+Size.storyName = 'size';
+
+export const SizeRTL = getStoryVariant(Size, RTL);
+
+export const ExpandIconPositionEnd = () => (
+  <Accordion openItems={[0]}>
+    <AccordionItem value={0}>
+      <AccordionHeader expandIconPosition="end">Opened</AccordionHeader>
+      <AccordionPanel>Visible Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader expandIconPosition="end">Closed</AccordionHeader>
+      <AccordionPanel>Hidden Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+ExpandIconPositionEnd.storyName = 'expandIconPosition="end"';
+
+export const ExpandIconPositionEndRTL = getStoryVariant(ExpandIconPositionEnd, RTL);
+
+export const ExpandIconIcon = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0}>
+      <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="start">
+        Expand Icon Start
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon Start Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader expandIcon={<CircleRegular />} expandIconPosition="end">
+        Expand Icon End
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon End Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader inline expandIcon={<CircleRegular />} expandIconPosition="end">
+        Expand Icon Inline End
+      </AccordionHeader>
+      <AccordionPanel>Expand Icon Inline End Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+ExpandIconIcon.storyName = 'expandIcon="<Icon/>"';
+
+export const ExpandIconIconDarkMode = getStoryVariant(ExpandIconIcon, DARK_MODE);
+export const ExpandIconIconHighContrast = getStoryVariant(ExpandIconIcon, HIGH_CONTRAST);
+export const ExpandIconIconRTL = getStoryVariant(ExpandIconIcon, RTL);
+
+export const IconIcon = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0}>
+      <AccordionHeader icon={<CircleRegular />} expandIconPosition="start">
+        Icon Start
+      </AccordionHeader>
+      <AccordionPanel>Icon Start Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader icon={<CircleRegular />} expandIconPosition="end">
+        Icon End
+      </AccordionHeader>
+      <AccordionPanel>Icon End Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2}>
+      <AccordionHeader inline icon={<CircleRegular />} expandIconPosition="end">
+        Icon Inline End
+      </AccordionHeader>
+      <AccordionPanel>Icon Inline End Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+IconIcon.storyName = 'icon="<Icon/>"';
+
+export const IconIconRTL = getStoryVariant(IconIcon, RTL);
+
+export const Disabled = () => (
+  <Accordion openItems={[]}>
+    <AccordionItem value={0} disabled>
+      <AccordionHeader>Disabled Item Opened</AccordionHeader>
+      <AccordionPanel>Disabled Item Opened Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1} disabled>
+      <AccordionHeader>Disabled Item Closed</AccordionHeader>
+      <AccordionPanel>Disabled Item Closed Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={2} disabled>
+      <AccordionHeader inline>Disabled Item ClosedInline</AccordionHeader>
+      <AccordionPanel>Disabled Item ClosedInline Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+Disabled.storyName = 'disabled';
+
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+export const DisabledHighContrast = getStoryVariant(Disabled, HIGH_CONTRAST);
diff --git a/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Accordion/AccordionFocusInteractions.stories.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { ComponentMeta } from '@storybook/react';
+import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL } from '../../utilities';
+
+export default {
+  title: 'Accordion Converged',
+
+  decorators: [
+    story => (
+      <Screener
+        steps={new Screener.Steps()
+          .snapshot('normal', { cropTo: '.testWrapper' })
+          .focus('#opened-btn')
+          .snapshot('focus opened', { cropTo: '.testWrapper' })
+          .focus('#closed-btn')
+          .snapshot('focus closed', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        <div className="testWrapper" style={{ width: '300px' }}>
+          {story()}
+        </div>
+      </Screener>
+    ),
+  ],
+} as ComponentMeta<typeof Accordion>;
+
+export const VisibilityFocus = () => (
+  <Accordion openItems={[0]}>
+    <AccordionItem value={0}>
+      <AccordionHeader button={{ id: 'opened-btn' }}>Opened</AccordionHeader>
+      <AccordionPanel>Opened Panel</AccordionPanel>
+    </AccordionItem>
+    <AccordionItem value={1}>
+      <AccordionHeader button={{ id: 'closed-btn' }}>Closed</AccordionHeader>
+      <AccordionPanel>Closed Panel</AccordionPanel>
+    </AccordionItem>
+  </Accordion>
+);
+
+VisibilityFocus.storyName = 'visibility+focus';
+
+export const VisibilityFocusDarkMode = getStoryVariant(VisibilityFocus, DARK_MODE);
+export const VisibilityFocusHighContrast = getStoryVariant(VisibilityFocus, HIGH_CONTRAST);
+export const VisibilityFocusRTL = getStoryVariant(VisibilityFocus, RTL);