@primer/components 31.0.0-rc.ee65b7f1 → 31.0.0

package/src/__tests__/TextInputWithTokens.test.tsx

@@ -1,262 +0,0 @@
-import React from 'react'
-import {render} from '../utils/testing'
-import {render as HTMLRender, cleanup, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {TokenSizeKeys, tokenSizes} from '../Token/TokenBase'
-import {IssueLabelToken} from '../Token'
-import TextInputWithTokens, {TextInputWithTokensProps} from '../TextInputWithTokens'
-expect.extend(toHaveNoViolations)
-
-const mockTokens = [
-  {text: 'zero', id: 0},
-  {text: 'one', id: 1},
-  {text: 'two', id: 2},
-  {text: 'three', id: 3},
-  {text: 'four', id: 4},
-  {text: 'five', id: 5},
-  {text: 'six', id: 6},
-  {text: 'seven', id: 7}
-]
-
-const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onTokenRemove, tokens, ...rest}) => (
-  <>
-    {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-    <label htmlFor="tokenInput" id="tokenLabel">
-      Tokens
-    </label>
-    <TextInputWithTokens tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest} />
-  </>
-)
-
-describe('TextInputWithTokens', () => {
-  it('renders without tokens', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens tokens={[]} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders as block layout', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens block tokens={[]} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders with tokens', () => {
-    const onRemoveMock = jest.fn()
-    expect(render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)).toMatchSnapshot()
-  })
-
-  it('renders with tokens using a custom token component', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} tokenComponent={IssueLabelToken} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders at a maximum height when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens maxHeight="20px" tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders tokens on a single line when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens preventTokenWrapping tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('renders tokens at the specified sizes', () => {
-    const onRemoveMock = jest.fn()
-    const tokenSizeKeys = Object.keys(tokenSizes)
-    for (const tokenSizeKey of tokenSizeKeys) {
-      expect(
-        render(
-          <TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} size={tokenSizeKey as TokenSizeKeys} />
-        )
-      ).toMatchSnapshot()
-    }
-  })
-
-  it('renders tokens without a remove button when specified', () => {
-    const onRemoveMock = jest.fn()
-    expect(
-      render(<TextInputWithTokens hideTokenRemoveButtons tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    ).toMatchSnapshot()
-  })
-
-  it('focuses the previous token when keying ArrowLeft', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-    const lastTokenNode = getByText(mockTokens[lastTokenIndex].text)
-
-    expect(document.activeElement).not.toEqual(lastTokenNode)
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(lastTokenNode.id)
-
-    fireEvent.keyDown(lastTokenNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(getByText(mockTokens[lastTokenIndex - 1].text).id)
-  })
-
-  it('focuses the next token when keying ArrowRight', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const tokenNode = getByText(mockTokens[4].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'ArrowRight'})
-
-    expect(document.activeElement?.id).toEqual(getByText(mockTokens[5].text).id)
-  })
-
-  it('focuses the input when keying ArrowLeft on the first token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const firstTokenNode = getByText(mockTokens[0].text)
-
-    expect(document.activeElement).not.toEqual(firstTokenNode)
-
-    fireEvent.focus(firstTokenNode)
-    fireEvent.keyDown(firstTokenNode, {key: 'ArrowLeft'})
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('focuses the input when keying ArrowRight on the last token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text)
-
-    expect(document.activeElement).not.toEqual(lastTokenNode)
-
-    fireEvent.focus(lastTokenNode)
-    fireEvent.keyDown(lastTokenNode, {key: 'ArrowRight'})
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('focuses the input when keying Escape when focused on a token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text)
-
-    expect(document.activeElement?.id).not.toEqual(inputNode.id)
-
-    fireEvent.focus(lastTokenNode)
-    expect(document.activeElement?.id).toEqual(lastTokenNode.id)
-    fireEvent.keyUp(lastTokenNode, {key: 'Escape'})
-
-    expect(document.activeElement?.id).not.toEqual(lastTokenNode.id)
-    expect(document.activeElement?.id).toEqual(inputNode.id)
-  })
-
-  it('focuses the first token when keying ArrowRight in the input', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText, getByText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const firstTokenNode = getByText(mockTokens[0].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'ArrowRight'})
-
-    expect(document.activeElement?.id).not.toEqual(inputNode.id)
-    expect(document.activeElement?.id).toEqual(firstTokenNode.id)
-  })
-
-  it('calls onTokenRemove on the last token when keying Backspace in an empty input', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-    expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[lastTokenIndex].id)
-  })
-
-  it("sets the input text to the last token's text when keying Backspace in an empty input", () => {
-    const onRemoveMock = jest.fn()
-    const {getByDisplayValue, getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-    const lastTokenIndex = mockTokens.length - 1
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-
-    expect(getByDisplayValue(mockTokens[lastTokenIndex].text).id).toEqual(inputNode.id)
-  })
-
-  it('does not call onTokenRemove on the last token when keying Backspace in an input that has a value', () => {
-    const onRemoveMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} defaultValue="test" />
-    )
-    const inputNode = getByLabelText('Tokens')
-
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'Backspace'})
-    expect(onRemoveMock).not.toHaveBeenCalled()
-  })
-
-  it('calls onTokenRemove on the focused token when keying Backspace and moves focus to the next token', () => {
-    const onRemoveMock = jest.fn()
-    const {getByText} = HTMLRender(<TextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const tokenNode = getByText(mockTokens[4].text)
-
-    expect(onRemoveMock).not.toHaveBeenCalled()
-
-    fireEvent.focus(tokenNode)
-    fireEvent.keyDown(tokenNode, {key: 'Backspace'})
-
-    expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id)
-  })
-
-  it('calls onKeyDown', () => {
-    const onRemoveMock = jest.fn()
-    const onKeyDownMock = jest.fn()
-    const {getByLabelText} = HTMLRender(
-      <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} onKeyDown={onKeyDownMock} />
-    )
-    const inputNode = getByLabelText('Tokens')
-
-    expect(onKeyDownMock).not.toHaveBeenCalled()
-    fireEvent.focus(inputNode)
-    fireEvent.keyDown(inputNode, {key: 'a'})
-    expect(onKeyDownMock).toHaveBeenCalled()
-  })
-
-  it('should have no axe violations', async () => {
-    const onRemoveMock = jest.fn()
-    const {container} = HTMLRender(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/ThemeProvider.test.tsx

@@ -1,441 +0,0 @@
-import {render, screen, waitFor} from '@testing-library/react'
-import 'jest-styled-components'
-import React from 'react'
-import {Text, ThemeProvider, useColorSchemeVar, useTheme} from '..'
-
-// window.matchMedia() is not implmented by JSDOM so we have to create a mock:
-// 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 => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-})
-
-const exampleTheme = {
-  colors: {
-    text: '#f00'
-  },
-  colorSchemes: {
-    light: {
-      colors: {
-        text: 'black'
-      }
-    },
-    dark: {
-      colors: {
-        text: 'white'
-      }
-    },
-    dark_dimmed: {
-      colors: {
-        text: 'gray'
-      }
-    }
-  }
-}
-
-it('respects theme prop', () => {
-  const theme = {
-    colors: {
-      text: '#f00'
-    },
-    space: ['0', '0.25rem']
-  }
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Text color="text" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', '#f00')
-  expect(screen.getByText('Hello')).toHaveStyleRule('margin-bottom', '0.25rem')
-})
-
-it('has default theme', () => {
-  render(
-    <ThemeProvider>
-      <Text color="fg.default" mb={1}>
-        Hello
-      </Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toMatchSnapshot()
-})
-
-it('inherits theme from parent', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <ThemeProvider>
-        <Text color="text">Hello</Text>
-      </ThemeProvider>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('defaults to light color scheme', () => {
-  render(
-    <ThemeProvider theme={exampleTheme}>
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('defaults to dark color scheme in night mode', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="night">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-})
-
-it('defaults to first color scheme when passed an invalid color scheme name', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} dayScheme="foo">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('respects nightScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
-})
-
-it('respects dayScheme prop', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-})
-
-it('works in auto mode', () => {
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-})
-
-it('works in auto mode (dark)', () => {
-  const matchMediaSpy = jest.spyOn(window, 'matchMedia').mockImplementation(query => ({
-    matches: true, // enable dark mode
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
-  }))
-
-  render(
-    <ThemeProvider theme={exampleTheme} colorMode="auto">
-      <Text color="text">Hello</Text>
-    </ThemeProvider>
-  )
-
-  expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-
-  matchMediaSpy.mockRestore()
-})
-
-it('updates when colorMode prop changes', async () => {
-  function App() {
-    const [colorMode, setColorMode] = React.useState<'day' | 'night'>('day')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <Text color="text">{colorMode}</Text>
-        <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in day mode (light scheme)
-  expect(screen.getByText('day')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('night')).toHaveStyleRule('color', 'white')
-  )
-})
-
-it('updates when dayScheme prop changes', async () => {
-  function App() {
-    const [dayScheme, setDayScheme] = React.useState('light')
-    return (
-      <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
-        <Text color="text">{dayScheme}</Text>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in day mode (light scheme)
-  expect(screen.getByText('light')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle sets the day scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray')
-  )
-})
-
-it('updates when nightScheme prop changes', async () => {
-  function App() {
-    const [nightScheme, setNightScheme] = React.useState('dark')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
-        <Text color="text">{nightScheme}</Text>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  // starts in night mode (dark scheme)
-  expect(screen.getByText('dark')).toHaveStyleRule('color', 'white')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() =>
-    // clicking the toggle button sets the night scheme to dark_dimmed
-    expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray')
-  )
-})
-
-it('inherits colorMode from parent', async () => {
-  function App() {
-    const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-        <ThemeProvider>
-          <Text color="text">{colorMode}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('day')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('night')).toHaveStyleRule('color', 'white'))
-})
-
-it('inherits dayScheme from parent', async () => {
-  function App() {
-    const [dayScheme, setDayScheme] = React.useState('light')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
-        <ThemeProvider colorMode="day">
-          <Text color="text">{dayScheme}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('light')).toHaveStyleRule('color', 'black')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'))
-})
-
-it('inherits nightScheme from parent', async () => {
-  function App() {
-    const [nightScheme, setNightScheme] = React.useState('dark')
-    return (
-      <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-        <ThemeProvider colorMode="night">
-          <Text color="text">{nightScheme}</Text>
-        </ThemeProvider>
-      </ThemeProvider>
-    )
-  }
-
-  render(<App />)
-
-  expect(screen.getByText('dark')).toHaveStyleRule('color', 'white')
-
-  screen.getByRole('button').click()
-
-  await waitFor(() => expect(screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'))
-})
-
-describe('setColorMode', () => {
-  it('changes the color mode', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button enables night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-  })
-})
-
-describe('setDayScheme', () => {
-  it('changes the day scheme', () => {
-    function ToggleDayScheme() {
-      const {dayScheme, setDayScheme} = useTheme()
-      return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="day">
-        <Text color="text">Hello</Text>
-        <ToggleDayScheme />
-      </ThemeProvider>
-    )
-
-    // starts in day mode (light scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'black')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button sets day scheme to dark
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-  })
-})
-
-describe('setNightScheme', () => {
-  it('changes the night scheme', () => {
-    function ToggleNightScheme() {
-      const {nightScheme, setNightScheme} = useTheme()
-      return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} colorMode="night">
-        <Text color="text">Hello</Text>
-        <ToggleNightScheme />
-      </ThemeProvider>
-    )
-
-    // starts in night mode (dark scheme)
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'white')
-
-    screen.getByRole('button').click()
-
-    // clicking the toggle button sets night scheme to dark_dimmed
-    expect(screen.getByText('Hello')).toHaveStyleRule('color', 'gray')
-  })
-})
-
-describe('useColorSchemeVar', () => {
-  it('updates value when scheme changes', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    function CustomBg() {
-      const customBg = useColorSchemeVar(
-        {
-          light: 'red',
-          dark: 'blue',
-          dark_dimmed: 'green'
-        },
-        'inherit'
-      )
-
-      return <Text bg={customBg}>Hello</Text>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
-        <CustomBg />
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'red')
-
-    screen.getByRole('button').click()
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'green')
-  })
-
-  it('supports fallback value', () => {
-    function ToggleMode() {
-      const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
-    }
-
-    function CustomBg() {
-      const customBg = useColorSchemeVar({dark: 'blue'}, 'red')
-
-      return <Text bg={customBg}>Hello</Text>
-    }
-
-    render(
-      <ThemeProvider theme={exampleTheme}>
-        <CustomBg />
-        <ToggleMode />
-      </ThemeProvider>
-    )
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'red')
-
-    screen.getByRole('button').click()
-
-    expect(screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue')
-  })
-})