test: rewrite unit test and increase test coverage

Author: akinoccc

package.json

@@ -19,13 +19,13 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@testing-library/vue": "^8.1.0",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/test-utils": "^2.4.5",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

packages/core/__tests__/css.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { css, styled } from '../index'
+import { render, cleanup } from '@testing-library/vue'
+import { getStyle } from './utils'
+
+describe('css', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should get a template string array with css', async () => {
+    const h = 10
+
+    const result = css`
+      width: 100px;
+      height: ${h}px;
+    `.join('')
+
+    expect(result).toContain('width: 100px;')
+    expect(result).toContain(`height: ${h}px;`)
+  })
+
+  it('should apply css', () => {
+    const mixin = css`
+      width: 100px;
+      height: 100px;
+      ${css`
+        border-radius: 10px;
+      `}
+      ${css`
+        box-sizing: border-box;
+      `}
+    `
+    const StyledComponent = styled.div`
+      ${mixin}
+    `
+    const instance = render(StyledComponent)
+    const style = getStyle(instance.container.firstElementChild)
+    expect(style?.width).eq('100px')
+    expect(style?.height).eq('100px')
+    expect(style?.borderRadius).eq('10px')
+    expect(style?.boxSizing).eq('border-box')
+  })
+})

packages/core/__tests__/cssClass.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { cssClass, styled } from '../index'
+import { render, cleanup } from '@testing-library/vue'
+import { getStyle } from './utils'
+
+describe('css class', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('should get a class name and inject style', async () => {
+    const h = 10
+
+    const result = cssClass`
+      width: 100px;
+      height: ${h}px;
+    `
+
+    expect(result.startsWith('styled-')).toBeTruthy()
+
+    const Component = styled.div.attrs({
+      'data-testid': 'test',
+      class: result,
+    })``
+
+    const instance = render(Component)
+    const style = getStyle(instance.getByTestId('test'))
+
+    expect(style?.width).eq('100px')
+    expect(style?.height).eq('10px')
+  })
+})

packages/core/__tests__/export.ts packages/core/__tests__/export.test.tspackages/core/__tests__/export.ts renamed to packages/core/__tests__/export.test.ts

@@ -1,8 +1,14 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, it, expect, afterEach } from 'vitest'
 import { keyframes, styled } from '../index'
+import { render, cleanup } from '@testing-library/vue'
+import { getStyle } from './utils'
 
 describe('keyframes', () => {
+  afterEach(() => {
+    // Reset env
+    cleanup()
+  })
+
   it('should have keyframes', async () => {
     const kf = keyframes`
       from {
@@ -19,23 +25,19 @@ describe('keyframes', () => {
     const StyledComponent = styled.div`
       width: 40px;
       height: 40px;
-      background: ${(props: any) => props.theme.error};
       animation-duration: 3s;
       animation-name: ${kf};
       animation-iteration-count: infinite;
     `
 
-    mount(StyledComponent)
-    // Make sure the keyframes are defined
-    const cssRules = document.styleSheets[0].cssRules
-    const keyframesRule = Array.from(cssRules as unknown as CSSKeyframesRule[]).find((rule) => rule?.name === kf)
-
-    expect(keyframesRule).not.toBeUndefined()
-    expect(keyframesRule?.name).toBe(kf)
+    const instance = render(StyledComponent)
+    const element = instance.container.firstElementChild
 
     // Make sure the animation is applied correctly
-    const styleRule = Array.from(cssRules as unknown as CSSStyleRule[]).find((rule) => rule instanceof CSSStyleRule)
-    expect(styleRule).not.toBeUndefined()
-    expect(styleRule!.style['animation-name' as any]).toBe(kf)
+    const style = getStyle(element)
+    expect(style).toBeDefined()
+    expect(style?.animationName).toBe(kf)
+    expect(style?.animationDuration).toBe('3s')
+    expect(style?.animationIterationCount).toBe('infinite')
   })
 })

packages/core/__tests__/keyframes.test.ts

@@ -1,106 +1,121 @@
-import { createGlobalStyle, styled } from '../index'
+import { createGlobalStyle, isStyledComponent, styled } from '../index'
 import { afterEach, describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { render, cleanup } from '@testing-library/vue'
+import { getStyle } from './utils'
 import { ref } from 'vue'
 
 describe('styled', () => {
   afterEach(() => {
     // Reset env
-    const styleTags = document.querySelectorAll('style')
-    styleTags.forEach((styleTag) => {
-      styleTag.innerHTML = ''
-    })
+    cleanup()
   })
 
   it('should create a styled component', async () => {
     const MyComponent = {
       template: '<div>Hello World</div>',
     }
 
-    const StyledComponent = styled(MyComponent)`
-      color: blue;
+    const StyledComponent = styled(MyComponent).attrs({ 'data-testid': 'test' })`
+      color: rgb(0, 0, 255);
     `
-    expect(StyledComponent).toBeDefined()
-    expect(StyledComponent.name).toMatch(/^styled-/)
 
-    const wrapper = mount(StyledComponent)
-    const className = wrapper.find('div').element.className
+    // Is styled component
+    expect(isStyledComponent(StyledComponent)).toBeTruthy()
+
+    const instance = render(StyledComponent)
+    const element = instance.getByTestId('test')
+
+    // Is element exist
+    expect(element).toBeDefined()
+
+    // Is applied style correctly
+    const style = getStyle(element)
+    expect(style).toBeDefined()
+    expect(style?.color).eq('rgb(0, 0, 255)')
 
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).selectorText).toBe(`.${className}`)
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.color).toBe('blue')
-    expect(wrapper.text()).toBe('Hello World')
+    // Is element text content correct
+    expect(element.textContent).eq('Hello World')
   })
 
   it('should throw error if the element is invalid', () => {
-    // 模拟一个无效的元素类型
+    // Mock a invalid element
     const invalidElement = 'invalid-element'
 
-    // 断言当传入无效的元素类型时，应该抛出错误
+    // should throw error
     expect(() => {
       styled(invalidElement)
     }).toThrowError('The element is invalid.')
   })
 
   it('should style styled component', async () => {
     const StyledComponent = styled.div`
+      width: 80px;
       height: 36px;
     `
 
-    const StyledComponent2 = styled(StyledComponent).attrs({ style: 'color: blue' })`
+    const StyledComponent2 = styled(StyledComponent).attrs({ 'data-testid': 'test' })`
+      color: rgb(0, 0, 255);
       height: 44px;
     `
 
-    const wrapper = mount(StyledComponent2, { slots: { default: () => 'Hello World' } })
-    const className = wrapper.find('div').element.className
-    expect(className).contain((document.styleSheets[0].cssRules[0] as CSSStyleRule).selectorText.replace(/\./, ''))
-    expect(className).contain((document.styleSheets[0].cssRules[1] as CSSStyleRule).selectorText.replace(/\./, ''))
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.height).toBe('36px')
-    expect((document.styleSheets[0].cssRules[1] as CSSStyleRule).style.height).toBe('44px')
-    expect(wrapper.find('div').element.className).toMatch(/^styled-/)
-    expect(wrapper.text()).toBe('Hello World')
-    expect(wrapper.find('div').element.style.color).toBe('blue')
+    const instance = render(StyledComponent2)
+    const element = instance.getByTestId('test')
+
+    // Is applied style correctly
+    const style = getStyle(element)
+    expect(style).toBeDefined()
+    expect(style?.color).eq('rgb(0, 0, 255)')
+    expect(style?.height).eq('44px')
+    expect(style?.width).eq('80px')
   })
 
   it('should inject attrs', async () => {
     const StyledComponent = styled.div.attrs({
-      style: 'color: red',
+      'data-testid': 'test',
     })`
       height: 36px;
     `
-    const wrapper = mount(StyledComponent)
+    const instance = render(StyledComponent)
+    const element = instance.getByTestId('test')
+
+    expect(element).toBeDefined()
+    expect(element.dataset['testid']).eq('test')
 
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.height).toBe('36px')
-    expect(wrapper.find('div').element.style.color).toBe('red')
+    const style = getStyle(element)
+    expect(style?.height).eq('36px')
   })
 
   it('should react to props change', async () => {
-    const StyledComponent = styled('div', { color: String })`
+    const StyledComponent = styled('div', { color: String }).attrs({ 'data-testid': 'test' })`
       color: ${(props) => props.color};
     `
-    const color = ref('red')
-    const wrapper = mount(StyledComponent, {
-      props: {
-        color: color.value,
-      },
+    const color = ref('rgb(255, 0, 0)')
+    const instance = render(StyledComponent, {
+      props: { color: color.value },
     })
 
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style['color']).toBe('red')
+    const element = instance.getByTestId('test')
+    const style = getStyle(element)
+    expect(style?.color).eq('rgb(255, 0, 0)')
 
-    await wrapper.setProps({ color: 'blue' })
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style['color']).toBe('blue')
+    color.value = 'rgb(0, 0, 255)'
+    await instance.rerender({ color: color.value })
+    const newStyle = getStyle(element)
+    expect(newStyle?.color).eq('rgb(0, 0, 255)')
   })
 
   it('should create a global style component', async () => {
     const GlobalStyle = createGlobalStyle`
       body {
-        background: red;
+        background: rgb(255, 0, 0);
       }
     `
-    mount(GlobalStyle)
+    const instance = render(GlobalStyle)
 
     expect(GlobalStyle).toBeDefined()
     expect(GlobalStyle.name).toMatch(/^styled-global.+/)
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).selectorText).toBe('body')
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('red')
+
+    const style = getStyle(instance.baseElement)
+    expect(style?.background).toBe('rgb(255, 0, 0)')
   })
 })

packages/core/__tests__/styled.test.ts

@@ -1,33 +1,40 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, cleanup, waitFor } from '@testing-library/vue'
 import { ThemeProvider, styled } from '../index'
 import { h, reactive } from 'vue'
+import { getStyle } from './utils'
 
 describe('theme-provider', () => {
-  const StyledComponent = styled.p`
-    background: ${(props) => props.theme.primary};
-  `
-  const theme = reactive({
-    primary: 'red',
-  })
-  const wrapper = mount(ThemeProvider, {
-    props: {
-      theme,
-    },
-    slots: {
-      default: () => h(StyledComponent),
-    },
+  afterEach(() => {
+    // Reset env
+    cleanup()
   })
 
-  it('should use theme', async () => {
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('red')
-  })
+  it('should render with theme', async () => {
+    const StyledComponent = styled.p.attrs({ 'data-testid': 'test' })`
+      background: ${(props) => props.theme.primary};
+    `
+    const theme = reactive({
+      primary: 'rgb(255, 0, 0)',
+    })
+
+    const instance = render(ThemeProvider, {
+      props: {
+        theme,
+      },
+      slots: {
+        default: () => h(StyledComponent),
+      },
+    })
+
+    const element = instance.getByTestId('test')
+    const preStyle = getStyle(element)
+    expect(preStyle?.background).toBe('rgb(255, 0, 0)')
 
-  it('should react to theme change', async () => {
-    theme.primary = 'blue'
-    await wrapper.setProps({
-      theme,
+    theme.primary = 'rgb(0, 0, 255)'
+    await waitFor(() => {
+      const newStyle = getStyle(element)
+      return expect(newStyle?.background).eq('rgb(0, 0, 255)')
     })
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('blue')
   })
 })