From 79f38649afdc74466b1958208324283d34c889db Mon Sep 17 00:00:00 2001 From: Janki Salvi <117571355+js-jankisalvi@users.noreply.github.com> Date: Mon, 21 Aug 2023 15:23:47 +0200 Subject: [PATCH] add tests for button actions --- .../all_cases/all_cases_list.test.tsx | 4 +- .../components/all_cases/translations.ts | 6 +- .../components/all_cases/utility_bar.test.tsx | 212 +++++++++++++----- .../components/all_cases/utility_bar.tsx | 72 ++++-- 4 files changed, 218 insertions(+), 76 deletions(-) diff --git a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx index 450adc24140e8..158f89ffeeb14 100644 --- a/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/all_cases_list.test.tsx @@ -191,7 +191,9 @@ describe('AllCasesListGeneric', () => { expect( screen.getAllByTestId('case-table-column-createdAt')[0].querySelector('.euiToolTipAnchor') ).toHaveTextContent(removeMsFromDate(useGetCasesMockState.data.cases[0].createdAt)); - expect(screen.getByTestId('case-table-case-count')).toHaveTextContent(`Showing 10 of ${useGetCasesMockState.data.total} cases`); + expect(screen.getByTestId('case-table-case-count')).toHaveTextContent( + `Showing 10 of ${useGetCasesMockState.data.total} cases` + ); }); }); diff --git a/x-pack/plugins/cases/public/components/all_cases/translations.ts b/x-pack/plugins/cases/public/components/all_cases/translations.ts index 8597eb96317d9..66b1e4aa4c84f 100644 --- a/x-pack/plugins/cases/public/components/all_cases/translations.ts +++ b/x-pack/plugins/cases/public/components/all_cases/translations.ts @@ -34,13 +34,15 @@ export const SHOWING_SELECTED_CASES = (totalRules: number) => export const SHOWING_CASES = (totalCases: number, pageSize: number) => i18n.translate('xpack.cases.caseTable.showingCasesTitle', { values: { totalCases, pageSize }, - defaultMessage: 'Showing {pageSize} of {totalCases} {totalCases, plural, =1 {case} other {cases}}', + defaultMessage: + 'Showing {pageSize} of {totalCases} {totalCases, plural, =1 {case} other {cases}}', }); export const MAX_CASES = (totalCases: number) => i18n.translate('xpack.cases.caseTable.maxCases', { values: { totalCases }, - defaultMessage: 'The results were capped at {totalCases} to maintain performance. Try limiting your search to reduce the results.', + defaultMessage: + 'The results were capped at {totalCases} to maintain performance. Try limiting your search to reduce the results.', }); export const DISMISS = i18n.translate('xpack.cases.caseTable.dismiss', { diff --git a/x-pack/plugins/cases/public/components/all_cases/utility_bar.test.tsx b/x-pack/plugins/cases/public/components/all_cases/utility_bar.test.tsx index ab18bf1870806..4d740c2fb9552 100644 --- a/x-pack/plugins/cases/public/components/all_cases/utility_bar.test.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/utility_bar.test.tsx @@ -23,6 +23,7 @@ import { CasesTableUtilityBar } from './utility_bar'; describe('Severity form field', () => { let appMockRender: AppMockRenderer; const deselectCases = jest.fn(); + const localStorageKey = 'cases.testAppId.utilityBar.hideMaxLimitWarning'; const props = { totalCases: 5, @@ -32,7 +33,7 @@ describe('Severity form field', () => { pageIndex: 1, pageSize: 10, totalItemCount: 5, - } + }, }; beforeEach(() => { @@ -55,8 +56,8 @@ describe('Severity form field', () => { pagination: { ...props.pagination, totalItemCount: 20, - } - } + }, + }; appMockRender.render(); expect(screen.getByText('Showing 10 of 20 cases')).toBeInTheDocument(); expect(screen.getByText('Selected 1 case')).toBeInTheDocument(); @@ -70,8 +71,8 @@ describe('Severity form field', () => { ...props.pagination, pageIndex: 2, totalItemCount: 20, - } - } + }, + }; appMockRender.render(); expect(screen.getByText('Showing 10 of 20 cases')).toBeInTheDocument(); expect(screen.getByText('Selected 1 case')).toBeInTheDocument(); @@ -86,51 +87,43 @@ describe('Severity form field', () => { pageSize: 10, pageIndex: 1, totalItemCount: 0, - } - } + }, + }; appMockRender.render(); expect(screen.getByText('Showing 0 of 0 cases')).toBeInTheDocument(); }); it('opens the bulk actions correctly', async () => { - const result = appMockRender.render(); + appMockRender.render(); - act(() => { - userEvent.click(result.getByTestId('case-table-bulk-actions-link-icon')); - }); + userEvent.click(screen.getByTestId('case-table-bulk-actions-link-icon')); await waitFor(() => { - expect(result.getByTestId('case-table-bulk-actions-context-menu')); + expect(screen.getByTestId('case-table-bulk-actions-context-menu')); }); }); it('closes the bulk actions correctly', async () => { - const result = appMockRender.render(); + appMockRender.render(); - act(() => { - userEvent.click(result.getByTestId('case-table-bulk-actions-link-icon')); - }); + userEvent.click(screen.getByTestId('case-table-bulk-actions-link-icon')); await waitFor(() => { - expect(result.getByTestId('case-table-bulk-actions-context-menu')); + expect(screen.getByTestId('case-table-bulk-actions-context-menu')); }); - act(() => { - userEvent.click(result.getByTestId('case-table-bulk-actions-link-icon')); - }); + userEvent.click(screen.getByTestId('case-table-bulk-actions-link-icon')); await waitFor(() => { - expect(result.queryByTestId('case-table-bulk-actions-context-menu')).toBeFalsy(); + expect(screen.queryByTestId('case-table-bulk-actions-context-menu')).toBeFalsy(); }); }); it('refresh correctly', async () => { - const result = appMockRender.render(); + appMockRender.render(); const queryClientSpy = jest.spyOn(appMockRender.queryClient, 'invalidateQueries'); - act(() => { - userEvent.click(result.getByTestId('all-cases-refresh-link-icon')); - }); + userEvent.click(screen.getByTestId('all-cases-refresh-link-icon')); await waitFor(() => { expect(deselectCases).toHaveBeenCalled(); @@ -142,30 +135,30 @@ describe('Severity form field', () => { it('does not show the bulk actions without update & delete permissions', async () => { appMockRender = createAppMockRenderer({ permissions: noCasesPermissions() }); - const result = appMockRender.render(); + appMockRender.render(); - expect(result.queryByTestId('case-table-bulk-actions-link-icon')).toBeFalsy(); + expect(screen.queryByTestId('case-table-bulk-actions-link-icon')).toBeFalsy(); }); it('does show the bulk actions with only delete permissions', async () => { appMockRender = createAppMockRenderer({ permissions: onlyDeleteCasesPermission() }); - const result = appMockRender.render(); + appMockRender.render(); - expect(result.getByTestId('case-table-bulk-actions-link-icon')).toBeInTheDocument(); + expect(screen.getByTestId('case-table-bulk-actions-link-icon')).toBeInTheDocument(); }); it('does show the bulk actions with update permissions', async () => { appMockRender = createAppMockRenderer({ permissions: writeCasesPermissions() }); - const result = appMockRender.render(); + appMockRender.render(); - expect(result.getByTestId('case-table-bulk-actions-link-icon')).toBeInTheDocument(); + expect(screen.getByTestId('case-table-bulk-actions-link-icon')).toBeInTheDocument(); }); it('does not show the bulk actions if there are not selected cases', async () => { - const result = appMockRender.render(); + appMockRender.render(); - expect(result.queryByTestId('case-table-bulk-actions-link-icon')).toBeFalsy(); - expect(result.queryByText('Showing 0 cases')).toBeFalsy(); + expect(screen.queryByTestId('case-table-bulk-actions-link-icon')).toBeFalsy(); + expect(screen.queryByText('Showing 0 cases')).toBeFalsy(); }); describe('Maximum number of cases', () => { @@ -174,21 +167,30 @@ describe('Severity form field', () => { selectedCaseS: [], totalCases: MAX_DOCS_PER_PAGE, pagination: { - ...props.pagination, + ...props.pagination, totalItemCount: MAX_DOCS_PER_PAGE, - } + }, }; - const allCasesPageSize = [10,25,50,100]; + const allCasesPageSize = [10, 25, 50, 100]; it.each(allCasesPageSize)( `does not show warning when totalCases = ${MAX_DOCS_PER_PAGE} but pageSize(%s) * pageIndex + 1 < ${MAX_DOCS_PER_PAGE}`, (size) => { - const newPageIndex = (MAX_DOCS_PER_PAGE / size) - 2; - - console.log({size, newPageIndex}) - appMockRender.render(); - expect(screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`)).toBeInTheDocument(); + const newPageIndex = MAX_DOCS_PER_PAGE / size - 2; + + appMockRender.render( + + ); + + expect( + screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`) + ).toBeInTheDocument(); expect(screen.queryByTestId('all-cases-maximum-limit-warning')).not.toBeInTheDocument(); } ); @@ -196,11 +198,20 @@ describe('Severity form field', () => { it.each(allCasesPageSize)( `shows warning when totalCases = ${MAX_DOCS_PER_PAGE} but pageSize(%s) * pageIndex + 1 = ${MAX_DOCS_PER_PAGE}`, (size) => { - const newPageIndex = (MAX_DOCS_PER_PAGE / size) - 1; - - console.log({size, newPageIndex}) - appMockRender.render(); - expect(screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`)).toBeInTheDocument(); + const newPageIndex = MAX_DOCS_PER_PAGE / size - 1; + + appMockRender.render( + + ); + + expect( + screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`) + ).toBeInTheDocument(); expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); } ); @@ -210,11 +221,112 @@ describe('Severity form field', () => { (size) => { const newPageIndex = MAX_DOCS_PER_PAGE / size; - console.log({size, newPageIndex}) - appMockRender.render(); - expect(screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`)).toBeInTheDocument(); + appMockRender.render( + + ); + + expect( + screen.getByText(`Showing ${size} of ${MAX_DOCS_PER_PAGE} cases`) + ).toBeInTheDocument(); expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); } ); + + it('should show dismiss and do not show again buttons correctly', () => { + appMockRender.render( + + ); + + expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); + expect(screen.getByTestId('dismiss-warning')).toBeInTheDocument(); + + expect(screen.getByTestId('do-not-show-warning')).toBeInTheDocument(); + }); + + it('should dismiss warning correctly', () => { + appMockRender.render( + + ); + + expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); + expect(screen.getByTestId('dismiss-warning')).toBeInTheDocument(); + + userEvent.click(screen.getByTestId('dismiss-warning')); + + expect(screen.queryByTestId('all-cases-maximum-limit-warning')).not.toBeInTheDocument(); + }); + + describe('do not show button', () => { + beforeAll(() => { + jest.useFakeTimers(); + }); + + afterEach(() => { + jest.clearAllTimers(); + }); + + afterAll(() => { + jest.useRealTimers(); + sessionStorage.removeItem(localStorageKey); + }); + + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('should set storage key correctly', () => { + appMockRender.render( + + ); + + expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); + expect(screen.getByTestId('do-not-show-warning')).toBeInTheDocument(); + + expect(localStorage.getItem(localStorageKey)).toBe(null); + }); + + it('should hide warning correctly when do not show button clicked', () => { + appMockRender.render( + + ); + + expect(screen.getByTestId('all-cases-maximum-limit-warning')).toBeInTheDocument(); + expect(screen.getByTestId('do-not-show-warning')).toBeInTheDocument(); + + userEvent.click(screen.getByTestId('do-not-show-warning')); + + act(() => { + jest.advanceTimersByTime(1000); + }); + + expect(screen.queryByTestId('all-cases-maximum-limit-warning')).not.toBeInTheDocument(); + expect(localStorage.getItem(localStorageKey)).toBe('true'); + }); + }); }); }); diff --git a/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx b/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx index 419a91f48c469..eb84d51da8d5a 100644 --- a/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx @@ -9,6 +9,7 @@ import type { FunctionComponent } from 'react'; import { css } from '@emotion/react'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import React, { useCallback, useState } from 'react'; +import type { Pagination } from '@elastic/eui'; import { EuiButtonEmpty, EuiContextMenu, @@ -17,7 +18,6 @@ import { EuiPopover, EuiText, useEuiTheme, - Pagination, EuiCallOut, EuiSpacer, } from '@elastic/eui'; @@ -50,7 +50,10 @@ export const CasesTableUtilityBar: FunctionComponent = React.memo( const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]); const closePopover = useCallback(() => setIsPopoverOpen(false), []); - const toggleWarning = useCallback(() => setIsMessageDismissed(!isMessageDismissed), [isMessageDismissed]); + const toggleWarning = useCallback( + () => setIsMessageDismissed(!isMessageDismissed), + [isMessageDismissed] + ); const onRefresh = useCallback(() => { deselectCases(); @@ -76,20 +79,44 @@ export const CasesTableUtilityBar: FunctionComponent = React.memo( const visibleCases = totalCases > pagination.pageSize ? pagination.pageSize : totalCases; - const hasReachedMaxCases = totalCases >= MAX_DOCS_PER_PAGE && (pagination.pageSize * (pagination.pageIndex + 1)) >= MAX_DOCS_PER_PAGE; + const hasReachedMaxCases = + totalCases >= MAX_DOCS_PER_PAGE && + pagination.pageSize * (pagination.pageIndex + 1) >= MAX_DOCS_PER_PAGE; const isDoNotShowAgainSelected = localStorageWarning && localStorageWarning === true; const renderMaxLimitWarning = (): React.ReactNode => ( - {i18n.MAX_CASES(totalCases)} + + {i18n.MAX_CASES(totalCases)} + - {i18n.DISMISS} + + {i18n.DISMISS} + - {i18n.NOT_SHOW_AGAIN} + + {i18n.NOT_SHOW_AGAIN} + ); @@ -174,23 +201,22 @@ export const CasesTableUtilityBar: FunctionComponent = React.memo( {modals} {flyouts} - {hasReachedMaxCases && !isMessageDismissed && !isDoNotShowAgainSelected - ? ( - <> - - - - - - - - - ) : null} + {hasReachedMaxCases && !isMessageDismissed && !isDoNotShowAgainSelected ? ( + <> + + + + + + + + + ) : null} ); }