diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.test.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.test.tsx new file mode 100644 index 0000000000..ee54ecad2b --- /dev/null +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.test.tsx @@ -0,0 +1,140 @@ +import { screen } from '@testing-library/react'; +import { render } from 'utils/testRenderer'; +import { testServerRoute, testServerSetup } from 'utils/testServer'; +import { FeatureToggleListTable } from './FeatureToggleListTable'; + +type APIFeature = { + name: string; + segments: string[]; + tags: { type: string; value: string }[]; + createdAt: string; + project: string; + stale: boolean; +}; + +type APIProject = { + name: string; + id: string; +}; + +type UIFeature = { + name: string; + segments: string; + tags: string; + createdAt: string; + project: string; + state: string; +}; + +const server = testServerSetup(); + +const setupNoFeaturesReturned = () => + testServerRoute(server, '/api/admin/search/features', { + features: [], + }); + +const setupApi = (features: APIFeature[], projects: APIProject[]) => { + testServerRoute(server, '/api/admin/ui-config', {}); + + testServerRoute(server, '/api/admin/projects', { + projects, + }); + + testServerRoute(server, '/api/admin/environments', { + environments: [ + { + name: 'development', + enabled: true, + }, + { + name: 'production', + enabled: true, + }, + ], + }); + + testServerRoute(server, '/api/admin/segments', {}); + + testServerRoute(server, '/api/admin/tags', {}); + + testServerRoute(server, '/api/admin/feature-types', {}); + + testServerRoute(server, '/api/admin/search/features', { + features: features.map((feature) => ({ + type: 'experiment', + project: feature.project, + favorite: false, + name: feature.name, + createdAt: feature.createdAt, + stale: feature.stale, + lastSeenAt: null, + environments: [], + segments: feature.segments, + tags: feature.tags, + })), + }); +}; + +const verifyTableFeature = async (feature: UIFeature) => { + await screen.findByText('Feature toggles'); + await screen.findByText('Add Filter'); + Object.values(feature).forEach((value) => { + expect(screen.getByText(value)).toBeInTheDocument(); + }); +}; + +const filterFeaturesByProject = async (projectName: string) => { + const addFilterButton = screen.getByText('Add Filter'); + addFilterButton.click(); + + const projectItem = await screen.findByText('Project'); + projectItem.click(); + + await screen.findByPlaceholderText('Search'); + const anotherProjectCheckbox = await screen.findByText(projectName); + + anotherProjectCheckbox.click(); +}; + +test('Filter table by project', async () => { + setupApi( + [ + { + name: 'Operational Feature', + createdAt: '2023-11-03T10:19:37.978Z', + stale: false, + project: 'project-a', + tags: [{ type: 'simple', value: 'new' }], + segments: ['project segment'], + }, + ], + [ + { + name: 'Project A', + id: 'project-a', + }, + { + name: 'Project B', + id: 'project-b', + }, + ], + ); + render(); + + await verifyTableFeature({ + name: 'Operational Feature', + createdAt: '11/03/2023', + segments: '1 segment', + tags: '1 tag', + project: 'project-a', + state: 'Active', + }); + + setupNoFeaturesReturned(); + await filterFeaturesByProject('Project B'); + + await screen.findByText( + 'No feature toggles available. Get started by adding a new feature toggle.', + ); + expect(window.location.href).toContain('?columns=&project=IS%3Aproject-b'); +});