fix: unit tests

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

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<AxiosError>;
     isFolder?: boolean;
     isResumableUploadsEnabled: boolean;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

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(<ItemAction {...defaultProps} {...props} />);
     };
 
-    const defaultProps: ItemActionProps = {
-        isResumableUploadsEnabled: false,
-        onClick: jest.fn(),
-        status: STATUS_PENDING,
-        error: defaultError,
-        isFolder: false,
-        onUpgradeCTAClick: jest.fn(),
-    };
-
-    const renderComponent = (props: Partial<ItemActionProps>) => render(<ItemAction {...defaultProps} {...props} />);
-
     test.each`
-        status
-        ${STATUS_COMPLETE}
-        ${STATUS_IN_PROGRESS}
-        ${STATUS_STAGED}
-        ${STATUS_ERROR}
-        ${STATUS_PENDING}
-    `('should render correctly with $status', ({ status }: Pick<ItemActionProps, 'status'>) => {
-        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<ItemActionProps, 'status'> & { 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<ItemActionProps, 'status'>) => {
-            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<ItemActionProps, 'status'> & { 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();
     });
 });