Skip to content

Commit

Permalink
Merge pull request #229 from commitd/stuarthendren/issue228
Browse files Browse the repository at this point in the history
fix: allows tests to run without jest fix for media query
  • Loading branch information
stuarthendren authored Sep 19, 2021
2 parents 7347c81 + 2c394af commit 6ac900b
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 26 deletions.
2 changes: 1 addition & 1 deletion src/components/Text/Text.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export const Monospace = forwardRef<HTMLPreElement, MonospaceProps>(
({ inline = false, ...props }, forwardedRef) => {
return (
<Text
as={inline ? 'pre' : 'span'}
as={inline ? 'span' : 'pre'}
className={MONOSPACE_CLASS_NAME}
font="monospace"
{...props}
Expand Down
4 changes: 2 additions & 2 deletions src/components/ThemeProvider/ThemeController.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,13 @@ export const ThemeController: React.FC<ThemeControllerProps> = ({
}

window
.matchMedia('(prefers-color-scheme: dark)')
?.matchMedia?.('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
setThemeValues(e.matches ? 'dark' : 'light')
})

window
.matchMedia('(prefers-color-scheme: light)')
?.matchMedia?.('(prefers-color-scheme: light)')
.addEventListener('change', (e) => {
setThemeValues(e.matches ? 'light' : 'dark')
})
Expand Down
81 changes: 73 additions & 8 deletions src/components/ThemeProvider/ThemeProvider.test.tsx
Original file line number Diff line number Diff line change
@@ -1,29 +1,94 @@
import React from 'react'
import { act, renderDark, renderLight, renderPlain, screen } from 'test-utils'
import { ThemeProvider } from '.'
import {
UtilityUseThemeResolve,
UtilityUseThemeController,
UtilityUseThemeResolve,
} from './ThemeProvider.stories'
import { renderPlain, renderLight, renderDark } from 'test-utils'

// eslint-disable-next-line @typescript-eslint/no-explicit-any
let addEventListener: jest.Mock

beforeEach(() => {
addEventListener = jest.fn()

// Official way to supply missing window method https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query: string) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener,
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
})
})

it('renders light without error', () => {
const { asFragment } = renderPlain(<ThemeProvider />)
expect(asFragment()).toBeDefined()
expect(addEventListener).toHaveBeenCalledTimes(4)
})

it('renders dark without error', () => {
const { asFragment } = renderPlain(<ThemeProvider choice="dark" />)
expect(asFragment()).toBeDefined()
expect(addEventListener).toHaveBeenCalledTimes(4)
})

it('renders resolutions within light theme', () => {
const { asFragment } = renderLight(<UtilityUseThemeResolve />)
expect(asFragment()).toBeDefined()
it('changing system/window theme changes to dark sets the theme', async () => {
renderPlain(
<ThemeProvider>
<UtilityUseThemeResolve />
</ThemeProvider>
)

act(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const listener = addEventListener.mock.calls[0][1] as (e: {
matches: string
}) => void
listener({ matches: 'dark' })
})

expect(await screen.findByText('#000000')).toBeInTheDocument()
})

it('renders resolutions within dark theme', () => {
const { asFragment } = renderDark(<UtilityUseThemeResolve />)
expect(asFragment()).toBeDefined()
it('changing system/window theme to light sets the theme', async () => {
renderPlain(
<ThemeProvider>
<UtilityUseThemeResolve />
</ThemeProvider>
)
act(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const listener = addEventListener.mock.calls[1][1] as (e: {
matches: string
}) => void
listener({ matches: 'light' })
})

expect(await screen.findByText('#f7f7f7')).toBeInTheDocument()
})

it('changing system/window when theme selected does not change the theme', () => {
renderPlain(
<ThemeProvider choice="light">
<UtilityUseThemeResolve />
</ThemeProvider>
)
act(() => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const listener = addEventListener.mock.calls[0][1] as (e: {
matches: string
}) => void
listener({ matches: 'dark' })
})
expect(screen.queryByText('#000000')).not.toBeInTheDocument()
})

it('renders switch within light theme', () => {
Expand Down
15 changes: 0 additions & 15 deletions src/utils/test-utils.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,6 @@ import ResizeObserver from 'resize-observer-polyfill'
// This is used in some components.
global.ResizeObserver = ResizeObserver

// Official way to supply missing window method https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation((query: string) => ({
matches: false,
media: query,
onchange: null,
addListener: jest.fn(), // Deprecated
removeListener: jest.fn(), // Deprecated
addEventListener: jest.fn(),
removeEventListener: jest.fn(),
dispatchEvent: jest.fn(),
})),
})

const LightTheme: React.FC = ({ children }) => (
<ThemeProvider choice="light">{children}</ThemeProvider>
)
Expand Down

0 comments on commit 6ac900b

Please sign in to comment.