Add SearchBox VR-tests (#28323)

* add vr tests * fix packages * added more tests * Update apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx Co-authored-by: Sean Monahan <[email protected]> * update dismiss button focus --------- Co-authored-by: Sean Monahan <[email protected]>
microsoft · Jun 30, 2023 · c3cafe0 · c3cafe0
1 parent 3deadf5
commit c3cafe0
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 0 deletions.
diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -46,6 +46,7 @@
     "@fluentui/react-progress": "^9.1.19",
     "@fluentui/react-provider": "^9.7.6",
     "@fluentui/react-radio": "^9.1.21",
+    "@fluentui/react-search": "9.0.0-alpha.0",
     "@fluentui/react-select": "^9.1.19",
     "@fluentui/react-shared-contexts": "^9.5.1",
     "@fluentui/react-skeleton": "^9.0.7",

diff --git a/apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx b/apps/vr-tests-react-components/src/stories/SearchBox.stories.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import { storiesOf } from '@storybook/react';
+import { SearchBox } from '@fluentui/react-search';
+import { ArrowEnterLeftRegular, MicRegular } from '@fluentui/react-icons';
+import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
+
+// Focused & unfocused stories
+storiesOf('SearchBox Converged', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <StoryWright
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .click('input')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .click('input')
+        .wait(250) // let focus border animation finish
+        .snapshot('focused', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </StoryWright>
+  ))
+  .addStory('With value', () => <SearchBox defaultValue="Value!" />)
+  .addStory('Appearance: outline (default)', () => <SearchBox placeholder="Placeholder" />)
+  .addStory('Appearance: underline', () => <SearchBox appearance="underline" placeholder="Placeholder" />)
+  .addStory('Appearance: filled-darker', () => <SearchBox appearance="filled-darker" placeholder="Placeholder" />)
+  .addStory('Appearance: filled-lighter', () => (
+    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+    <div style={{ background: '#f5f5f5', padding: '10px' }}>
+      <SearchBox appearance="filled-lighter" placeholder="Placeholder" />
+    </div>
+  ))
+  .addStory('Size: small', () => <SearchBox size="small" placeholder="Placeholder" />)
+  .addStory('Size: large', () => <SearchBox size="large" placeholder="Placeholder" />)
+  .addStory('Disabled, appearance: outline', () => <SearchBox disabled value="Disabled" />)
+  .addStory('Disabled, appearance: underline', () => <SearchBox disabled appearance="underline" value="Disabled" />)
+  .addStory('Disabled, appearance: filled-darker', () => (
+    <SearchBox disabled appearance="filled-darker" value="Disabled" />
+  ))
+  .addStory('Disabled, appearance: filled-lighter', () => (
+    // filledLighter requires a background to show up (this is colorNeutralBackground3 in web light theme)
+    <div style={{ background: '#f5f5f5', padding: '10px' }}>
+      <SearchBox disabled appearance="filled-lighter" value="Disabled" />
+    </div>
+  ))
+  .addStory('WIth contentAfter', () => <SearchBox contentAfter={<MicRegular />} placeholder="Placeholder" />, {
+    includeRtl: true,
+  })
+  .addStory('With custom dismiss', () => <SearchBox dismiss={<ArrowEnterLeftRegular />} placeholder="Placeholder" />, {
+    includeRtl: true,
+  });
+
+// Focused & unfocused stories
+storiesOf('SearchBox Converged', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <StoryWright
+      steps={new Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .keys('input', 'Tab')
+        .wait(250) // let focus border animation finish
+        .snapshot('input focused', { cropTo: '.testWrapper' })
+        .focus('[role=button]')
+        .snapshot('dismiss focused', { cropTo: '.testWrapper' })
+        .click('[role=button]')
+        .snapshot('dismiss clicked', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </StoryWright>
+  ))
+  .addStory('Clears value', () => <SearchBox defaultValue="Value!" />);