From 5d269efa33d6fe38791b0a572b06d27896df909c Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Sun, 28 May 2023 21:26:09 +0300 Subject: [PATCH] feat: segment usage ui test (#3872) --- frontend/src/component/menu/routes.ts | 2 +- .../ProjectSegments/ProjectSegments.tsx | 2 +- .../SegmentTable/SegmentTable.test.tsx | 44 +++++++++++++++++++ .../{ => SegmentTable}/SegmentTable.tsx | 13 ++---- 4 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx rename frontend/src/component/segments/{ => SegmentTable}/SegmentTable.tsx (96%) diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index 409618e1a5..6cfb5de0cd 100644 --- a/frontend/src/component/menu/routes.ts +++ b/frontend/src/component/menu/routes.ts @@ -34,7 +34,7 @@ import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment'; import { EditSegment } from 'component/segments/EditSegment/EditSegment'; import { INavigationMenuItem, IRoute } from 'interfaces/route'; import { EnvironmentTable } from 'component/environments/EnvironmentTable/EnvironmentTable'; -import { SegmentTable } from 'component/segments/SegmentTable'; +import { SegmentTable } from '../segments/SegmentTable/SegmentTable'; import { FeaturesArchiveTable } from '../archive/FeaturesArchiveTable'; import { LazyPlayground } from 'component/playground/Playground/LazyPlayground'; import { Profile } from 'component/user/Profile/Profile'; diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx index 90c9449f62..235f78be0a 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectSegments/ProjectSegments.tsx @@ -4,7 +4,7 @@ import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import { usePageTitle } from 'hooks/usePageTitle'; import { useProjectNameOrId } from 'hooks/api/getters/useProject/useProject'; -import { SegmentTable } from 'component/segments/SegmentTable'; +import { SegmentTable } from 'component/segments/SegmentTable/SegmentTable'; import { PremiumFeature } from 'component/common/PremiumFeature/PremiumFeature'; import { Route, Routes, useNavigate } from 'react-router-dom'; import { CreateSegment } from 'component/segments/CreateSegment/CreateSegment'; diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx new file mode 100644 index 0000000000..30dd6fc0fa --- /dev/null +++ b/frontend/src/component/segments/SegmentTable/SegmentTable.test.tsx @@ -0,0 +1,44 @@ +import { render } from '../../../utils/testRenderer'; +import { screen } from '@testing-library/react'; +import React from 'react'; +import { SegmentTable } from './SegmentTable'; +import { testServerRoute, testServerSetup } from '../../../utils/testServer'; +import { UIProviderContainer } from '../../providers/UIProvider/UIProviderContainer'; + +const server = testServerSetup(); + +const setupRoutes = () => { + testServerRoute(server, 'api/admin/segments', { + segments: [ + { + id: 2, + name: 'test2', + description: '', + usedInProjects: 3, + usedInFeatures: 2, + constraints: [], + createdBy: 'admin', + createdAt: '2023-05-24T06:23:07.797Z', + }, + ], + }); + testServerRoute(server, '/api/admin/ui-config', { + flags: { + SE: true, + segmentContextFieldUsage: true, + }, + }); +}; + +test('should show the count of projects and features used in', async () => { + setupRoutes(); + + render( + + + + ); + + await screen.findByText('2 feature toggles'); + await screen.findByText('3 projects'); +}); diff --git a/frontend/src/component/segments/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx similarity index 96% rename from frontend/src/component/segments/SegmentTable.tsx rename to frontend/src/component/segments/SegmentTable/SegmentTable.tsx index 24ee0ef9ba..1bedb3d998 100644 --- a/frontend/src/component/segments/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx @@ -11,13 +11,7 @@ import { import { useTable, useGlobalFilter, useSortBy } from 'react-table'; import { CreateSegmentButton } from 'component/segments/CreateSegmentButton/CreateSegmentButton'; import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightContext/SearchHighlightContext'; -import { - Box, - Checkbox, - styled, - Typography, - useMediaQuery, -} from '@mui/material'; +import { Box, useMediaQuery } from '@mui/material'; import { sortTypes } from 'utils/sortTypes'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; import { useMemo, useState } from 'react'; @@ -34,8 +28,7 @@ import { Search } from 'component/common/Search/Search'; import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns'; import { TextCell } from 'component/common/Table/cells/TextCell/TextCell'; import { useOptionalPathParam } from 'hooks/useOptionalPathParam'; -import { RowSelectCell } from '../project/Project/ProjectFeatureToggles/RowSelectCell/RowSelectCell'; -import useUiConfig from '../../hooks/api/getters/useUiConfig/useUiConfig'; +import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; export const SegmentTable = () => { const projectId = useOptionalPathParam('projectId'); @@ -212,7 +205,7 @@ const getColumns = (segmentContextFieldUsage?: boolean) => [ { Header: 'Used in', width: '60%', - Cell: ({ value, row: { original } }: any) => ( + Cell: ({ row: { original } }: any) => (