From e0942c5210c6c25343d4dd765b1f405b39f4892f Mon Sep 17 00:00:00 2001 From: strozw Date: Wed, 12 Jan 2022 00:27:33 +0900 Subject: [PATCH] update `packages/emotion` tests --- packages/emotion/src/colorModes.test.tsx | 33 +---- .../emotion/src/createGlobalStyle.test.tsx | 19 +-- packages/emotion/src/css.test.tsx | 51 ++----- packages/emotion/src/cx.test.tsx | 55 ++++---- packages/emotion/src/jsx.test.tsx | 126 ++++++++---------- packages/emotion/src/styled.test.tsx | 65 +-------- packages/emotion/src/theme.test.tsx | 101 ++++++++++++-- packages/emotion/src/x.test.tsx | 26 ++-- 8 files changed, 202 insertions(+), 274 deletions(-) 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( - -
-

A testing paragraph

-
- , + const { container } = renderWithTheme( +
+

A testing paragraph

+
) 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')