Setup components tests

Author: forestream

libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new

@@ -0,0 +1,9 @@
+---
+source: libs/extractor/src/lib.rs
+assertion_line: 2140
+expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"'use client'\n\nimport type { Conditional } from 'src/types/utils'\n\nimport { DevupTheme } from '../types/theme'\n\n/**\n * Initialize the theme, if you can't use the `ThemeScript` component\n * e.g. in vite\n * @param auto - Whether to use the system theme\n * @param theme - The theme to use\n */\nexport function initTheme(\n  auto?: boolean,\n  theme?: Conditional<DevupTheme>,\n): void {\n  if (theme) {\n    document.documentElement.setAttribute('data-theme', theme)\n  } else {\n    console.log(\n      'hello',\n      typeof process.env.DEVUP_UI_DEFAULT_THEME,\n      process.env.DEVUP_UI_DEFAULT_THEME,\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n    document.documentElement.setAttribute(\n      'data-theme',\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n  }\n}\n\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {},
+    code: "'use client'\n\nimport type { Conditional } from 'src/types/utils'\n\nimport { DevupTheme } from '../types/theme'\n\n/**\n * Initialize the theme, if you can't use the `ThemeScript` component\n * e.g. in vite\n * @param auto - Whether to use the system theme\n * @param theme - The theme to use\n */\nexport function initTheme(\n  auto?: boolean,\n  theme?: Conditional<DevupTheme>,\n): void {\n  if (theme) {\n    document.documentElement.setAttribute('data-theme', theme)\n  } else {\n    console.log(\n      'hello',\n      typeof process.env.DEVUP_UI_DEFAULT_THEME,\n      process.env.DEVUP_UI_DEFAULT_THEME,\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n    document.documentElement.setAttribute(\n      'data-theme',\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n  }\n}\n",
+}

package.json

@@ -19,7 +19,8 @@
     "@changesets/cli": "^2.29.5",
     "@types/node": "^24.0.7",
     "happy-dom": "^18.0.1",
-    "@testing-library/react": "^16.3.0"
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.6.3"
   },
   "author": "devfive",
   "packageManager": "[email protected]",

packages/components/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

packages/components/src/__tests__/index.test.ts

@@ -0,0 +1,8 @@
+describe('export', () => {
+  it('should export components', async () => {
+    const index = await import('../index')
+    expect({ ...index }).toEqual({
+      Button: expect.any(Function),
+    })
+  })
+})

packages/components/src/components/Button/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,43 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Button > should disable 1`] = `
+<div>
+  <button
+    aria-disabled="true"
+    aria-label="button"
+    class="d16 d17 d18 d19 d20 d21 d1 d2 d3 d22 d23 typo-buttonxs d24 d25 d26 d27 d28 d7 d8 d9 d10 d69 d70 d71 d72 d73 d74 d75 d76 d77 d78 d79 d80 d81 d82 d83 d84 d85 d86  "
+    disabled=""
+    type="button"
+  >
+    <div
+      class="d65 d66 d67 d68"
+    >
+      <div
+        class=" d62 d63 "
+      >
+        Click me
+      </div>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`Button > should render 1`] = `
+<div>
+  <button
+    aria-label="button"
+    class="d16 d17 d18 d19 d20 d21 d1 d2 d3 d22 d23 typo-buttonxs d24 d25 d26 d27 d28 d7 d8 d9 d10 d69 d70 d71 d72 d73 d74 d75 d76 d77 d78 d79 d80 d81 d82 d83 d84 d85 d86  "
+    type="button"
+  >
+    <div
+      class="d65 d66 d67 d68"
+    >
+      <div
+        class=" d62 d63 "
+      >
+        Click me
+      </div>
+    </div>
+  </button>
+</div>
+`;

packages/components/src/components/Button/__tests__/index.test.tsx

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react'
+import { expect } from 'vitest'
+
+import { Button } from '../index'
+
+describe('Button', () => {
+  it('should render', () => {
+    const { container } = render(<Button>Click me</Button>)
+    expect(container).toMatchSnapshot()
+  })
+
+  it('should disable', () => {
+    const { container } = render(<Button disabled>Click me</Button>)
+    expect(container).toMatchSnapshot()
+    expect(container.querySelector('button')).toHaveAttribute('disabled')
+  })
+})

packages/components/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "types": ["vite/client", "vitest/importMeta", "vitest/globals"],
+    "types": ["vite/client", "vitest/importMeta", "vitest/globals", "@testing-library/jest-dom"],
     "strict": true,
     "target": "ESNext",
     "declaration": true,
@@ -23,5 +23,5 @@
     "baseUrl": ".",
     "jsx": "react-jsx"
   },
-  "include": ["src/**/*", ".storybook/**/*"]
+  "include": ["src/**/*", ".storybook/**/*", "./setupTests.ts"]
 }

packages/components/vitest.config.ts

@@ -0,0 +1,11 @@
+import { DevupUI } from '@devup-ui/vite-plugin'
+import { defineProject } from 'vitest/config'
+
+export default defineProject({
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./setupTests.ts'],
+  },
+  plugins: [DevupUI()],
+})

packages/vite-plugin/src/plugin.ts

@@ -73,16 +73,18 @@ export function DevupUI({
   return {
     name: 'devup-ui',
     config() {
+      const theme = getDefaultTheme()
+      const define: Record<string, string> = {}
+      if (theme) {
+        define['process.env.DEVUP_UI_DEFAULT_THEME'] = JSON.stringify(theme)
+      }
       const ret: Omit<UserConfig, 'plugins'> = {
         server: {
           watch: {
             ignored: [`!${devupPath}`],
           },
         },
-        define: {
-          'process.env.DEVUP_UI_DEFAULT_THEME':
-            JSON.stringify(getDefaultTheme()),
-        },
+        define,
         optimizeDeps: {
           exclude: include,
         },