Add all test code

Author: owjs3901

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

@@ -117,6 +117,31 @@ exports[`Select > should render with overflow screen 1`] = `
 </div>
 `;
 
+exports[`Select > should render with typography prop 1`] = `
+<div>
+  <div
+    class="display-0-inline-block--1 height-0-fit-content--1 box-sizing-0-border-box-1137980104803605758-1 typo-body1 "
+  >
+    <button
+      aria-expanded="false"
+      aria-label="Select toggle"
+      class="border-radius-0-8px--2 outline-0-2px solid-17005923944751620165-1 box-sizing-0-border-box--1 cursor-0-pointer--1 font-weight-0-700--1 outline-offset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-var(--text,#272727)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 background-color-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 border-color-0-var(--border,#E4E4E4)-14172363753176421546-1 outline-color-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 border-color-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 background-color-0-#47474A-878116160589243838-1 border-color-0-transparent-878116160589243838-1 border-color-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outline-color-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 border-radius-0-10px--1 color-0-var(--text,#272727)--1 font-size-0-14px--1 font-size-4-15px--1 letter-spacing-0--.02em--1 letter-spacing-4--.03em--1 padding-right-0-16px--1 padding-left-0-16px--1 padding-bottom-0-10px--1 padding-top-0-10px--1 "
+      type="button"
+    >
+      <div
+        class="max-width-0-100%--255 margin-right-0-auto--255 margin-left-0-auto--255 position-0-relative--255 width-0-fit-content--255"
+      >
+        <div
+          class=" line-height-0-1.2--255 min-height-0-1.2em--255 "
+        >
+          Select
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Select > should render with x and y properties 1`] = `
 <div>
   <div

packages/components/src/components/Select/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -463,4 +463,17 @@ describe('Select', () => {
     expect(onChange).not.toHaveBeenCalled()
     expect(container.querySelector('.test')).toHaveClass('test')
   })
+
+  it('should render with typography prop', () => {
+    const onChange = vi.fn()
+    const { container } = render(
+      <Select onChange={onChange} typography="body1">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption>Option 1</SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    expect(container).toMatchSnapshot()
+  })
 })

packages/components/src/components/Select/__tests__/index.browser.test.tsx

@@ -1,6 +1,12 @@
 'use client'
 
-import { Box, css, DevupThemeTypography, Flex, VStack } from '@devup-ui/react'
+import {
+  Box,
+  css,
+  type DevupThemeTypographyKeys,
+  Flex,
+  VStack,
+} from '@devup-ui/react'
 import clsx from 'clsx'
 import {
   Children,
@@ -38,7 +44,7 @@ interface SelectProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     selectDisabled?: string
     primaryBg?: string
   }
-  typography?: keyof DevupThemeTypography
+  typography?: DevupThemeTypographyKeys
   options?: {
     label?: string
     disabled?: boolean

packages/components/src/components/Select/index.tsx

@@ -11,7 +11,10 @@ export { VStack } from './components/VStack'
 export { useTheme } from './hooks/use-theme'
 export type { DevupProps } from './types/props'
 export type { DevupTheme, DevupThemeColors } from './types/theme'
-export type { DevupThemeTypography } from './types/typography'
+export type {
+  DevupThemeTypography,
+  DevupThemeTypographyKeys,
+} from './types/typography'
 export { css } from './utils/css'
 export { getTheme } from './utils/get-theme'
 export { globalCss } from './utils/global-css'

packages/react/src/index.ts

@@ -1,2 +1,6 @@
+import type { Conditional } from './utils'
+
 /* eslint-disable @typescript-eslint/no-empty-object-type */
 export interface DevupThemeTypography {}
+
+export type DevupThemeTypographyKeys = Conditional<DevupThemeTypography>

packages/react/src/types/typography.ts

@@ -1,6 +1,6 @@
 import { existsSync } from 'node:fs'
 import { mkdir, readFile, writeFile } from 'node:fs/promises'
-import { dirname, join, resolve } from 'node:path'
+import { dirname, join, relative, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 
 import {
@@ -18,6 +18,13 @@ import { DevupUI } from '../plugin'
 vi.mock('@devup-ui/wasm')
 vi.mock('node:fs')
 vi.mock('node:fs/promises')
+vi.mock('node:path', async (original: any) => {
+  const origin = await original()
+  return {
+    ...origin,
+    relative: vi.fn(origin.relative),
+  }
+})
 
 const _filename = fileURLToPath(import.meta.url)
 const _dirname = resolve(dirname(_filename), '..')
@@ -57,6 +64,12 @@ describe('devupUIVitePlugin', () => {
           .config()
           .build.rollupOptions.output.manualChunks('devup-ui.css', 'code'),
       ).toEqual('devup-ui.css')
+
+      expect(
+        (plugin as any)
+          .config()
+          .build.rollupOptions.output.manualChunks('other.css', 'code'),
+      ).toEqual(undefined)
     } else {
       expect((plugin as any).config().build).toBeUndefined()
     }
@@ -278,6 +291,10 @@ describe('devupUIVitePlugin', () => {
       expect(
         (plugin as any).resolveId('devup-ui.css', 'df/devup-ui/devup-ui.css'),
       ).toEqual(expect.any(String))
+
+      expect(
+        (plugin as any).resolveId('other.css', 'df/devup-ui/devup-ui.css'),
+      ).toEqual(undefined)
     }
 
     {
@@ -292,9 +309,84 @@ describe('devupUIVitePlugin', () => {
   it('should resolve id with cssMap', () => {
     vi.mocked(getCss).mockReturnValue('css code')
     const plugin = DevupUI({})
-    ;(plugin as any).load('devup-ui.css')
+    expect((plugin as any).load('devup-ui.css')).toEqual(expect.any(String))
+    expect((plugin as any).load('other.css')).toEqual(undefined)
+
     expect(
       (plugin as any).resolveId('devup-ui.css', 'df/devup-ui/devup-ui.css'),
     ).toEqual(expect.any(String))
   })
+  it('should not write interface code when no theme', async () => {
+    vi.mocked(readFile).mockResolvedValueOnce(JSON.stringify({}))
+    vi.mocked(getThemeInterface).mockReturnValue('')
+    vi.mocked(existsSync).mockReturnValue(true)
+    const plugin = DevupUI({})
+    await (plugin as any).configResolved()
+    expect(writeFile).not.toHaveBeenCalledWith(
+      join('df', 'theme.d.ts'),
+      expect.any(String),
+      'utf-8',
+    )
+  })
+
+  it('sholud add relative path to css file', async () => {
+    vi.mocked(getCss).mockReturnValue('css code')
+    vi.mocked(codeExtract).mockReturnValue({
+      css: 'css code',
+      code: 'code',
+      cssFile: 'devup-ui.css',
+      map: undefined,
+      updatedBaseStyle: false,
+      free: vi.fn(),
+      [Symbol.dispose]: vi.fn(),
+    })
+    const plugin = DevupUI({})
+    vi.mocked(relative).mockReturnValue('./df/devup-ui/devup-ui.css')
+    await (plugin as any).transform('code', 'foo.tsx')
+
+    expect(codeExtract).toHaveBeenCalledWith(
+      'foo.tsx',
+      'code',
+      '@devup-ui/react',
+      './df/devup-ui/devup-ui.css',
+      false,
+      true,
+      false,
+    )
+
+    vi.mocked(relative).mockReturnValue('df/devup-ui/devup-ui.css')
+    await (plugin as any).transform('code', 'foo.tsx')
+    expect(codeExtract).toHaveBeenCalledWith(
+      'foo.tsx',
+      'code',
+      '@devup-ui/react',
+      './df/devup-ui/devup-ui.css',
+      false,
+      true,
+      false,
+    )
+  })
+
+  it('should not create css file when cssFile is empty', async () => {
+    vi.mocked(getCss).mockReturnValue('css code')
+    vi.mocked(codeExtract).mockReturnValue({
+      css: 'css code',
+      code: 'code',
+      cssFile: '',
+      map: undefined,
+      updatedBaseStyle: false,
+      free: vi.fn(),
+      [Symbol.dispose]: vi.fn(),
+    })
+    const plugin = DevupUI({})
+    await (plugin as any).transform('code', 'foo.tsx')
+    expect(writeFile).not.toHaveBeenCalled()
+  })
+
+  it('should not generate bundle when css file is not found', async () => {
+    const plugin = DevupUI({})
+    const bundle = {} as any
+    await (plugin as any).generateBundle({}, bundle)
+    expect(bundle).toEqual({})
+  })
 })

packages/vite-plugin/src/__tests__/plugin.test.ts

@@ -134,8 +134,7 @@ export function DevupUI({
       return true
     },
     async watchChange(id) {
-      if (resolve(id) !== resolve(devupFile)) return
-      if (existsSync(devupFile)) {
+      if (resolve(id) === resolve(devupFile) && existsSync(devupFile)) {
         try {
           await writeDataFiles({
             package: libPackage,