@digigov/ui 1.2.0-dcbd7ded → 2.0.0-0edebf87

package/src/form/AutoComplete/interaction.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Multiple } from '@digigov/ui/form/AutoComplete/__stories__/Multiple';
+
+test('renders the Multiple show chip', async ({ mount, page }) => {
+  await mount(
+    <Multiple />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
+ await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>ul:nth-child(4)>div>li:nth-child(3)").click();
+ await page.locator("#root>div>div>fieldset>div>div:nth-child(2)>button").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/AutoComplete/utils.ts

@@ -4,6 +4,7 @@ export const keyCodes = {
   32: 'space',
   38: 'up',
   40: 'down',
+  8: 'backspace',
 };
 export function isIosDevice(): boolean | undefined {
   return (
@@ -293,8 +294,8 @@ export function suggest(
   syncResults(
     query
       ? results.filter(function (result) {
-        return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-      })
+          return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        })
       : results
   );
 }

package/src/form/Button/Button.stories.playwright.json

@@ -98,12 +98,6 @@
               "args": {
                 "selector": "html>body>div:nth-child(5)>button"
               }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html"
-              }
             }
           ],
           "id": "wPoD1odPNvOc",
@@ -112,4 +106,4 @@
       ]
     }
   }
-}
+}

package/src/form/Button/index.mdx

@@ -8,10 +8,6 @@ title: Button
 Use the button component to help users carry out an action like starting an
 application or saving their information.
 
-```bash
-import Button from '@digigov/ui/form/Button';
-```
-
 ## How to use
 
 ### Default buttons
@@ -110,4 +106,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Button" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 

package/src/form/Button/index.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Back } from '@digigov/ui/form/Button/__stories__/Back';
+import { ButtonLinkButton } from '@digigov/ui/form/Button/__stories__/ButtonLinkButton';
+import { CallToActionButton } from '@digigov/ui/form/Button/__stories__/CallToActionButton';
+import { Dense } from '@digigov/ui/form/Button/__stories__/Dense';
+import { Disabled } from '@digigov/ui/form/Button/__stories__/Disabled';
+import { GroupingButtons } from '@digigov/ui/form/Button/__stories__/GroupingButtons';
+import { GroupingButtonsAndLinks } from '@digigov/ui/form/Button/__stories__/GroupingButtonsAndLinks';
+import { Primary } from '@digigov/ui/form/Button/__stories__/Primary';
+import { Secondary } from '@digigov/ui/form/Button/__stories__/Secondary';
+import { ThemeToggle } from '@digigov/ui/form/Button/__stories__/ThemeToggle';
+import { Warning } from '@digigov/ui/form/Button/__stories__/Warning';
+import { WithVariantLink } from '@digigov/ui/form/Button/__stories__/WithVariantLink';
+
+test('renders the All Button variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Back">
+      <Back />
+    </TestVariant>
+    <TestVariant title="ButtonLinkButton">
+      <ButtonLinkButton />
+    </TestVariant>
+    <TestVariant title="CallToActionButton">
+      <CallToActionButton />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="Disabled">
+      <Disabled />
+    </TestVariant>
+    <TestVariant title="GroupingButtons">
+      <GroupingButtons />
+    </TestVariant>
+    <TestVariant title="GroupingButtonsAndLinks">
+      <GroupingButtonsAndLinks />
+    </TestVariant>
+    <TestVariant title="Primary">
+      <Primary />
+    </TestVariant>
+    <TestVariant title="Secondary">
+      <Secondary />
+    </TestVariant>
+    <TestVariant title="ThemeToggle">
+      <ThemeToggle />
+    </TestVariant>
+    <TestVariant title="Warning">
+      <Warning />
+    </TestVariant>
+    <TestVariant title="WithVariantLink">
+      <WithVariantLink />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/Button/interaction.test.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Primary } from '@digigov/ui/form/Button/__stories__/Primary';
+import { Secondary } from '@digigov/ui/form/Button/__stories__/Secondary';
+import { ThemeToggle } from '@digigov/ui/form/Button/__stories__/ThemeToggle';
+import { Warning } from '@digigov/ui/form/Button/__stories__/Warning';
+
+test('renders the Primary Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Primary />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>button").hover();
+ await page.locator("#root>button").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Secondary Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Secondary />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>button").hover();
+ await page.locator("#root>button").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the ThemeToggle change theme', async ({ mount, page }) => {
+  await mount(
+    <ThemeToggle />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Warning Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Warning />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>button").hover();
+ await page.locator("#root>button").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/Checkbox/index.mdx

@@ -5,10 +5,6 @@ title: Checkbox
 
 # Checkbox
 
-```bash
-import Checkbox from '@digigov/ui/form/Checkbox';
-```
-
 ## How to use
 
 <Story
@@ -82,4 +78,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https:/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Checkbox" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Checkbox","CheckboxItem"]} /> 

package/src/form/Checkbox/index.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { ConditionalReveal } from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+import { Default } from '@digigov/ui/form/Checkbox/__stories__/Default';
+import { Dense } from '@digigov/ui/form/Checkbox/__stories__/Dense';
+import { Inline } from '@digigov/ui/form/Checkbox/__stories__/Inline';
+import { InlineWithDivider } from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
+import { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
+import { NoneAnswer } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
+import { NoneAnswerWithError } from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
+import { WithErrorMessage } from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
+import { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
+
+test('renders the All Checkbox variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="ConditionalReveal">
+      <ConditionalReveal />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="Inline">
+      <Inline />
+    </TestVariant>
+    <TestVariant title="InlineWithDivider">
+      <InlineWithDivider />
+    </TestVariant>
+    <TestVariant title="MultipleQuestions">
+      <MultipleQuestions />
+    </TestVariant>
+    <TestVariant title="NoneAnswer">
+      <NoneAnswer />
+    </TestVariant>
+    <TestVariant title="NoneAnswerWithError">
+      <NoneAnswerWithError />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/Checkbox/interaction.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { MultipleQuestions } from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
+import { WithHint } from '@digigov/ui/form/Checkbox/__stories__/WithHint';
+
+test('renders the MultipleQuestions check first box', async ({ mount, page }) => {
+  await mount(
+    <MultipleQuestions />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the WithHint click first option', async ({ mount, page }) => {
+  await mount(
+    <WithHint />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
+ await page.locator("#root>div>fieldset>div>div:nth-child(2)>label>input").click();
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Space");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/DateInputContainer/index.mdx

@@ -5,10 +5,6 @@ title: DateInputContainer
 
 # DateInputContainer
 
-```bash
-import DateInputContainer from '@digigov/ui/form/DateInputContainer';
-```
-
 ## How to use
 
 <Story
@@ -45,4 +41,6 @@ If you’re highlighting just one field - either the day, month or year - only s
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="DateInputContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["DateInputContainer","DateInputItem"]} /> 

package/src/form/DateInputContainer/index.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
+import { Dense } from '@digigov/ui/form/DateInputContainer/__stories__/Dense';
+import { MultipleQuestions } from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
+import { WithErrorMessage } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
+import { WithErrorMessageForSingleField } from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+
+test('renders the All DateInputContainer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="MultipleQuestions">
+      <MultipleQuestions />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+    <TestVariant title="WithErrorMessageForSingleField">
+      <WithErrorMessageForSingleField />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/DateInputContainer/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/form/DateInputContainer/__stories__/Default';
+
+test('renders the Default Actions with mouse', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
+ await page.keyboard.insertText("undefined");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/ErrorMessage/index.mdx

@@ -8,10 +8,6 @@ title: ErrorMessage
 Follow the validation pattern and show an error message when there is a validation error.
 In the error message explain what went wrong and how to fix it.
 
-```bash
-import ErrorMessage from '@digigov/ui/form/ErrorMessage';
-```
-
 ## How to use
 
 <Story
@@ -22,4 +18,6 @@ import ErrorMessage from '@digigov/ui/form/ErrorMessage';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorMessage" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorMessage"]} /> 

package/src/form/ErrorMessage/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { DateInputError } from '@digigov/ui/form/ErrorMessage/__stories__/DateInputError';
+import { Default } from '@digigov/ui/form/ErrorMessage/__stories__/Default';
+import { ErrorMessageOnly } from '@digigov/ui/form/ErrorMessage/__stories__/ErrorMessageOnly';
+
+test('renders the All ErrorMessage variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="DateInputError">
+      <DateInputError />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="ErrorMessageOnly">
+      <ErrorMessageOnly />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/FileUpload/index.mdx

@@ -5,10 +5,6 @@ title: FileUpload
 
 # FileUpload
 
-```bash
-import FileUpload from '@digigov/ui/form/FileUpload';
-```
-
 ## How to use
 
 <Story
@@ -29,4 +25,6 @@ Error messages should be styled like this:
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="FileUpload" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["FileUpload", "FileUploadContainer"]} /> 

package/src/form/FileUpload/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/FileUpload/__stories__/Default';
+import { WithErrorMessage } from '@digigov/ui/form/FileUpload/__stories__/WithErrorMessage';
+
+test('renders the All FileUpload variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/RadioContainer/index.mdx

@@ -5,10 +5,6 @@ title: RadioContainer
 
 # RadioContainer
 
-```bash
-import RadioContainer from '@digigov/ui/form/RadioContainer';
-```
-
 ## How to use
 
 <Story
@@ -83,14 +79,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://ww
 
 ## API
 
-### RadioContainer
-
-<PropTypes packageName="@digigov/ui" component="RadioContainer" />
-
-### RadioConditional
-
-<PropTypes packageName="@digigov/ui" component="RadioConditional" />
-
-### RadioItem
+See below for a complete reference to all of the props  available to the components mentioned here.
 
-<PropTypes packageName="@digigov/ui" component="RadioItem" />
+<ComponentProps componentName={["RadioItem","RadioContainer","RadioConditional","ChoiceDividerText"]} /> 

package/src/form/RadioContainer/index.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { ConditionalReveal } from '@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal';
+import { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
+import { Dense } from '@digigov/ui/form/RadioContainer/__stories__/Dense';
+import { Inline } from '@digigov/ui/form/RadioContainer/__stories__/Inline';
+import { InlineWithDivider } from '@digigov/ui/form/RadioContainer/__stories__/InlineWithDivider';
+import { MultipleQuestions } from '@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions';
+import { NoneAnswer } from '@digigov/ui/form/RadioContainer/__stories__/NoneAnswer';
+import { WithErrorMessage } from '@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage';
+import { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
+import { WithMediumLegend } from '@digigov/ui/form/RadioContainer/__stories__/WithMediumLegend';
+
+test('renders the All RadioContainer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="ConditionalReveal">
+      <ConditionalReveal />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="Inline">
+      <Inline />
+    </TestVariant>
+    <TestVariant title="InlineWithDivider">
+      <InlineWithDivider />
+    </TestVariant>
+    <TestVariant title="MultipleQuestions">
+      <MultipleQuestions />
+    </TestVariant>
+    <TestVariant title="NoneAnswer">
+      <NoneAnswer />
+    </TestVariant>
+    <TestVariant title="WithErrorMessage">
+      <WithErrorMessage />
+    </TestVariant>
+    <TestVariant title="WithHints">
+      <WithHints />
+    </TestVariant>
+    <TestVariant title="WithMediumLegend">
+      <WithMediumLegend />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/RadioContainer/interaction.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
+import { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
+
+test('renders the Default Navigate with keyboard', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Space");
+ await page.keyboard.press("ArrowDown");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the WithHints Click first', async ({ mount, page }) => {
+  await mount(
+    <WithHints />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/SelectContainer/index.mdx

@@ -45,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SelectContainer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SelectContainer","SelectOption"]} /> 

package/src/form/SelectContainer/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
+import { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';
+import { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
+import { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+
+test('renders the All SelectContainer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="DisabledInput">
+      <DisabledInput />
+    </TestVariant>
+    <TestVariant title="WithHint">
+      <WithHint />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/form/SelectContainer/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
+
+test('renders the Default SelectContainer with mouse', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>label>select").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+