update packages/emotion tests

styled-components · Jan 11, 2022 · e0942c5 · e0942c5
1 parent 7aaa6d3
commit e0942c5
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 274 deletions.
diff --git a/packages/emotion/src/colorModes.test.tsx b/packages/emotion/src/colorModes.test.tsx
@@ -1,37 +1,18 @@
 /* eslint-env browser */
 import * as React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup } from '@testing-library/react'
-import { th } from '@xstyled/system'
-import { x, ThemeProvider, ColorModeProvider } from '.'
+import { cleanup } from '@testing-library/react'
+import { x, ColorModeProvider } from '.'
+import { renderWithTheme } from './theme.test'
 
 afterEach(cleanup)
 
 describe('colorModes', () => {
   it('supports color modes', () => {
-    const theme = {
-      defaultColorModeName: 'dark',
-      colors: {
-        black: '#000',
-        white: '#fff',
-        red: '#ff0000',
-        danger: th.color('red'),
-        text: th.color('black'),
-        modes: {
-          dark: {
-            red: '#ff4400',
-            text: th.color('white'),
-          },
-        },
-      },
-    }
-
-    render(
-      <ThemeProvider theme={theme}>
-        <ColorModeProvider>
-          <x.div color="text">Hello</x.div>
-        </ColorModeProvider>
-      </ThemeProvider>,
+    renderWithTheme(
+			<ColorModeProvider>
+				<x.div color="text">Hello</x.div>
+			</ColorModeProvider>
     )
     expect(document.body).toHaveClass('xstyled-color-mode-dark')
   })

diff --git a/packages/emotion/src/createGlobalStyle.test.tsx b/packages/emotion/src/createGlobalStyle.test.tsx
@@ -1,29 +1,22 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup } from '@testing-library/react'
-import { createGlobalStyle, ThemeProvider } from '.'
+import { cleanup } from '@testing-library/react'
+import { createGlobalStyle } from '.'
+import { renderWithTheme } from './theme.test'
 
 afterEach(cleanup)
 
-const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>{children}</ThemeProvider>
-  )
-}
-
 describe('#createGlobalStyle', () => {
   it('injects global styles', () => {
     const GlobalStyle = createGlobalStyle`
       .margin {
         margin: 2;
       } 
     `
-    const { container } = render(
+    const { container } = renderWithTheme(
       <>
-        <SpaceTheme>
-          <GlobalStyle />
-          <div className="margin" />
-        </SpaceTheme>
+				<GlobalStyle />
+				<div className="margin" />
       </>,
     )
     expect(container.firstChild).toHaveStyle(`

diff --git a/packages/emotion/src/css.test.tsx b/packages/emotion/src/css.test.tsx
@@ -1,20 +1,13 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup } from '@testing-library/react'
+import { cleanup } from '@testing-library/react'
 import styled from '@emotion/styled'
-import { css, ThemeProvider } from '.'
+import { css } from '.'
+import { renderWithTheme } from './theme.test'
 
 afterEach(cleanup)
 
 describe('#css', () => {
-  const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
-    return (
-      <ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>
-        {children}
-      </ThemeProvider>
-    )
-  }
-
   it('transforms rules', () => {
     const Dummy = styled.div`
       ${css`
@@ -23,11 +16,7 @@ describe('#css', () => {
         margin-top: 2px;
       `}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle(`
       margin: 2px 8px 8px 8px;
       padding: 4px;
@@ -40,11 +29,7 @@ describe('#css', () => {
         margin: 1 2;
       `}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
   })
 
@@ -55,11 +40,7 @@ describe('#css', () => {
         margin: 1 ${two};
       `}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
   })
 
@@ -69,25 +50,17 @@ describe('#css', () => {
         margin: '1 2',
       })}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
   })
 
   it('accepts function', () => {
     const Dummy = styled.div`
-      ${css((p) => ({
+      ${css((_p) => ({
         margin: '1 2',
       }))}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
   })
 
@@ -99,11 +72,7 @@ describe('#css', () => {
         styles: 'margin: 1 2;label:x;',
       })}
     `
-    const { container } = render(
-      <SpaceTheme>
-        <Dummy />
-      </SpaceTheme>,
-    )
+    const { container } = renderWithTheme(<Dummy />)
     expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
   })
 })
diff --git a/packages/emotion/src/cx.test.tsx b/packages/emotion/src/cx.test.tsx
@@ -2,16 +2,11 @@
 import { jsx } from '@emotion/react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, cleanup } from '@testing-library/react'
-import { css, cx, ThemeProvider } from '.'
+import { css, cx } from '.'
+import { renderWithTheme } from './theme.test'
 
 afterEach(cleanup)
 
-const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <ThemeProvider theme={{ space: { 1: 4, 2: 8 } }}>{children}</ThemeProvider>
-  )
-}
-
 describe('#cx', () => {
   it('throws with string value', () => {
     // @ts-expect-error Strings are not allowed
@@ -21,18 +16,16 @@ describe('#cx', () => {
   })
 
   it('handles css values', () => {
-    const { container } = render(
-      <SpaceTheme>
-        <div
-          css={cx(
-            css`
-              margin: 2;
-              padding: 1;
-              margin-top: 2px;
-            `,
-          )}
-        />
-      </SpaceTheme>,
+    const { container } = renderWithTheme(
+			<div
+				css={cx(
+					css`
+						margin: 2;
+						padding: 1;
+						margin-top: 2px;
+					`,
+				)}
+			/>
     )
     expect(container.firstChild).toHaveStyle(`
       margin: 2px 8px 8px 8px;
@@ -41,19 +34,17 @@ describe('#cx', () => {
   })
 
   it('handles multiple css values', () => {
-    const { container } = render(
-      <SpaceTheme>
-        <div
-          css={cx([
-            css`
-              margin: 2;
-            `,
-            css`
-              padding: 1;
-            `,
-          ])}
-        />
-      </SpaceTheme>,
+    const { container } = renderWithTheme(
+			<div
+				css={cx([
+					css`
+						margin: 2;
+					`,
+					css`
+						padding: 1;
+					`,
+				])}
+			/>
     )
     expect(container.firstChild).toHaveStyle(`
       margin: 8px;