From 06f5073fce96436c1acb9ff1537c055456f3f25b Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Wed, 17 Jul 2024 15:03:02 +0200 Subject: [PATCH] test: insights filtering (#7612) --- .../src/component/insights/Insights.test.tsx | 55 +++++++++++++++++++ frontend/src/component/insights/Insights.tsx | 31 +++++++---- .../src/component/insights/InsightsCharts.tsx | 2 +- .../component/insights/InsightsFilters.tsx | 2 +- frontend/src/utils/testRenderer.tsx | 5 +- 5 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 frontend/src/component/insights/Insights.test.tsx diff --git a/frontend/src/component/insights/Insights.test.tsx b/frontend/src/component/insights/Insights.test.tsx new file mode 100644 index 000000000000..6f40943b560d --- /dev/null +++ b/frontend/src/component/insights/Insights.test.tsx @@ -0,0 +1,55 @@ +import { render } from '../../utils/testRenderer'; +import { fireEvent, screen } from '@testing-library/react'; +import { NewInsights } from './Insights'; +import { testServerRoute, testServerSetup } from '../../utils/testServer'; +import { vi } from 'vitest'; + +const server = testServerSetup(); + +const setupApi = () => { + testServerRoute(server, '/api/admin/insights', { + users: { total: 0, active: 0, inactive: 0 }, + userTrends: [], + projectFlagTrends: [], + metricsSummaryTrends: [], + flags: { total: 0 }, + flagTrends: [], + environmentTypeTrends: [], + }); + + testServerRoute(server, '/api/admin/projects', { + projects: [ + { name: 'Project A Name', id: 'projectA' }, + { name: 'Project B Name', id: 'projectB' }, + ], + }); +}; + +const currentTime = '2024-04-25T08:05:00.000Z'; + +test('Filter insights by project and date', async () => { + vi.setSystemTime(currentTime); + setupApi(); + render(); + const addFilter = await screen.findByText('Add Filter'); + fireEvent.click(addFilter); + + const dateFromFilter = await screen.findByText('Date From'); + await screen.findByText('Date To'); + const projectFilter = await screen.findByText('Project'); + + // filter by project + fireEvent.click(projectFilter); + await screen.findByText('Project A Name'); + const projectName = await screen.findByText('Project B Name'); + await fireEvent.click(projectName); + expect(window.location.href).toContain('project=IS%3AprojectB'); + + // filter by from date + fireEvent.click(dateFromFilter); + const day = await screen.findByText('25'); + fireEvent.click(day); + expect(window.location.href).toContain( + 'project=IS%3AprojectB&from=IS%3A2024-04-25', + ); +}); diff --git a/frontend/src/component/insights/Insights.tsx b/frontend/src/component/insights/Insights.tsx index f76a79581235..3f0cd6151e63 100644 --- a/frontend/src/component/insights/Insights.tsx +++ b/frontend/src/component/insights/Insights.tsx @@ -9,7 +9,7 @@ import { import { useInsights } from 'hooks/api/getters/useInsights/useInsights'; import { InsightsHeader } from './components/InsightsHeader/InsightsHeader'; import { useInsightsData } from './hooks/useInsightsData'; -import { InsightsCharts } from './InsightsCharts'; +import { type IChartsProps, InsightsCharts } from './InsightsCharts'; import { LegacyInsightsCharts } from './LegacyInsightsCharts'; import { useUiFlag } from 'hooks/useUiFlag'; import { Sticky } from 'component/common/Sticky/Sticky'; @@ -105,11 +105,15 @@ const LegacyInsights: FC = () => { ); }; -const NewInsights = () => { +interface InsightsProps { + ChartComponent?: FC; +} + +export const NewInsights: FC = ({ ChartComponent }) => { const [scrolled, setScrolled] = useState(false); const stateConfig = { - projects: FilterItemParam, + project: FilterItemParam, from: FilterItemParam, to: FilterItemParam, }; @@ -119,7 +123,7 @@ const NewInsights = () => { state.to?.values[0], ); - const projects = state.projects?.values ?? [allOption.id]; + const projects = state.project?.values ?? [allOption.id]; const insightsData = useInsightsData(insights, projects); @@ -137,18 +141,20 @@ const NewInsights = () => { return ( - + } /> - - + + {ChartComponent && ( + + )} ); }; @@ -156,7 +162,8 @@ const NewInsights = () => { export const Insights: FC = () => { const isInsightsV2Enabled = useUiFlag('insightsV2'); - if (isInsightsV2Enabled) return ; + if (isInsightsV2Enabled) + return ; return ; }; diff --git a/frontend/src/component/insights/InsightsCharts.tsx b/frontend/src/component/insights/InsightsCharts.tsx index 24ff00ddeda1..32487b3fa213 100644 --- a/frontend/src/component/insights/InsightsCharts.tsx +++ b/frontend/src/component/insights/InsightsCharts.tsx @@ -24,7 +24,7 @@ import { allOption } from 'component/common/ProjectSelect/ProjectSelect'; import { chartInfo } from './chart-info'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; -interface IChartsProps { +export interface IChartsProps { flags: InstanceInsightsSchema['flags']; flagTrends: InstanceInsightsSchema['flagTrends']; projectsData: InstanceInsightsSchema['projectFlagTrends']; diff --git a/frontend/src/component/insights/InsightsFilters.tsx b/frontend/src/component/insights/InsightsFilters.tsx index 375226c1fd70..99ecb9a3114c 100644 --- a/frontend/src/component/insights/InsightsFilters.tsx +++ b/frontend/src/component/insights/InsightsFilters.tsx @@ -48,7 +48,7 @@ export const InsightsFilters: FC = ({ label: 'Project', icon: 'topic', options: projectsOptions, - filterKey: 'projects', + filterKey: 'project', singularOperators: ['IS'], pluralOperators: ['IS_ANY_OF'], }, diff --git a/frontend/src/utils/testRenderer.tsx b/frontend/src/utils/testRenderer.tsx index bd0ecd063731..1b578f34abf4 100644 --- a/frontend/src/utils/testRenderer.tsx +++ b/frontend/src/utils/testRenderer.tsx @@ -13,6 +13,7 @@ import { UIProviderContainer } from '../component/providers/UIProvider/UIProvide import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6'; import { QueryParamProvider } from 'use-query-params'; import { FeedbackProvider } from 'component/feedbackNew/FeedbackProvider'; +import { StickyProvider } from 'component/common/Sticky/StickyProvider'; export const render = ( ui: JSX.Element, @@ -48,7 +49,9 @@ export const render = ( - {children} + + {children} +