test: move 2 table tests from cypress to rtl (#6984)

frontend/cypress/integration/projects/overview.spec.ts

@@ -1,8 +1,6 @@
 ///<reference path="../../global.d.ts" />
 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}`);

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(
+        <Routes>
+            <Route
+                path={'/projects/:projectId'}
+                element={
+                    <ProjectFeatureToggles
+                        environments={['development', 'production']}
+                    />
+                }
+            />
+        </Routes>,
+        {
+            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();
+});

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}
 
-                    <ConditionallyRender
-                        condition={featuresExportImport && !loading}
-                        show={
-                            // TODO: `export all` backend
-                            <ExportDialog
-                                showExportDialog={showExportDialog}
-                                data={data}
-                                onClose={() => setShowExportDialog(false)}
-                                environments={environments}
-                            />
-                        }
-                    />
                     {featureToggleModals}
                 </div>
             </PageContent>