test fixes

ensdomains · Nov 25, 2024 · 91c6399 · 91c6399
1 parent 49cec7a
commit 91c6399
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 51 deletions.
diff --git a/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx b/components/src/components/atoms/BackdropSurface/BackdropSurface.tsx
@@ -26,6 +26,7 @@ export const BackdropSurface = React.forwardRef<HTMLElement, BackdropSurfaceProp
       transitionTimingFunction="popIn"
       width="viewWidth"
       zIndex={9999}
+      data-testid="backdrop-surface"
     />
   ),
 )

diff --git a/components/src/components/atoms/RecordItem/RecordItem.test.tsx b/components/src/components/atoms/RecordItem/RecordItem.test.tsx
@@ -19,7 +19,7 @@ describe('<RecordItem />', () => {
   it('renders', () => {
     render(
       <RecordItem
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         value="Real value"
@@ -36,7 +36,7 @@ describe('<RecordItem />', () => {
   it('should copy value to clipboard if clicked', () => {
     render(
       <RecordItem
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         value="Real value"
@@ -54,7 +54,7 @@ describe('<RecordItem />', () => {
       <RecordItem
         as="a"
         data-testid="record-item"
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         value="Real value"
@@ -70,7 +70,7 @@ describe('<RecordItem />', () => {
       <RecordItem
         as="a"
         data-testid="record-item"
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         link="https://ens.domains"
@@ -90,7 +90,7 @@ describe('<RecordItem />', () => {
       <RecordItem
         as="a"
         data-testid="record-item"
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         target="_parent"
@@ -110,7 +110,7 @@ describe('<RecordItem />', () => {
       <RecordItem
         as="button"
         data-testid="record-item"
-        icon={<FlameSVG />}
+        icon={FlameSVG}
         keyLabel="Title"
         keySublabel="Subtitle"
         value="Real value"

diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx
@@ -21,7 +21,7 @@ type BaseProps = {
   value: string
   size?: Size
   inline?: boolean
-  icon?: ReactNode
+  icon?: React.ComponentProps<typeof Box>['as']
   keyLabel?: string | ReactNode
   keySublabel?: string | ReactNode
   children: string
@@ -243,7 +243,7 @@ export const RecordItem = React.forwardRef<
       <ContainerBox $inline={inline} as={asProp} {...generatedProps}>
         {hasPrefix && (
           <PrefixBox $inline={inline} $size={size}>
-            {icon && <PrefixSVGBox as={icon as React.ReactElement} />}
+            {icon && <PrefixSVGBox as={icon} />}
             {hasLabels && (
               <PrefixLabelsContainerBox $inline={inline}>
                 {KeyLabel}

diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -39,6 +39,8 @@ export const Backdrop: React.FC<BackdropProps> = ({
     mountOnEnter: true,
     unmountOnExit: true,
   })
+
+  console.log('state', state)
   const boxRef = React.useRef<HTMLDivElement | null>(null)
   const Background = surface || BackdropSurface
 

diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -8,7 +8,7 @@ import { Button } from '@/src/components/atoms/Button/Button'
 import type { Colors } from '@/src/tokens'
 import { breakpoints } from '@/src/tokens'
 
-import { commonVars, modeVars } from '@/src/css/theme.css'
+import { modeVars } from '@/src/css/theme.css'
 
 import type { Color } from '@/src/interfaces/withColor'
 

diff --git a/components/src/components/molecules/Modal/Modal.test.tsx b/components/src/components/molecules/Modal/Modal.test.tsx
@@ -1,16 +1,22 @@
 import * as React from 'react'
 
-import { cleanup, render, screen, waitFor } from '@/test'
+import { cleanup, render, screen, waitFor, act } from '@/test'
+import { vi } from 'vitest'
 
 import { Modal } from './Modal'
 
 window.scroll = vi.fn()
 
 describe('<Modal />', () => {
-  afterEach(cleanup)
+  beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }))
+  afterEach(() => {
+    vi.useRealTimers()
+    cleanup()
+  })
 
   it('renders', async () => {
     render(<Modal open>Modal</Modal>)
+    await act(() => vi.advanceTimersByTime(1000))
     await waitFor(() => expect(screen.getByText('Modal')).toBeVisible(), {
       timeout: 300,
     })

diff --git a/components/src/components/molecules/Select/Select.test.tsx b/components/src/components/molecules/Select/Select.test.tsx
@@ -133,21 +133,13 @@ describe('<Select />', () => {
         />
       </div>,
     )
-
-    const getDisplayValue = () =>
-      getPropertyValue(screen.getByRole('listbox'), 'display')
-    expect(getDisplayValue()).toEqual('none')
+    expect(screen.queryByRole('listbox')).toBeNull()
 
     await userEvent.click(screen.getByTestId('select-container'))
+    expect(screen.queryByRole('listbox')).not.toBeNull()
 
-    await waitFor(() => {
-      expect(getDisplayValue()).toEqual('block')
-    })
     await userEvent.click(screen.getByText('outside'))
-
-    await waitFor(() => {
-      expect(getDisplayValue()).toEqual('none')
-    })
+    expect(screen.queryByRole('listbox')).toBeNull()
   })
 
   /** Autocomplete */

diff --git a/components/src/components/molecules/Select/Select.tsx b/components/src/components/molecules/Select/Select.tsx
@@ -700,6 +700,8 @@ export const Select = React.forwardRef<HTMLInputElement, SelectProps>(
       preEnter: true,
     })
 
+    console.log('state', state)
+
     useEffect(() => {
       toggle(isOpen)
     }, [isOpen])

diff --git a/components/src/components/organisms/Dialog/Dialog.test.tsx b/components/src/components/organisms/Dialog/Dialog.test.tsx
@@ -1,21 +1,27 @@
 import * as React from 'react'
 
-import { cleanup, render, screen, userEvent, waitFor } from '@/test'
+import { cleanup, render, screen, userEvent, waitFor, act } from '@/test'
+import { vi } from 'vitest'
 
 import { Dialog } from './Dialog'
 
 window.scroll = vi.fn()
 
 describe('<Modal />', () => {
-  afterEach(cleanup)
+  beforeEach(() => vi.useFakeTimers({ shouldAdvanceTime: true }))
+
+  afterEach(() => {
+    vi.useRealTimers()
+    cleanup()
+  })
 
   it('renders', async () => {
     render(
       <Dialog open variant="blank">
         Modal
       </Dialog>,
     )
-
+    await act(() => vi.advanceTimersByTime(1000))
     await waitFor(() => expect(screen.getByText('Modal')).toBeVisible(), {
       timeout: 300,
     })

diff --git a/components/src/components/organisms/Toast/Toast.test.tsx b/components/src/components/organisms/Toast/Toast.test.tsx
@@ -1,19 +1,27 @@
 import * as React from 'react'
 
-import { cleanup, render, screen, userEvent, waitFor } from '@/test'
+import { act, cleanup, render, screen, userEvent, waitFor } from '@/test'
+import { vi } from 'vitest'
 
 import { Toast } from './Toast'
 
 window.scroll = vi.fn()
 
 describe('<Toast />', () => {
-  afterEach(cleanup)
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true })
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+    cleanup()
+  })
 
   it('renders', async () => {
     render(<Toast open title="Test" variant="desktop" onClose={() => void 0} />)
-    await waitFor(() => expect(screen.getByText('Test')).toBeVisible(), {
-      timeout: 300,
-    })
+    expect(screen.getByText('Test')).not.toBeVisible()
+    await act(() => vi.advanceTimersByTime(1000))
+    expect(screen.getByText('Test')).toBeVisible()
   })
 
   it('should not be visible if not open', async () => {
@@ -25,30 +33,25 @@ describe('<Toast />', () => {
         onClose={() => void 0}
       />,
     )
-    await waitFor(() => expect(screen.queryByText('Test')).toBeNull(), {
-      timeout: 500,
-    })
+    expect(screen.queryByText('Test')).toBeNull()
+    act(() => vi.advanceTimersByTime(1000))
+    expect(screen.queryByText('Test')).toBeNull()
   })
 
-  it('should display not close icon if type is touch', async () => {
+  it('should display close icon if type is touch', async () => {
     render(<Toast open title="Test" variant="desktop" onClose={() => void 0} />)
-    await waitFor(
-      () => expect(screen.getByTestId('toast-close-icon')).toBeVisible(),
-      {
-        timeout: 300,
-      },
-    )
+    act(() => vi.advanceTimersByTime(1000))
+    expect(screen.getByTestId('toast-close-icon')).toBeVisible()
   })
 
   it('should call callback if close icon is clicked', async () => {
     const mockCallback = vi.fn()
     render(<Toast open title="Test" variant="desktop" onClose={mockCallback} />)
-    await waitFor(() => userEvent.click(screen.getByTestId('toast-close-icon')), {
-      timeout: 300,
-    })
-
+    await act(() => vi.advanceTimersByTime(1000))
+    await userEvent.click(screen.getByTestId('toast-close-icon'))
     expect(mockCallback).toHaveBeenCalled()
   })
+
   it('should show children if desktop variant', async () => {
     render(
       <Toast open title="Test" variant="desktop" onClose={() => void 0}>

diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx
@@ -7,7 +7,9 @@ import { translateY } from '@/src/css/utils/common'
 
 import { Typography } from '../../atoms'
 import { Backdrop } from '../../molecules'
-import { CrossSVG } from '@/src/icons'
+import { CrossSVG } from '../../../index'
+import { commonVars } from '@/src/css/theme.css'
+
 import { getTestId } from '../../../utils/utils'
 import type { BoxProps } from '../../atoms/Box/Box'
 import { Box } from '../../atoms/Box/Box'
@@ -25,6 +27,7 @@ const CloseIcon = (props: BoxProps) => (
     position="absolute"
     right="2.5"
     top="2.5"
+    color={{ base: 'textAccent' }}
     transitionDuration={150}
     transitionProperty="all"
     transitionTimingFunction="inOut"
@@ -55,16 +58,16 @@ const Container = React.forwardRef<HTMLElement, BoxProps & ContainerProps>(
         ...assignInlineVars({
           [styles.containerLeft]: match($mobile)
             .with(true, () => ($popped ? '2.5%' : '3.75%'))
-            .otherwise(() => ($left ? `$${$left}` : 'unset')),
+            .otherwise(() => ($left ? commonVars.space[$left] : 'unset')),
           [styles.containerRight]: match($mobile)
             .with(true, () => 'unset')
-            .otherwise(() => ($right ? `$${$right}` : 'unset')),
+            .otherwise(() => ($right ? commonVars.space[$right] : 'unset')),
           [styles.containerTop]: match($mobile)
             .with(true, () => 'calc(100vh / 100 * 2.5)')
-            .otherwise(() => ($top ? `$${$top}` : 'unset')),
+            .otherwise(() => ($top ? commonVars.space[$top] : 'unset')),
           [styles.containerBottom]: match($mobile)
             .with(true, () => 'unset' as const)
-            .otherwise(() => ($bottom ? $bottom : 'unset')),
+            .otherwise(() => ($bottom ? commonVars.space[$bottom] : 'unset')),
           [styles.containerWidth]: $popped ? '95%' : '92.5%',
           [styles.containerTransform]: $state.status === 'entered' ? translateY(0) : translateY(-64),
         }),
@@ -327,11 +330,16 @@ export const Toast: React.FC<ToastProps> = ({
   const currentTimeout = React.useRef<number | undefined>()
 
   React.useEffect(() => {
+    console.log('open', open)
     const originalPopped = popped
     if (open && window) {
+      console.log('setting timeout')
       if (originalPopped) setPopped(false)
       currentTimeout.current = window.setTimeout(
-        () => onClose(),
+        () => {
+          console.log('closing')
+          onClose()
+        },
         msToShow || 8000,
       )
       return () => {

diff --git a/components/vite.config.ts b/components/vite.config.ts
@@ -39,7 +39,7 @@ export default defineConfig(({ mode }) => {
     plugins: [
       tsconfigPaths({ projects: ['tsconfig.json'] }),
       vanillaExtractPlugin({
-        identifiers: mode === 'development' ? ({ hash }) => `thorin-${hash}` : 'short',
+        identifiers: mode === 'development' || mode === 'test' ? ({ hash }) => `thorin-${hash}` : 'short',
       }),
       dtsPlugin({ entryRoot: path.resolve(__dirname),
         exclude: [
@@ -56,6 +56,7 @@ export default defineConfig(({ mode }) => {
       }),
     ],
     test: {
+      css: true,
       environment: 'jsdom',
       globals: true,
       coverage: {