From dc093fb69683deb2cdbe088355e47a22a7b5c143 Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 15 Apr 2024 15:07:18 -0400 Subject: [PATCH] refactor(app): refactor banner component stories (#14894) * refactor(app): refactor banner component stories --- app/src/atoms/Banner/Banner.stories.tsx | 55 ++++++++++--------- .../atoms/Banner/__tests__/Banner.test.tsx | 52 ++++++++++-------- app/src/atoms/Banner/index.tsx | 3 +- 3 files changed, 60 insertions(+), 50 deletions(-) diff --git a/app/src/atoms/Banner/Banner.stories.tsx b/app/src/atoms/Banner/Banner.stories.tsx index deea5d236b4..0f3d6210075 100644 --- a/app/src/atoms/Banner/Banner.stories.tsx +++ b/app/src/atoms/Banner/Banner.stories.tsx @@ -1,36 +1,41 @@ import * as React from 'react' import { StyledText, TYPOGRAPHY } from '@opentrons/components' import { Banner } from './index' -import type { Story, Meta } from '@storybook/react' +import type { Meta, StoryObj } from '@storybook/react' -export default { +const meta: Meta = { title: 'App/Atoms/Banner', component: Banner, -} as Meta +} + +export default meta -const Template: Story> = args => ( - {'Banner component'} -) +type Story = StoryObj -export const Primary = Template.bind({}) -Primary.args = { - title: 'title', - type: 'success', +export const Primary: Story = { + args: { + children: 'Banner component', + type: 'success', + }, } -export const OverriddenIcon = Template.bind({}) -OverriddenIcon.args = { - type: 'warning', - title: 'Alert with overridden icon', - icon: { name: 'ot-hot-to-touch' }, + +export const OverriddenIcon: Story = { + args: { + type: 'warning', + children: 'Banner component', + icon: { name: 'ot-hot-to-touch' }, + }, } -export const OverriddenExitIcon = Template.bind({}) -OverriddenExitIcon.args = { - type: 'informing', - title: 'Alert with overriden exit icon', - onCloseClick: () => console.log('close'), - closeButton: ( - - {'Exit'} - - ), + +export const OverriddenExitIcon: Story = { + args: { + type: 'informing', + children: 'Banner component', + onCloseClick: () => console.log('close'), + closeButton: ( + + {'Exit'} + + ), + }, } diff --git a/app/src/atoms/Banner/__tests__/Banner.test.tsx b/app/src/atoms/Banner/__tests__/Banner.test.tsx index 126740f0c4b..f543ec98ec0 100644 --- a/app/src/atoms/Banner/__tests__/Banner.test.tsx +++ b/app/src/atoms/Banner/__tests__/Banner.test.tsx @@ -1,10 +1,9 @@ import * as React from 'react' import { describe, it, vi, expect, beforeEach } from 'vitest' -import '@testing-library/jest-dom/vitest' -import { fireEvent } from '@testing-library/react' +import { fireEvent, screen } from '@testing-library/react' +import { renderWithProviders } from '../../../__testing-utils__' import { i18n } from '../../../i18n' import { Banner } from '..' -import { renderWithProviders } from '../../../__testing-utils__' const render = (props: React.ComponentProps) => { return renderWithProviders(, { @@ -21,60 +20,67 @@ describe('Banner', () => { children: 'TITLE', } }) + it('renders success banner', () => { - const { getByText, getByLabelText } = render(props) - getByLabelText('icon_success') - getByText('TITLE') + render(props) + screen.getByLabelText('icon_success') + screen.getByText('TITLE') }) + it('renders success banner with exit button and when click dismisses banner', () => { props = { type: 'success', children: 'TITLE', onCloseClick: vi.fn(), } - const { getByText, getByLabelText } = render(props) - getByText('TITLE') - const btn = getByLabelText('close_icon') + render(props) + screen.getByText('TITLE') + const btn = screen.getByLabelText('close_icon') fireEvent.click(btn) expect(props.onCloseClick).toHaveBeenCalled() }) + it('renders warning banner', () => { props = { type: 'warning', children: 'TITLE', } - const { getByText, getByLabelText } = render(props) - getByLabelText('icon_warning') - getByText('TITLE') + render(props) + screen.getByLabelText('icon_warning') + screen.getByText('TITLE') }) + it('renders error banner', () => { props = { type: 'error', children: 'TITLE', } - const { getByText, getByLabelText } = render(props) - getByLabelText('icon_error') - getByText('TITLE') + render(props) + screen.getByLabelText('icon_error') + screen.getByText('TITLE') }) + it('renders updating banner', () => { props = { type: 'updating', children: 'TITLE', } - const { getByText, getByLabelText } = render(props) - getByLabelText('icon_updating') - getByText('TITLE') + render(props) + screen.getByLabelText('icon_updating') + screen.getByText('TITLE') }) + it('renders custom icon banner', () => { props = { type: 'warning', children: 'TITLE', icon: { name: 'ot-hot-to-touch' }, } - const { getByText, getByLabelText } = render(props) - getByLabelText('icon_warning') - getByText('TITLE') + render(props) + screen.getByLabelText('icon_warning') + screen.getByText('TITLE') }) + it('renders custom close', () => { props = { type: 'warning', @@ -82,8 +88,8 @@ describe('Banner', () => { closeButton: 'close button', onCloseClick: vi.fn(), } - const { getByText } = render(props) - const btn = getByText('close button') + render(props) + const btn = screen.getByText('close button') fireEvent.click(btn) expect(props.onCloseClick).toHaveBeenCalled() }) diff --git a/app/src/atoms/Banner/index.tsx b/app/src/atoms/Banner/index.tsx index a74fcf829ba..e7d2008521a 100644 --- a/app/src/atoms/Banner/index.tsx +++ b/app/src/atoms/Banner/index.tsx @@ -8,13 +8,12 @@ import { DIRECTION_ROW, Flex, Icon, - IconProps, JUSTIFY_SPACE_BETWEEN, RESPONSIVENESS, SPACING, TYPOGRAPHY, } from '@opentrons/components' -import type { StyleProps } from '@opentrons/components' +import type { IconProps, StyleProps } from '@opentrons/components' export type BannerType = | 'success'