test: add unit test for them-provider and keyframes

Author: akinoccc

.idea/codeStyles/Project.xml

@@ -0,0 +1,12 @@
+import { describe, expectTypeOf, it } from 'vitest'
+import { ThemeProvider as TP } from '../providers/theme'
+import { styled, keyframes, createGlobalStyle, ThemeProvider } from '../index'
+
+describe('export', () => {
+  it('should export properly functions', async () => {
+    expectTypeOf(ThemeProvider).toEqualTypeOf<typeof TP>()
+    expectTypeOf(styled).toBeFunction()
+    expectTypeOf(keyframes).toBeFunction()
+    expectTypeOf(createGlobalStyle).toBeFunction()
+  })
+})

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,32 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { keyframes, styled } from '../index'
+
+describe('keyframes', () => {
+  it('should have keyframes', async () => {
+    const kf = keyframes`
+      from {
+        margin-left: 100%;
+        width: 300%;
+      }
+
+      to {
+        margin-left: 0%;
+        width: 100%;
+      }
+    `
+
+    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)
+    expect((document.styleSheets[0].cssRules[0] as CSSKeyframesRule).name).toBe(kf)
+    expect((document.styleSheets[0].cssRules[1] as CSSStyleRule).style['animation-name']).toBe(kf)
+  })
+})

package/__tests__/export.ts

@@ -1,4 +1,4 @@
-import { createGlobalStyle, styled } from '../styled'
+import { createGlobalStyle, styled } from '../index'
 import { afterEach, describe, expect, it } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { ref } from 'vue'
@@ -43,20 +43,19 @@ describe('styled', () => {
 
   it('should style styled component', async () => {
     const StyledComponent = styled.div`
-      font-size: 14px;
+      height: 36px;
     `
 
     const StyledComponent2 = styled(StyledComponent).attrs({ style: 'color: blue' })`
-      font-size: 16px;
+      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['font-size']).toBe('16px')
-    expect((document.styleSheets[0].cssRules[1] as CSSStyleRule).style['font-size']).toBe('14px')
+    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.height).toBe('44px')
+    expect((document.styleSheets[0].cssRules[1] as CSSStyleRule).style.height).toBe('36px')
     expect(wrapper.find('div').element.className).toMatch(/^styled-/)
     expect(wrapper.text()).toBe('Hello World')
     expect(wrapper.find('div').element.style.color).toBe('blue')
@@ -66,15 +65,15 @@ describe('styled', () => {
     const StyledComponent = styled.div.attrs({
       style: 'color: red'
     })`
-      font-size: 14px;
+      height: 36px;
     `
     const wrapper = mount(StyledComponent)
 
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style['font-size']).toBe('14px')
+    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.height).toBe('36px')
     expect(wrapper.find('div').element.style.color).toBe('red')
   })
 
-  it('should be reactive when props change', async () => {
+  it('should react to props change', async () => {
     const StyledComponent = styled('div', { color: String })`
       color: ${(props) => props.color};
     `
@@ -93,15 +92,15 @@ describe('styled', () => {
 
   it('should create a global style component', async () => {
     const GlobalStyle = createGlobalStyle`
-        body {
-            background-color: red;
-        }
+      body {
+        background: red;
+      }
     `
     mount(GlobalStyle)
 
     expect(GlobalStyle).toBeDefined()
     expect(GlobalStyle.name).toMatch(/^global-style/)
     expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).selectorText).toBe('body')
-    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style['background-color']).toBe('red')
+    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('red')
   })
 })

package/__tests__/keyframes.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { ThemeProvider, styled } from '../index'
+import { h, reactive } from 'vue'
+
+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)
+    }
+  })
+
+  it('should use theme', async () => {
+    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('red')
+  })
+
+  it('should react to theme change', async () => {
+    theme.primary = 'blue'
+    await wrapper.setProps({
+      theme
+    })
+    expect((document.styleSheets[0].cssRules[0] as CSSStyleRule).style.background).toBe('blue')
+  })
+})

package/__tests__/styled.spec.ts package/__tests__/styled.test.tspackage/__tests__/styled.spec.ts renamed to package/__tests__/styled.test.ts

@@ -1,5 +0,0 @@
-declare module 'csstype' {
-  interface CSSStyleSheet {
-    cssRules: Array<CSSStyleRule & { selectorText: string }>
-  }
-}