Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: test filter date item (#5576)

Browse Source
This commit is contained in:
Jaanus Sellin 2023-12-11 12:22:00 +02:00 committed by GitHub
parent 879e4c98e5
commit 5d80f5fa4d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 115 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/component/common/FilterDateItem/FilterDateItem.test.tsx Normal file
View File

@ -0,0 +1,81 @@
import { screen } from '@testing-library/react';
import { render } from 'utils/testRenderer';
import { vi } from 'vitest';
import { FilterItemParams } from '../FilterItem/FilterItem';
import { FilterDateItem, IFilterDateItemProps } from './FilterDateItem';
const getDate = (option: string) => screen.getByText(option);
const setup = (initialState: FilterItemParams) => {
const recordedChanges: FilterItemParams[] = [];
const mockProps: IFilterDateItemProps = {
label: 'Test Label',
onChange: (value: FilterItemParams) => {
recordedChanges.push(value);
},
onChipClose: () => {},
operators: ['IS_ON_OR_AFTER', 'IS_BEFORE'],
state: initialState,
};
render(<FilterDateItem {...mockProps} />);
return recordedChanges;
};
afterEach(() => {
vi.restoreAllMocks();
});
describe('FilterDateItem Component', () => {
it('renders initial state correctly', async () => {
const mockState = {
operator: 'IS_ON_OR_AFTER',
values: ['2015-01-21'],
};
const recordedChanges = setup(mockState);
const valuesElement = await screen.findByText('01/21/2015');
await screen.findByText('is on or after');
expect(valuesElement).toBeInTheDocument();
valuesElement.click();
const selectedDate = getDate('21');
expect(selectedDate).toHaveAttribute('aria-selected', 'true');
getDate('22').click();
expect(recordedChanges).toEqual([
{
operator: 'IS_ON_OR_AFTER',
values: ['2015-01-22'],
},
]);
});
it('switches operator', async () => {
const mockState = {
operator: 'IS_ON_OR_AFTER',
values: ['2020-01-01'],
};
const recordedChanges = setup(mockState);
const operatorsElement = await screen.findByText('is on or after');
operatorsElement.click();
const newOperator = await screen.findByText('is before');
newOperator.click();
expect(recordedChanges).toEqual([
{
operator: 'IS_BEFORE',
values: ['2020-01-01'],
},
]);
});
});

30
frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
View File

@ -2,18 +2,18 @@ import { Box } from '@mui/material';
import React, { FC, useEffect, useRef, useState } from 'react';
import { StyledPopover } from '../FilterItem/FilterItem.styles';
import { FilterItemChip } from '../FilterItem/FilterItemChip/FilterItemChip';
import { FilterItem } from '../FilterItem/FilterItem';
import { DateCalendar, LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { format } from 'date-fns';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { getLocalizedDateString } from '../util';
import { FilterItemParams } from '../FilterItem/FilterItem';
interface IFilterDateItemProps {
export interface IFilterDateItemProps {
label: string;
onChange: (value: FilterItem | undefined) => void;
onChange: (value: FilterItemParams) => void;
onChipClose: () => void;
state: FilterItem | null | undefined;
state: FilterItemParams | null | undefined;
operators: [string, ...string[]];
}
@ -47,16 +47,11 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
const selectedDate = state ? new Date(state.values[0]) : null;
const currentOperator = state ? state.operator : operators[0];
const onDelete = () => {
onChange(undefined);
onChange({ operator: operators[0], values: [] });
onClose();
onChipClose();
};
const setValue = (value: Date | null) => {
const formattedValue = value ? format(value, 'yyyy-MM-dd') : '';
onChange({ operator: currentOperator, values: [formattedValue] });
};
useEffect(() => {
if (state && !operators.includes(state.operator)) {
onChange({
@ -77,7 +72,10 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
operator={currentOperator}
operatorOptions={operators}
onChangeOperator={(operator) => {
onChange({ operator, values: selectedOptions ?? [] });
const formattedValue = selectedDate
? format(selectedDate, 'yyyy-MM-dd')
: '';
onChange({ operator, values: [formattedValue] ?? [] });
}}
/>
</Box>
@ -98,7 +96,15 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
<DateCalendar
displayWeekNumber
value={selectedDate}
onChange={(newValue) => setValue(newValue)}
onChange={(value) => {
const formattedValue = value
? format(value, 'yyyy-MM-dd')
: '';
onChange({
operator: currentOperator,
values: [formattedValue],
});
}}
/>
</LocalizationProvider>
</StyledPopover>

8
frontend/src/component/common/FilterItem/FilterItem.test.tsx
View File

@ -1,12 +1,12 @@
import { screen } from '@testing-library/react';
import { render } from 'utils/testRenderer';
import { FilterItem, IFilterItemProps } from './FilterItem';
import { FilterItem, FilterItemParams, IFilterItemProps } from './FilterItem';
const getOption = (option: string) =>
screen.getByText(option).closest('li')!.querySelector('input')!;
const setup = (initialState: FilterItem) => {
const recordedChanges: FilterItem[] = [];
const setup = (initialState: FilterItemParams) => {
const recordedChanges: FilterItemParams[] = [];
const mockProps: IFilterItemProps = {
label: 'Test Label',
options: [
@ -23,7 +23,7 @@ const setup = (initialState: FilterItem) => {
value: '3',
},
],
onChange: (value: FilterItem) => {
onChange: (value: FilterItemParams) => {
recordedChanges.push(value);
},
onChipClose: () => {},

6
frontend/src/component/common/FilterItem/FilterItem.tsx
View File

@ -13,14 +13,14 @@ import { FilterItemChip } from './FilterItemChip/FilterItemChip';
export interface IFilterItemProps {
label: string;
options: Array<{ label: string; value: string }>;
onChange: (value: FilterItem) => void;
onChange: (value: FilterItemParams) => void;
onChipClose: () => void;
state: FilterItem | null | undefined;
state: FilterItemParams | null | undefined;
singularOperators: [string, ...string[]];
pluralOperators: [string, ...string[]];
}
export type FilterItem = {
export type FilterItemParams = {
operator: string;
values: string[];
};

15
frontend/src/component/feature/FeatureToggleList/FeatureToggleFilters/FeatureToggleFilters.tsx
View File

@ -1,11 +1,14 @@
import { useEffect, useState, VFC } from 'react';
import { Box, styled } from '@mui/material';
import { FilterItem } from 'component/common/FilterItem/FilterItem';
import useProjects from 'hooks/api/getters/useProjects/useProjects';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import AddFilterButton from './AddFilterButton';
import { useSegments } from 'hooks/api/getters/useSegments/useSegments';
import { FilterDateItem } from '../../../common/FilterDateItem/FilterDateItem';
import { FilterDateItem } from 'component/common/FilterDateItem/FilterDateItem';
import {
FilterItem,
FilterItemParams,
} from 'component/common/FilterItem/FilterItem';
const StyledBox = styled(Box)(({ theme }) => ({
display: 'flex',
@ -14,10 +17,10 @@ const StyledBox = styled(Box)(({ theme }) => ({
}));
export type FeatureTogglesListFilters = {
project?: FilterItem | null | undefined;
state?: FilterItem | null | undefined;
segment?: FilterItem | null | undefined;
createdAt?: FilterItem | null | undefined;
project?: FilterItemParams | null | undefined;
state?: FilterItemParams | null | undefined;
segment?: FilterItemParams | null | undefined;
createdAt?: FilterItemParams | null | undefined;
};
interface IFeatureToggleFiltersProps {