From 5c27e7501482799dd9d637df551bd3b05bd3e871 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Mon, 6 May 2024 15:00:53 +0200 Subject: [PATCH] test: move 2 table tests from cypress to rtl (#6984) --- .../integration/projects/overview.spec.ts | 79 ------------------- .../ProjectFeatureToggles.test.tsx | 60 ++++++++++++++ .../ProjectFeatureToggles.tsx | 16 ---- 3 files changed, 60 insertions(+), 95 deletions(-) create mode 100644 frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx diff --git a/frontend/cypress/integration/projects/overview.spec.ts b/frontend/cypress/integration/projects/overview.spec.ts index 0b733b6368..422cd33632 100644 --- a/frontend/cypress/integration/projects/overview.spec.ts +++ b/frontend/cypress/integration/projects/overview.spec.ts @@ -1,8 +1,6 @@ /// import { BATCH_ACTIONS_BAR, - BATCH_SELECT, - BATCH_SELECTED_COUNT, MORE_BATCH_ACTIONS, SEARCH_INPUT, //@ts-ignore @@ -44,83 +42,6 @@ describe('project overview', () => { cy.deleteProject_API(projectName); }); - it('loads the table', () => { - cy.login_UI(); - cy.createFeature_API(`${featureToggleName}-A`, projectName); - cy.createFeature_API(`${featureToggleName}-B`, projectName); - cy.visit(`/projects/${projectName}`); - - // Use search to filter feature toggles and check that the feature toggle is listed in the table. - cy.get(`[data-testid="${SEARCH_INPUT}"]`).as('search').click(); - cy.get('@search').type(featureToggleName); - cy.get('table').contains('td', `${featureToggleName}-A`); - cy.get('table tbody tr').should((elements) => { - expect(elements).to.have.length.at.least(2); - }); - }); - - it('can select and deselect feature toggles', () => { - cy.login_UI(); - cy.visit(`/projects/${projectName}`); - cy.viewport(1920, 1080); - cy.get(`[data-testid="${SEARCH_INPUT}"]`).as('search').click(); - cy.get('@search').type(featureToggleName); - cy.get('body').type('{esc}'); - cy.get('table tbody tr').should((elements) => { - expect(elements).to.have.length.at.least(2); - }); - const counter = `[data-testid="${BATCH_SELECTED_COUNT}"]`; - - cy.get(counter).should('not.exist'); - cy.get(selectAll).click(); - cy.get(counter) - .invoke('text') - .then((text) => { - const number = Number.parseFloat(text); - expect(number).to.be.at.least(2); - }); - cy.get(selectAll).click(); - cy.get(counter).should('not.exist'); - - cy.get('table td') - .contains(`${featureToggleName}-A`) - .closest('tr') - .find(`[data-testid="${BATCH_SELECT}"] input[type="checkbox"]`) - .click(); - cy.get(counter).contains('1'); - - cy.get('table td') - .contains(`${featureToggleName}-A`) - .closest('tr') - .find(`[data-testid="${BATCH_SELECT}"] input[type="checkbox"]`) - .click(); - cy.get(counter).should('not.exist'); - cy.get('table td') - .contains(`${featureToggleName}-B`) - .closest('tr') - .find(`[data-testid="${BATCH_SELECT}"] input[type="checkbox"]`) - .click(); - cy.get(counter).contains('1'); - - cy.get('table td') - .contains(`${featureToggleName}-A`) - .closest('tr') - .find(`[data-testid="${BATCH_SELECT}"] input[type="checkbox"]`) - .click(); - cy.get(counter) - .invoke('text') - .then((text) => { - const number = Number.parseFloat(text); - expect(number).to.be.at.least(2); - }); - cy.get('table td') - .contains(`${featureToggleName}-B`) - .closest('tr') - .find(`[data-testid="${BATCH_SELECT}"] input[type="checkbox"]`) - .click(); - cy.get(counter).contains('1'); - }); - it('can mark selected togggles as stale', () => { cy.login_UI(); cy.visit(`/projects/${projectName}`); diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx new file mode 100644 index 0000000000..e8bb40b256 --- /dev/null +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.test.tsx @@ -0,0 +1,60 @@ +import { render } from 'utils/testRenderer'; +import { Route, Routes } from 'react-router-dom'; +import { ProjectFeatureToggles } from './ProjectFeatureToggles'; +import { testServerRoute, testServerSetup } from 'utils/testServer'; +import { screen } from '@testing-library/react'; +import { BATCH_SELECTED_COUNT } from 'utils/testIds'; + +const server = testServerSetup(); + +const setupApi = () => { + const features = [{ name: 'featureA' }, { name: 'featureB' }]; + testServerRoute(server, '/api/admin/search/features', { + features, + total: features.length, + }); + testServerRoute(server, '/api/admin/ui-config', {}); +}; + +test('selects project features', async () => { + setupApi(); + render( + + + } + /> + , + { + route: '/projects/default', + }, + ); + await screen.findByText('featureA'); + await screen.findByText('featureB'); + await screen.findByText('Feature toggles (2)'); + + const [selectAll, selectFeatureA, selectFeatureB] = + screen.queryAllByRole('checkbox'); + + // batch select + selectAll.click(); + let selectedCount = screen.getByTestId(BATCH_SELECTED_COUNT); + expect(selectedCount.textContent).toBe('2'); + + // batch deselect + selectAll.click(); + expect(screen.queryByTestId(BATCH_SELECTED_COUNT)).not.toBeInTheDocument(); + + // select a single item + selectFeatureA.click(); + selectedCount = screen.getByTestId(BATCH_SELECTED_COUNT); + expect(selectedCount.textContent).toBe('1'); + + // deselect a single item + selectFeatureA.click(); + expect(screen.queryByTestId(BATCH_SELECTED_COUNT)).not.toBeInTheDocument(); +}); diff --git a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx index 16d340d414..b8489ad74f 100644 --- a/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx +++ b/frontend/src/component/project/Project/PaginatedProjectFeatureToggles/ProjectFeatureToggles.tsx @@ -10,7 +10,6 @@ import { FavoriteIconCell } from 'component/common/Table/cells/FavoriteIconCell/ import { ActionsCell } from '../ProjectFeatureToggles/ActionsCell/ActionsCell'; import { ExperimentalColumnsMenu as ColumnsMenu } from './ExperimentalColumnsMenu/ExperimentalColumnsMenu'; import { useFavoriteFeaturesApi } from 'hooks/api/actions/useFavoriteFeaturesApi/useFavoriteFeaturesApi'; -import { ExportDialog } from 'component/feature/FeatureToggleList/ExportDialog'; import { MemoizedRowSelectCell } from '../ProjectFeatureToggles/RowSelectCell/RowSelectCell'; import { BatchSelectionActionsBar } from 'component/common/BatchSelectionActionsBar/BatchSelectionActionsBar'; import { ProjectFeaturesBatchActions } from '../ProjectFeatureToggles/ProjectFeaturesBatchActions/ProjectFeaturesBatchActions'; @@ -44,7 +43,6 @@ import { ProjectOverviewFilters } from './ProjectOverviewFilters'; import { useDefaultColumnVisibility } from './hooks/useDefaultColumnVisibility'; import { TableEmptyState } from './TableEmptyState/TableEmptyState'; import { useRowActions } from './hooks/useRowActions'; -import { useUiFlag } from 'hooks/useUiFlag'; import { useSelectedData } from './hooks/useSelectedData'; import { FeatureOverviewCell } from '../../../common/Table/cells/FeatureOverviewCell/FeatureOverviewCell'; @@ -67,8 +65,6 @@ export const ProjectFeatureToggles = ({ }: IPaginatedProjectFeatureTogglesProps) => { const projectId = useRequiredPathParam('projectId'); - const featuresExportImport = useUiFlag('featuresExportImport'); - const stateConfig = { offset: withDefault(NumberParam, 0), limit: withDefault(NumberParam, DEFAULT_PAGE_LIMIT), @@ -439,18 +435,6 @@ export const ProjectFeatureToggles = ({ /> {rowActionsDialogs} - setShowExportDialog(false)} - environments={environments} - /> - } - /> {featureToggleModals}