fix(Toggle): side effect broken e2e test

Signed-off-by: protobuf-ci-cd <[email protected]>

Author: philibea

e2e/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "vite",
     "e2e": "playwright test",
-    "e2e:debug": "playwright test --ui",
+    "e2e:ui": "playwright test --ui",
+    "e2e:debug": "PWDEBUG=1 pnpm playwright test",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"

e2e/playwright.config.ts

@@ -3,6 +3,7 @@
 import { defineConfig, devices } from '@playwright/test'
 
 const isCI = process.env['CI']
+// const isDebug = process.env['PWDEBUG']
 
 const baseURL = 'http://localhost:5173'
 
@@ -38,13 +39,13 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
   ],
 })

e2e/tests/toggle/render.tsx

@@ -0,0 +1,63 @@
+import {
+  Checkbox,
+  Stack,
+  Toggle
+} from '@ultraviolet/ui'
+import {  useForm,  CheckboxField, ToggleField,Submit, Form } from '@ultraviolet/form'
+import { useReducer } from 'react'
+
+const defaultError = ({ label }: { label: string}) => `${label} is default error`
+
+const formError = {
+  min: defaultError,
+  minLength: defaultError,
+  max: defaultError,
+  maxLength: defaultError,
+  required: defaultError,
+  minDate: defaultError,
+  maxDate: defaultError,
+  pattern: defaultError,
+  isInteger: defaultError,
+}
+
+const Render = () => {
+  const [checkbox, toggleCheckbox] = useReducer(r => !r, false)
+  const [toggle, toggleToggle] = useReducer(r => !r, false)
+
+   const methods = useForm({
+    defaultValues: {
+      checkboxForm: false,
+      toggleFieldForm: false,
+    },
+    mode: 'onChange',
+   })
+
+  return (
+    <Stack gap={1} flex={1}>
+
+      <Toggle
+        name="toggle"
+        label="Toggle"
+        checked={toggle}
+        onChange={toggleToggle}
+      />
+
+      <Checkbox
+        name="checkbox"
+        aria-label="Checkbox"
+        checked={checkbox}
+        onChange={toggleCheckbox}
+      />
+
+      <Form name="form" methods={methods} onSubmit={() => {}} errors={formError}>
+        <ToggleField name="toggleFieldForm" label="ToggleField" />
+        <CheckboxField name="checkboxForm" label="CheckboxField" >
+          CheckboxField
+        </CheckboxField>
+        <Submit>Submit</Submit>
+      </Form>
+
+    </Stack>
+  )
+}
+export default Render

e2e/tests/toggle/test.spec.ts

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test'
+
+test('toggled component(s)', async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/toggle`)
+
+  await page.getByLabel('Checkbox', { exact: true, }).check()
+  await page.getByLabel('Toggle', { exact: true, }).check()
+
+  await page.getByLabel('CheckboxField', { exact: true, }).check()
+  await page.getByLabel('ToggleField', { exact: true, }).check()
+  await page.getByRole('button').click()
+})