From 3868277ad8799409fcc85acdaae56ffb46df4caa Mon Sep 17 00:00:00 2001 From: tjuanitas <7311041+tjuanitas@users.noreply.github.com> Date: Wed, 4 Sep 2024 11:58:21 -0700 Subject: [PATCH] fix: unit tests --- i18n/en-US.properties | 6 + src/elements/content-uploader/ItemAction.tsx | 2 +- .../__tests__/ItemAction.test.tsx | 132 +++++++----------- .../__tests__/ItemList.test.js | 58 -------- 4 files changed, 55 insertions(+), 143 deletions(-) delete mode 100644 src/elements/content-uploader/__tests__/ItemList.test.js diff --git a/i18n/en-US.properties b/i18n/en-US.properties index 17284b7bce..368753a74f 100644 --- a/i18n/en-US.properties +++ b/i18n/en-US.properties @@ -34,6 +34,12 @@ be.activitySidebarFilter.status.tasks = Tasks be.add = Add # Text to display when app is disabled by applied access policy be.additionalTab.blockedByShieldAccessPolicy = Use of this app is blocked due to a security policy. +# Error message when an annotation deletion fails +be.annotationThread.errorDeleteAnnotation = There was an error deleting this item. +# Error message when an annotation update fails +be.annotationThread.errorEditAnnotation = This annotation could not be modified. +# Error message when an annotation fetch fails +be.annotattionThread.errorFetchAnnotation = The annotation could not be fetched. # Error message when an app activity deletion fails be.api.appActivityDeleteErrorMessage = There was an error deleting this item. # Error message when a comment creation fails due to a conflict diff --git a/src/elements/content-uploader/ItemAction.tsx b/src/elements/content-uploader/ItemAction.tsx index 40537cc85a..d89f3a307e 100644 --- a/src/elements/content-uploader/ItemAction.tsx +++ b/src/elements/content-uploader/ItemAction.tsx @@ -22,7 +22,7 @@ import type { UploadStatus } from '../../common/types/upload'; import './ItemAction.scss'; export interface ItemActionProps { - error?: AxiosError; + error?: Partial; isFolder?: boolean; isResumableUploadsEnabled: boolean; onClick: React.MouseEventHandler; diff --git a/src/elements/content-uploader/__tests__/ItemAction.test.tsx b/src/elements/content-uploader/__tests__/ItemAction.test.tsx index 92a5812355..1661f1a145 100644 --- a/src/elements/content-uploader/__tests__/ItemAction.test.tsx +++ b/src/elements/content-uploader/__tests__/ItemAction.test.tsx @@ -1,106 +1,70 @@ import * as React from 'react'; -import { AxiosError } from 'axios'; import { render, screen } from '../../../test-utils/testing-library'; -import ItemAction, { ItemActionProps } from '../ItemAction'; -import { - ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED, - STATUS_PENDING, - STATUS_IN_PROGRESS, - STATUS_COMPLETE, - STATUS_STAGED, - STATUS_ERROR, -} from '../../../constants'; +import ItemAction from '../ItemAction'; describe('elements/content-uploader/ItemAction', () => { - const defaultError: AxiosError = { - code: '', - config: undefined, - isAxiosError: false, - toJSON: jest.fn(), - name: '', - message: '', + const renderComponent = (props = {}) => { + const defaultProps = { + isResumableUploadsEnabled: false, + onClick: jest.fn(), + status: 'pending', + }; + return render(); }; - const defaultProps: ItemActionProps = { - isResumableUploadsEnabled: false, - onClick: jest.fn(), - status: STATUS_PENDING, - error: defaultError, - isFolder: false, - onUpgradeCTAClick: jest.fn(), - }; - - const renderComponent = (props: Partial) => render(); - test.each` - status - ${STATUS_COMPLETE} - ${STATUS_IN_PROGRESS} - ${STATUS_STAGED} - ${STATUS_ERROR} - ${STATUS_PENDING} - `('should render correctly with $status', ({ status }: Pick) => { - renderComponent({ status }); - expect(screen.getByRole('button')).toBeInTheDocument(); + status | label + ${'complete'} | ${'Remove'} + ${'error'} | ${'Retry'} + ${'inprogress'} | ${'Cancel this upload'} + ${'pending'} | ${'Cancel this upload'} + ${'staged'} | ${'Cancel this upload'} + ${'unknown'} | ${'Cancel this upload'} + `('renders icon button when status is `$status` and resumable uploads is disabled', ({ label, status }) => { + renderComponent({ isResumableUploadsEnabled: false, status }); + expect(screen.getByRole('button', { name: label })).toBeInTheDocument(); }); - test.each` - status | label - ${STATUS_COMPLETE} | ${'complete'} - ${STATUS_ERROR} | ${'error'} - `( - 'should render correctly with $status and resumable uploads enabled', - ({ status, label }: Pick & { label: string }) => { - renderComponent({ status, isResumableUploadsEnabled: true }); - expect(screen.getByRole('img', { name: label })).toBeInTheDocument(); + test.each(['inprogress', 'pending', 'staged', 'unknown'])( + 'renders loading indicator when status is `%s` and resumable uploads is enabled', + status => { + renderComponent({ isResumableUploadsEnabled: true, status }); + expect(screen.queryByRole('button')).not.toBeInTheDocument(); + expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument(); }, ); - test.each` - status - ${STATUS_IN_PROGRESS} - ${STATUS_PENDING} - ${STATUS_STAGED} - `( - 'should render correctly with $status and resumable uploads enabled', - ({ status }: Pick) => { - renderComponent({ status, isResumableUploadsEnabled: true }); - expect(screen.getByRole('status', { name: 'loading' })).toBeInTheDocument(); - }, - ); + test('renders correctly when status is `complete` and resumable uploads is enabled', () => { + renderComponent({ isResumableUploadsEnabled: true, status: 'complete' }); + expect(screen.queryByRole('button')).not.toBeInTheDocument(); + expect(screen.getByRole('img', { name: 'Complete' })).toBeInTheDocument(); + }); - test.each` - status | label - ${STATUS_IN_PROGRESS} | ${'staged'} - ${STATUS_STAGED} | ${'staged'} - `( - 'should render correctly with $status and resumable uploads disabled', - ({ status, label }: Pick & { label: string }) => { - renderComponent({ status, isResumableUploadsEnabled: false }); - expect(screen.getByRole('img', { name: label })).toBeInTheDocument(); + test('renders correctly when status is `error` and resumable uploads is enabled', () => { + renderComponent({ isResumableUploadsEnabled: true, status: 'error' }); + expect(screen.getByRole('button', { name: 'Resume' })).toBeInTheDocument(); + }); + + test.each(['complete', 'error', 'inprogress', 'staged', 'unknown'])( + 'renders an empty component when item is folder and status is `%s`', + status => { + const { container } = renderComponent({ isFolder: true, status }); + expect(container).toBeEmptyDOMElement(); }, ); - test('should render correctly with STATUS_PENDING and resumable uploads disabled', () => { - renderComponent({ status: STATUS_PENDING, isResumableUploadsEnabled: false }); - expect(screen.getByRole('button', { name: 'Cancel this upload' })).toBeInTheDocument(); + test('does not render an empty component when item is folder and status is `pending`', () => { + const { container } = renderComponent({ isFolder: true, status: 'pending' }); + expect(container).not.toBeEmptyDOMElement(); }); - test('should render correctly with STATUS_ERROR and item is folder', () => { - renderComponent({ status: STATUS_ERROR, isFolder: true }); - expect(screen.queryByRole('button')).not.toBeInTheDocument(); + test('renders CTA button when status is `error` and code is `file_size_limit_exceeded`', () => { + renderComponent({ error: { code: 'file_size_limit_exceeded' }, onUpgradeCTAClick: jest.fn(), status: 'error' }); + expect(screen.getByRole('button', { name: 'Upgrade' })).toBeInTheDocument(); }); - test('should render CTA button to upgrade when upload file size exceeded error is received', () => { - renderComponent({ - status: STATUS_ERROR, - error: { ...defaultError, code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED }, - onUpgradeCTAClick: jest.fn(), - }); - expect( - screen.getByRole('button', { - name: 'Upgrade', - }), - ).toBeInTheDocument(); + test('does not render CTA button when status is `error` and code is not `file_size_limit_exceeded`', () => { + renderComponent({ error: { code: 'unknown' }, onUpgradeCTAClick: jest.fn(), status: 'error' }); + expect(screen.queryByRole('button', { name: 'Upgrade' })).not.toBeInTheDocument(); }); }); diff --git a/src/elements/content-uploader/__tests__/ItemList.test.js b/src/elements/content-uploader/__tests__/ItemList.test.js deleted file mode 100644 index 67a39b8ebf..0000000000 --- a/src/elements/content-uploader/__tests__/ItemList.test.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import { mount } from 'enzyme'; -// TODO Providers can be removed when converted to RTL - providers are included in the testing utility library -import { IntlProvider } from 'react-intl'; -import { TooltipProvider } from '@box/blueprint-web'; - -import ItemList from '../ItemList'; -import { ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED, STATUS_COMPLETE, STATUS_ERROR } from '../../../constants'; - -jest.unmock('react-intl'); // TODO can be removed when converted to RTL -jest.mock( - '@box/react-virtualized/dist/es/AutoSizer', - () => - ({ children }) => - children({ height: 600, width: 600 }), -); - -describe('elements/content-uploader/ItemList', () => { - const renderComponent = props => - mount( - - - {}} {...props} /> - - , - ); - - describe('render()', () => { - test('should render default component', () => { - const wrapper = renderComponent(); - - expect(wrapper.find('Table').length).toBe(1); - expect(wrapper.find('Table.bcu-item-list').length).toBe(1); - }); - - test('should render component with correct number of items', () => { - const items = [ - { id: '1', name: 'item1', status: STATUS_COMPLETE }, - { id: '2', name: 'item2', status: STATUS_COMPLETE }, - { id: '3', name: 'item3', status: STATUS_COMPLETE }, - ]; - const wrapper = renderComponent({ items }); - expect(wrapper.find('div.bcu-item-row').length).toBe(3); - const actionColumnStyle = wrapper.find('.bcu-item-list-action-column').first().prop('style'); - expect(actionColumnStyle.flex).toEqual('0 0 32px'); - }); - - test('should render action column with correct width for upgrade cta', () => { - const items = [ - { id: '1', name: 'item1', status: STATUS_ERROR, code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED }, - ]; - const wrapper = renderComponent({ items, onUpgradeCTAClick: () => {} }); - expect(wrapper.find('div.bcu-item-row').length).toBe(1); - const actionColumnStyle = wrapper.find('.bcu-item-list-action-column').prop('style'); - expect(actionColumnStyle.flex).toEqual('0 0 100px'); - }); - }); -});