histogram width divide by mode, not total #2
3 changed files with 24 additions and 4 deletions
|
@ -2,6 +2,22 @@ import React from 'react'
|
||||||
import { render, screen } from '@testing-library/react'
|
import { render, screen } from '@testing-library/react'
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
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(),
|
||||||
|
})),
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
test('renders App component', () => {
|
test('renders App component', () => {
|
||||||
render(<App />)
|
render(<App />)
|
||||||
const linkElement = screen.getByText(/Not Wordle/)
|
const linkElement = screen.getByText(/Not Wordle/)
|
||||||
|
|
|
@ -10,11 +10,14 @@ export const Cell = ({ value, status }: Props) => {
|
||||||
const classes = classnames(
|
const classes = classnames(
|
||||||
'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded dark:text-white',
|
'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded dark:text-white',
|
||||||
{
|
{
|
||||||
'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600': !status,
|
'bg-white dark:bg-slate-900 border-slate-200 dark:border-slate-600':
|
||||||
|
!status,
|
||||||
'border-black dark:border-slate-100': value && !status,
|
'border-black dark:border-slate-100': value && !status,
|
||||||
'bg-slate-400 dark:bg-slate-700 text-white border-slate-400 dark:border-slate-700': status === 'absent',
|
'bg-slate-400 dark:bg-slate-700 text-white border-slate-400 dark:border-slate-700':
|
||||||
|
status === 'absent',
|
||||||
'bg-green-500 text-white border-green-500': status === 'correct',
|
'bg-green-500 text-white border-green-500': status === 'correct',
|
||||||
'bg-yellow-500 dark:bg-yellow-700 text-white border-yellow-500 dark:border-yellow-700': status === 'present',
|
'bg-yellow-500 dark:bg-yellow-700 text-white border-yellow-500 dark:border-yellow-700':
|
||||||
|
status === 'present',
|
||||||
'cell-animation': !!value,
|
'cell-animation': !!value,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
|
@ -21,7 +21,8 @@ export const Key = ({
|
||||||
const classes = classnames(
|
const classes = classnames(
|
||||||
'flex items-center justify-center rounded mx-0.5 text-xs font-bold cursor-pointer select-none dark:text-white',
|
'flex items-center justify-center rounded mx-0.5 text-xs font-bold cursor-pointer select-none dark:text-white',
|
||||||
{
|
{
|
||||||
'bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 active:bg-slate-400': !status,
|
'bg-slate-200 dark:bg-slate-600 hover:bg-slate-300 active:bg-slate-400':
|
||||||
|
!status,
|
||||||
'bg-slate-400 text-white': status === 'absent',
|
'bg-slate-400 text-white': status === 'absent',
|
||||||
'bg-green-500 hover:bg-green-600 active:bg-green-700 text-white':
|
'bg-green-500 hover:bg-green-600 active:bg-green-700 text-white':
|
||||||
status === 'correct',
|
status === 'correct',
|
||||||
|
|
Loading…
Add table
Reference in a new issue