fix(Toggle): side effect broken e2e test

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

Author: philibea

biome.json

@@ -1,5 +1,6 @@
 {
   "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+   "experimentalScannerIgnores": [".git", "dist", "node_modules"],
   "assist": {
     "actions": {
       "source": {
@@ -9,11 +10,13 @@
         "useSortedProperties": "on"
       }
     },
+
     "includes": [
       "!**/package.json",
       "**/*.ts",
       "**/*.tsx",
       "!**/dist/**",
+      "!**/node_modules/**",
       "!**/build/**",
       "!**/.turbo/**",
       "!**/prebuild.ts",

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'
 

e2e/tests/toggle/render.tsx

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