diff --git a/packages/emotion/src/colorModes.test.tsx b/packages/emotion/src/colorModes.test.tsx
index 1e78f859..5eb70523 100644
--- 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(
-
-
- Hello
-
- ,
+ renderWithTheme(
+
+ Hello
+
)
expect(document.body).toHaveClass('xstyled-color-mode-dark')
})
diff --git a/packages/emotion/src/createGlobalStyle.test.tsx b/packages/emotion/src/createGlobalStyle.test.tsx
index d0d57903..94cfd620 100644
--- a/packages/emotion/src/createGlobalStyle.test.tsx
+++ b/packages/emotion/src/createGlobalStyle.test.tsx
@@ -1,16 +1,11 @@
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 (
- {children}
- )
-}
-
describe('#createGlobalStyle', () => {
it('injects global styles', () => {
const GlobalStyle = createGlobalStyle`
@@ -18,12 +13,10 @@ describe('#createGlobalStyle', () => {
margin: 2;
}
`
- const { container } = render(
+ const { container } = renderWithTheme(
<>
-
-
-
-
+
+
>,
)
expect(container.firstChild).toHaveStyle(`
diff --git a/packages/emotion/src/css.test.tsx b/packages/emotion/src/css.test.tsx
index 8ce6d174..be922a59 100644
--- 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 (
-
- {children}
-
- )
- }
-
it('transforms rules', () => {
const Dummy = styled.div`
${css`
@@ -23,11 +16,7 @@ describe('#css', () => {
margin-top: 2px;
`}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle(`
margin: 2px 8px 8px 8px;
padding: 4px;
@@ -40,11 +29,7 @@ describe('#css', () => {
margin: 1 2;
`}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
@@ -55,11 +40,7 @@ describe('#css', () => {
margin: 1 ${two};
`}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
@@ -69,25 +50,17 @@ describe('#css', () => {
margin: '1 2',
})}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
it('accepts function', () => {
const Dummy = styled.div`
- ${css((p) => ({
+ ${css((_p) => ({
margin: '1 2',
}))}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
@@ -99,11 +72,7 @@ describe('#css', () => {
styles: 'margin: 1 2;label:x;',
})}
`
- const { container } = render(
-
-
- ,
- )
+ const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle('margin: 4px 8px;')
})
})
diff --git a/packages/emotion/src/cx.test.tsx b/packages/emotion/src/cx.test.tsx
index 8539c77e..57a14621 100644
--- 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 (
- {children}
- )
-}
-
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(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 2px 8px 8px 8px;
@@ -41,19 +34,17 @@ describe('#cx', () => {
})
it('handles multiple css values', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 8px;
diff --git a/packages/emotion/src/jsx.test.tsx b/packages/emotion/src/jsx.test.tsx
index 01e0da50..d76619e8 100644
--- a/packages/emotion/src/jsx.test.tsx
+++ b/packages/emotion/src/jsx.test.tsx
@@ -1,35 +1,27 @@
/** @jsx jsx */
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
-import { ThemeProvider } from '@emotion/react'
import { jsx, css } from '.'
+import { renderWithTheme } from './theme.test'
afterEach(cleanup)
-const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
- return (
- {children}
- )
-}
-
describe('#jsx', () => {
it('does nothing without css prop', () => {
const { container } = render()
- expect(container.firstChild!.nodeName).toBe('DIV')
+ expect(container.firstChild?.nodeName).toBe('DIV')
})
it('handles css string', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 2px 8px 8px 8px;
@@ -38,20 +30,18 @@ describe('#jsx', () => {
})
it('handles array of css string', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 8px;
@@ -60,13 +50,11 @@ describe('#jsx', () => {
})
it('handles css objects', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 8px;
@@ -74,13 +62,11 @@ describe('#jsx', () => {
})
it('handles array of css objects', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.firstChild).toHaveStyle(`
margin: 8px;
@@ -89,28 +75,24 @@ describe('#jsx', () => {
})
it('does not render children', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container).toHaveTextContent('')
})
it('renders a single child', () => {
- const { container } = render(
-
-
- ,
+ const { container } = renderWithTheme(
+
)
expect(container.querySelector('#test-p')).toHaveTextContent(
@@ -119,17 +101,15 @@ describe('#jsx', () => {
})
it('renders multiple children', () => {
- const { container } = render(
-
-
-
First testing paragraph
+ const { container } = renderWithTheme(
+
+
First testing paragraph
-
Second testing paragraph
-
- ,
+
Second testing paragraph
+
)
expect(container.querySelectorAll('.test-p')).toHaveLength(2)
diff --git a/packages/emotion/src/styled.test.tsx b/packages/emotion/src/styled.test.tsx
index 895ec94b..42a55980 100644
--- a/packages/emotion/src/styled.test.tsx
+++ b/packages/emotion/src/styled.test.tsx
@@ -1,68 +1,11 @@
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup, RenderOptions } from '@testing-library/react'
-import { ThemeProvider } from '@emotion/react'
+import { render, cleanup } from '@testing-library/react'
import styled, { css, keyframes } from '.'
-
-// import original module declarations
-import '@xstyled/system'
-import '@emotion/react'
-import {
- defaultTheme as xstyledDefaultTheme,
- DefaultTheme as XStyledDefaultTheme
-} from '@xstyled/system'
-
-import {
- ITheme,
-} from '@xstyled/emotion'
-
-interface AppTheme extends ITheme, XStyledDefaultTheme {
- /* Customize your theme */
- colors: XStyledDefaultTheme['colors'] & {
- primary: string
- }
- space: XStyledDefaultTheme['space'] & {
- md: number
- }
-}
-
-// and extend them!
-declare module '@xstyled/system' {
- // eslint-disable-next-line @typescript-eslint/no-empty-interface
- export interface Theme extends AppTheme {}
-}
-
-declare module '@emotion/react' {
- // eslint-disable-next-line @typescript-eslint/no-empty-interface
- export interface Theme extends AppTheme {
- /* Customize your theme */
- }
-}
-
-const defaultTheme: XStyledDefaultTheme = xstyledDefaultTheme
-
-const theme: AppTheme = {
- ...defaultTheme,
- colors: {
- ...defaultTheme?.colors,
- primary: 'pink',
- },
- space: {
- ...defaultTheme?.space,
- md: 10,
- 1: '4px',
- 2: '8px'
- }
-}
-
+import { renderWithTheme } from './theme.test'
afterEach(cleanup)
-const renderWithTheme = (ui: React.ReactElement, options?: Omit) => render(
- {ui},
- options
-)
-
describe('#styled', () => {
it('supports basic tags', () => {
const Dummy = styled.div``
@@ -103,7 +46,7 @@ describe.each([['div'], ['box']])('#styled.%s', (key) => {
}
// @ts-ignore
const Dummy = styled[key]`
- color: red;
+ color: pink;
${
// @ts-ignore
(p) => css`
@@ -113,7 +56,7 @@ describe.each([['div'], ['box']])('#styled.%s', (key) => {
`
const { container } = renderWithTheme()
expect(container.firstChild).toHaveStyle(`
- color: red;
+ color: pink;
margin: 8px;
`)
})
diff --git a/packages/emotion/src/theme.test.tsx b/packages/emotion/src/theme.test.tsx
index b08ae3bf..cb3c3fdc 100644
--- a/packages/emotion/src/theme.test.tsx
+++ b/packages/emotion/src/theme.test.tsx
@@ -1,14 +1,98 @@
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup } from '@testing-library/react'
+import { render, cleanup, RenderOptions, RenderResult } from '@testing-library/react'
import { ThemeProvider } from '@emotion/react'
import { useTheme, useFontSize } from '.'
+// import original module declarations
+import '@xstyled/system'
+import '@emotion/react'
+import {
+ defaultTheme as xstyledDefaultTheme,
+ DefaultTheme as XStyledDefaultTheme,
+ th
+} from '@xstyled/system'
+
+import {
+ ITheme,
+} from '@xstyled/emotion'
+
+interface AppTheme extends ITheme, XStyledDefaultTheme {
+ fontSizes: XStyledDefaultTheme['fontSizes'] & {
+ md: string
+ }
+ colors: XStyledDefaultTheme['colors'] & {
+ primary: string
+ danger: any
+ text: any
+ red: string
+ modes: {
+ [key: string]: Partial
+ }
+ }
+ space: XStyledDefaultTheme['space'] & {
+ md: number
+ }
+}
+
+// and extend them!
+declare module '@xstyled/system' {
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
+ export interface Theme extends AppTheme {}
+}
+
+declare module '@emotion/react' {
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
+ export interface Theme extends AppTheme {
+ /* Customize your theme */
+ }
+}
+
+const defaultTheme: XStyledDefaultTheme = xstyledDefaultTheme
+
+export const theme: AppTheme = {
+ ...defaultTheme,
+
+ defaultColorModeName: 'dark',
+ colors: {
+ ...defaultTheme.colors,
+ primary: 'pink',
+ black: '#000',
+ white: '#fff',
+ red: '#ff0000',
+ danger: th.color('red'),
+ text: th.color('black'),
+ modes: {
+ dark: {
+ red: '#ff4400',
+ text: th.color('white'),
+ },
+ },
+ },
+ space: {
+ ...defaultTheme.space,
+ md: 10,
+ 1: '4px',
+ 2: '8px'
+ },
+ fontSizes: {
+ ...defaultTheme.fontSizes,
+ md: '20px',
+ },
+} as const
+
+export const renderWithTheme = (
+ ui: React.ReactElement,
+ options?: Omit
+): RenderResult => render(
+ {ui},
+ options
+)
+
afterEach(cleanup)
describe('#useTheme', () => {
it('returns theme', () => {
- const theme = { foo: 'bar' }
const spy = jest.fn()
function ThemeLogger() {
const theme = useTheme()
@@ -17,10 +101,8 @@ describe('#useTheme', () => {
}, [theme])
return null
}
- render(
-
-
- ,
+ renderWithTheme(
+
)
expect(spy).toHaveBeenCalledWith(theme)
})
@@ -28,7 +110,6 @@ describe('#useTheme', () => {
describe('#useFontSize', () => {
it('gets value from theme', () => {
- const theme = { fontSizes: { md: '20px' } }
const spy = jest.fn()
function Logger() {
const fontSize = useFontSize('md')
@@ -37,10 +118,8 @@ describe('#useFontSize', () => {
}, [fontSize])
return null
}
- render(
-
-
- ,
+ renderWithTheme(
+
)
expect(spy).toHaveBeenCalledWith('20px')
})
diff --git a/packages/emotion/src/x.test.tsx b/packages/emotion/src/x.test.tsx
index 6a148d29..edae156c 100644
--- a/packages/emotion/src/x.test.tsx
+++ b/packages/emotion/src/x.test.tsx
@@ -1,17 +1,11 @@
import * as React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, cleanup } from '@testing-library/react'
-import { ThemeProvider } from '@emotion/react'
import { x } from '.'
+import { renderWithTheme } from './theme.test'
afterEach(cleanup)
-const SpaceTheme = ({ children }: { children: React.ReactNode }) => {
- return (
- {children}
- )
-}
-
describe('#x', () => {
it('creates system based components', () => {
const { container } = render()
@@ -25,7 +19,7 @@ describe('#x', () => {
// "as" is not supported with emotion
// @ts-expect-error
const { container } = render()
- expect(container.firstChild!.nodeName).toBe('A')
+ expect(container.firstChild?.nodeName).toBe('A')
expect(container.firstChild).toHaveStyle(`
margin: 2px;
padding: 1px;
@@ -38,7 +32,7 @@ describe('#x', () => {
Hello
,
)
- expect(container.firstChild!.nodeName).toBe('A')
+ expect(container.firstChild?.nodeName).toBe('A')
expect(container.firstChild).toHaveStyle(`
margin: 2px;
padding: 1px;
@@ -46,14 +40,12 @@ describe('#x', () => {
})
it('uses theme', () => {
- const { container } = render(
-
-
- Hello
-
- ,
+ const { container } = renderWithTheme(
+
+ Hello
+
)
- expect(container.firstChild!.nodeName).toBe('A')
+ expect(container.firstChild?.nodeName).toBe('A')
expect(container.firstChild).toHaveStyle(`
margin: 8px;
padding: 4px;
@@ -62,7 +54,7 @@ describe('#x', () => {
it('does not forward props', () => {
const { container } = render()
- expect(container.firstChild!.nodeName).toBe('DIV')
+ expect(container.firstChild?.nodeName).toBe('DIV')
expect(container.firstChild).toHaveStyle('display: flex;')
expect(container.firstChild).not.toHaveAttribute('display')
expect(container.firstChild).toHaveAttribute('data-foo')