Skip to content

Commit

Permalink
update test for Chip Desktop
Browse files Browse the repository at this point in the history
  • Loading branch information
@koji
koji committed Mar 28, 2024
1 parent 35e5dbf commit 3a863a7
Show file tree
Hide file tree
Showing 3 changed files with 308 additions and 74 deletions.
2 changes: 1 addition & 1 deletion components/src/atoms/Chip/Chip.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { Chip } from '.'
import type { Meta, StoryObj } from '@storybook/react'

const meta: Meta<typeof Chip> = {
title: 'ODD/Atoms/Chip',
title: 'Library/Atoms/Chip',
argTypes: {
type: {
options: ['basic', 'error', 'info', 'neutral', 'success', 'warning'],
Expand Down
266 changes: 260 additions & 6 deletions components/src/atoms/Chip/__tests__/Chip.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'
import { describe, it, expect } from 'vitest'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { screen } from '@testing-library/react'
import { BORDERS, COLORS } from '../../../helix-design-system'
import { SPACING } from '../../../ui-style-constants'
Expand All @@ -10,9 +10,260 @@ const render = (props: React.ComponentProps<typeof Chip>) => {
return renderWithProviders(<Chip {...props} />)
}

describe('Chip', () => {
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: vi.fn().mockImplementation(query => ({
matches: false,
media: '(height: 600px) and (width: 1024px)',
onchange: null,
addListener: vi.fn(), // Deprecated
removeListener: vi.fn(), // Deprecated
addEventListener: vi.fn(),
removeEventListener: vi.fn(),
dispatchEvent: vi.fn(),
})),
})

describe('Chip Touchscreen', () => {
let props: React.ComponentProps<typeof Chip>

it('should render text, no icon with basic colors', () => {
props = {
text: 'mockBasic',
type: 'basic',
}
render(props)
const chip = screen.getByTestId('Chip_basic')
const chipText = screen.getByText('mockBasic')
expect(chip).toHaveStyle(
`background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
)
expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
// ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
// I will keep investigating this
// expect(chipText).toHaveStyle(
// `padding: ${SPACING.spacing8} ${SPACING.spacing16}`
// )
expect(screen.queryByLabelText('icon_mockBasic')).not.toBeInTheDocument()
})

it('should render text, icon, bgcolor with success colors', () => {
props = {
text: 'mockSuccess',
type: 'success',
}
render(props)
const chip = screen.getByTestId('Chip_success')
const chipText = screen.getByText('mockSuccess')
expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
const icon = screen.getByLabelText('icon_mockSuccess')
expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
// ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
// I will keep investigating this
// expect(icon).toHaveStyle(`width: 1.5rem`)
})

it('should render text, icon, no bgcolor with success colors and bg false', () => {
props = {
background: false,
text: 'mockSuccess',
type: 'success',
}
render(props)
const chip = screen.getByTestId('Chip_success')
const chipText = screen.getByText('mockSuccess')
expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
const icon = screen.getByLabelText('icon_mockSuccess')
expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
})

it('should render text, icon, bgcolor with warning colors', () => {
props = {
text: 'mockWarning',
type: 'warning',
}
render(props)
const chip = screen.getByTestId('Chip_warning')
const chipText = screen.getByText('mockWarning')
expect(chip).toHaveStyle(`background-color: ${COLORS.yellow35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
const icon = screen.getByLabelText('icon_mockWarning')
expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
})

it('should render text, icon, no bgcolor with warning colors and bg false', () => {
props = {
background: false,
text: 'mockWarning',
type: 'warning',
}
render(props)
const chip = screen.getByTestId('Chip_warning')
const chipText = screen.getByText('mockWarning')
expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.yellow60}`)
const icon = screen.getByLabelText('icon_mockWarning')
expect(icon).toHaveStyle(`color: ${COLORS.yellow60}`)
})

it('should render text, icon, bgcolor with neutral colors', () => {
props = {
text: 'mockNeutral',
type: 'neutral',
}
render(props)
const chip = screen.getByTestId('Chip_neutral')
const chipText = screen.getByText('mockNeutral')
expect(chip).toHaveStyle(
`background-color: ${COLORS.black90}${COLORS.opacity20HexCode}`
)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
const icon = screen.getByLabelText('icon_mockNeutral')
expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
})

it('should render text, icon, no bgcolor with neutral colors and bg false', () => {
props = {
background: false,
text: 'mockNeutral',
type: 'neutral',
}
render(props)
const chip = screen.getByTestId('Chip_neutral')
const chipText = screen.getByText('mockNeutral')
expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.grey60}`)
const icon = screen.getByLabelText('icon_mockNeutral')
expect(icon).toHaveStyle(`color: ${COLORS.grey60}`)
})

it('should render text, icon, bgcolor with error colors', () => {
props = {
text: 'mockError',
type: 'error',
}
render(props)
const chip = screen.getByTestId('Chip_error')
const chipText = screen.getByText('mockError')
expect(chip).toHaveStyle(`background-color: ${COLORS.red35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
const icon = screen.getByLabelText('icon_mockError')
expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
})

it('should render text, icon, no bgcolor with error colors and bg false', () => {
props = {
background: false,
text: 'mockError',
type: 'error',
}
render(props)
const chip = screen.getByTestId('Chip_error')
const chipText = screen.getByText('mockError')
expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.red60}`)
const icon = screen.getByLabelText('icon_mockError')
expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
})

it('should render text, icon, bgcolor with info colors', () => {
props = {
text: 'mockInfo',
type: 'info',
}
render(props)
const chip = screen.getByTestId('Chip_info')
const chipText = screen.getByText('mockInfo')
expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
const icon = screen.getByLabelText('icon_mockInfo')
expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
})

it('should render text, icon, no bgcolor with info colors and bg false', () => {
props = {
background: false,
text: 'mockInfo',
type: 'info',
}
render(props)
const chip = screen.getByTestId('Chip_info')
const chipText = screen.getByText('mockInfo')
expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
const icon = screen.getByLabelText('icon_mockInfo')
expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
})
it('renders no icon when hasIcon is false', () => {
props = {
text: 'mockInfo',
hasIcon: false,
type: 'info',
}
render(props)
expect(screen.queryByText('icon_mockInfo')).not.toBeInTheDocument()
})

it('render text with smaller padding and smaller icon when chip size is small and background is false', () => {
props = {
background: false,
text: 'mockInfo',
type: 'info',
chipSize: 'small',
}
render(props)
const chip = screen.getByTestId('Chip_info')
expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
const icon = screen.getByLabelText('icon_mockInfo')
expect(icon).toHaveStyle(`width: 0.75rem`)
})

// ToDo (kk:03/28/2024) seems that jsdom doesn't support switching via media query
// I will keep investigating this
// it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
// props = {
// background: true,
// text: 'mockInfo',
// type: 'info',
// chipSize: 'small',
// }
// render(props)
// const chip = screen.getByTestId('Chip_info')
// expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
// const icon = screen.getByLabelText('icon_mockInfo')
// expect(icon).toHaveStyle(`width: 1.25rem`)
// })
})

describe('Chip Web', () => {
let props: React.ComponentProps<typeof Chip>

beforeEach(() => {
Object.defineProperty(window, 'innerWidth', {
writable: true,
configurable: true,
value: 1024,
})

Object.defineProperty(window, 'innerHeight', {
writable: true,
configurable: true,
value: 768,
})
})

it('should render text, no icon with basic colors', () => {
props = {
text: 'mockBasic',
Expand All @@ -39,9 +290,12 @@ describe('Chip', () => {
expect(chip).toHaveStyle(`background-color: ${COLORS.green35}`)
expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
expect(chipText).toHaveStyle(`color: ${COLORS.green60}`)
// expect(chipText).toHaveStyle(
// `padding: ${SPACING.spacing2} ${SPACING.spacing8}`
// )
const icon = screen.getByLabelText('icon_mockSuccess')
expect(icon).toHaveStyle(`color: ${COLORS.green60}`)
expect(icon).toHaveStyle(`width: 1.5rem`)
expect(icon).toHaveStyle(`width: 1rem`)
})

it('should render text, icon, no bgcolor with success colors and bg false', () => {
Expand Down Expand Up @@ -206,7 +460,7 @@ describe('Chip', () => {
const chip = screen.getByTestId('Chip_info')
expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} 0`)
const icon = screen.getByLabelText('icon_mockInfo')
expect(icon).toHaveStyle(`width: 1.25rem`)
expect(icon).toHaveStyle(`width: 0.75rem`)
})

it('render text with smaller padding and smaller icon when chip size is small and background is true', () => {
Expand All @@ -218,8 +472,8 @@ describe('Chip', () => {
}
render(props)
const chip = screen.getByTestId('Chip_info')
expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing8}`)
expect(chip).toHaveStyle(`padding: ${SPACING.spacing4} ${SPACING.spacing6}`)
const icon = screen.getByLabelText('icon_mockInfo')
expect(icon).toHaveStyle(`width: 1.25rem`)
expect(icon).toHaveStyle(`width: 0.75rem`)
})
})
Loading

0 comments on commit 3a863a7

Please sign in to comment.