Skip to content

Commit

Permalink
Merge pull request #1078 from InseeFr/1075-quand-je-recherche-une-sri…
Browse files Browse the repository at this point in the history
…e-recherche-avance-le-type-dopration-slectionn-ne-reste-pas-affich-dans-le-champ

fix: type code was not initialized and back button not work on export
  • Loading branch information
PierreVasseur authored Nov 18, 2024
2 parents d75c38e + 32b6c26 commit b541dab
Show file tree
Hide file tree
Showing 5 changed files with 154 additions and 41 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import { render, screen } from '@testing-library/react';
import { Mock, vi } from 'vitest';
import { Component } from './home-container';
import {
useCollections,
useCollectionExporter,
} from '../../../utils/hooks/collections';
import { useTitle } from '../../../utils/hooks/useTitle';
import { Picker } from '../../../components';
import D from '../../../deprecated-locales/build-dictionary';

// Mock des hooks
vi.mock('../../../utils/hooks/collections', () => ({
useCollections: vi.fn(),
useCollectionExporter: vi.fn(),
}));

vi.mock('../../../utils/hooks/useTitle', () => ({
useTitle: vi.fn(),
}));

vi.mock('../../../components', () => ({
Picker: vi.fn(() => <div data-testid="picker-mock" />),
Loading: () => <div data-testid="loading-mock" />,
}));

describe('Component', () => {
beforeEach(() => {
vi.clearAllMocks();
});

it('displays the loader while loading collections', () => {
(useCollections as Mock).mockReturnValue({
data: [],
isLoading: true,
});
(useCollectionExporter as Mock).mockReturnValue({
mutate: vi.fn(),
isPending: false,
});

render(<Component />);

screen.getByTestId('loading-mock');
});

it('displays the loader during export', () => {
(useCollections as Mock).mockReturnValue({
data: [],
isLoading: false,
});
(useCollectionExporter as Mock).mockReturnValue({
mutate: vi.fn(),
isPending: true,
});

render(<Component />);

screen.getByTestId('loading-mock');
});

it('displays Picker with the correct props after loading', () => {
const collectionsMock = [{ id: 1, label: 'Collection 1' }];
(useCollections as Mock).mockReturnValue({
data: collectionsMock,
isLoading: false,
});
(useCollectionExporter as Mock).mockReturnValue({
mutate: vi.fn(),
isPending: false,
});

render(<Component />);

screen.getByTestId('picker-mock');
expect(Picker).toHaveBeenCalledWith(
expect.objectContaining({
items: collectionsMock,
title: D.exportTitle,
panelTitle: D.collectionsExportPanelTitle,
labelWarning: D.hasNotCollectionToExport,
context: 'concepts/collections',
disabled: true, // ids.length < 1
}),
{},
);
});

it('calls useTitle with the correct titles', () => {
render(<Component />);

expect(useTitle).toHaveBeenCalledWith(D.collectionsTitle, D.exportTitle);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useTitle } from '../../../utils/hooks/useTitle';

export const Component = () => {
useTitle(D.collectionsTitle, D.exportTitle);
const [ids, setIds] = useState([]);
const [ids, setIds] = useState<string[]>([]);

const { data: collections, isLoading } = useCollections();
const { mutate: exportCollection, isPending: isExporting } =
Expand All @@ -25,17 +25,18 @@ export const Component = () => {
title={D.exportTitle}
panelTitle={D.collectionsExportPanelTitle}
labelWarning={D.hasNotCollectionToExport}
handleAction={(value) => setIds(value)}
context="collections"
handleAction={(value: string[]) => setIds(value)}
context="concepts/collections"
disabled={ids.length < 1}
disabledWarningMessage={D.hasNotCollectionToExport}
ValidationButton={() => (
<ExportButtons
ids={ids}
disabled={ids.length < 1}
exportHandler={(type, withConcepts, lang = 'lg1') =>
exportCollection({ ids, type, withConcepts, lang })
}
exportHandler={(
type: string,
withConcepts: boolean,
lang: 'lg1' | 'lg2' = 'lg1',
) => exportCollection({ ids, type, withConcepts, lang })}
/>
)}
/>
Expand Down
32 changes: 7 additions & 25 deletions src/packages/modules-operations/series/search.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@ import { Select } from '../../components/select-rmes';

import D from '../../deprecated-locales';

import { CL_SOURCE_CATEGORY } from '../../redux/actions/constants/codeList';
import { OperationsApi } from '../../sdk/operations-api';
import { filterKeyDeburr } from '../../utils/array-utils';
import { useCodesList } from '../../utils/hooks/codeslist';
import { useOrganizationsOptions } from '../../utils/hooks/organizations';
import { useStamps } from '../../utils/hooks/stamps';
import { useTitle } from '../../utils/hooks/useTitle';
import useUrlQueryParameters from '../../utils/hooks/useUrlQueryParameters';
import { TypeCodeInput } from './search/typeCodeInput';

const filterLabel = filterKeyDeburr(['prefLabelLg1']);
const filterTypeCode = filterKeyDeburr(['typeCode']);
Expand All @@ -30,7 +29,7 @@ const defaultFormState = {
dataCollector: '',
};

export const SearchFormList = ({ categories, stamps, data }) => {
export const SearchFormList = ({ stamps, data }) => {
const { form, reset, handleChange } = useUrlQueryParameters(defaultFormState);

const { prefLabelLg1, typeCode, creator, publisher, dataCollector } = form;
Expand Down Expand Up @@ -97,26 +96,10 @@ export const SearchFormList = ({ categories, stamps, data }) => {
</div>
<div className="form-group row">
<div className="col-md-12">
<label htmlFor="typeOperation" className="w-100">
{D.operationType}

<Select
placeholder=""
value={
(
categories.codes.find(
(category) => category.code === typeCode,
) || {}
).value
}
options={categories?.codes?.map((cat) => {
return { value: cat.code, label: cat.labelLg1 };
})}
onChange={(value) => {
handleChange('typeCode', value);
}}
/>
</label>
<TypeCodeInput
value={typeCode}
onChange={(value) => handleChange('typeCode', value)}
/>
</div>
</div>
<div className="form-group row">
Expand Down Expand Up @@ -179,7 +162,6 @@ export const SearchFormList = ({ categories, stamps, data }) => {
export const Component = () => {
useTitle(D.seriesTitle + ' - ' + D.operationsTitle, D.advancedSearch);
const [data, setData] = useState();
const categories = useCodesList(CL_SOURCE_CATEGORY);

const { data: stamps = [] } = useStamps();

Expand All @@ -188,5 +170,5 @@ export const Component = () => {
}, []);

if (!data) return <Loading />;
return <SearchFormList data={data} categories={categories} stamps={stamps} />;
return <SearchFormList data={data} stamps={stamps} />;
};
22 changes: 13 additions & 9 deletions src/packages/modules-operations/series/search.spec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
} from '../../redux/actions/constants/codeList';
import useUrlQueryParameters from '../../utils/hooks/useUrlQueryParameters';
import { renderWithRouter } from '../../tests-utils/render';
import * as useCodesListHook from '../../utils/hooks/codeslist';

const data = [
{
Expand Down Expand Up @@ -124,9 +125,12 @@ const organisations = [
{ value: 'DG75-A040', label: 'DG75-A040' },
];
const stamps = ['DG57-C003'];
const categories = {
codes: [{ code: 'S', labelLg2: 'Survey', labelLg1: 'Enquete' }],
};

vi.spyOn(useCodesListHook, 'useCodesList').mockImplementation(() => {
return {
codes: [{ code: 'S', labelLg2: 'Survey', labelLg1: 'Enquete' }],
};
});

vi.mock('../../utils/hooks/useUrlQueryParameters');

Expand All @@ -142,7 +146,7 @@ describe('<SearchFormList />', () => {
useUrlQueryParameters.mockReturnValue({ form });

const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);
expect(container.querySelectorAll('li')).toHaveLength(6);
});
Expand All @@ -152,23 +156,23 @@ describe('<SearchFormList />', () => {
useUrlQueryParameters.mockReturnValue({ form });

const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);
expect(container.querySelectorAll('li')).toHaveLength(1);
});
it('should filter by typeCode', () => {
const form = { typeCode: 'S' };
useUrlQueryParameters.mockReturnValue({ form });
const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);
expect(container.querySelectorAll('li')).toHaveLength(3);
});
it('should filter by creators', async () => {
const form = { creator: 'DG57-C003' };
useUrlQueryParameters.mockReturnValue({ form });
const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);

expect(container.querySelectorAll('li')).toHaveLength(1);
Expand All @@ -178,7 +182,7 @@ describe('<SearchFormList />', () => {
const form = { publisher: 'Acoss' };
useUrlQueryParameters.mockReturnValue({ form });
const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);

expect(container.querySelectorAll('li')).toHaveLength(1);
Expand All @@ -188,7 +192,7 @@ describe('<SearchFormList />', () => {
const form = { dataCollector: 'DG75-A040' };
useUrlQueryParameters.mockReturnValue({ form });
const { container } = renderWithRouter(
<SearchFormList data={data} stamps={stamps} categories={categories} />,
<SearchFormList data={data} stamps={stamps} />,
);

expect(container.querySelectorAll('li')).toHaveLength(1);
Expand Down
32 changes: 32 additions & 0 deletions src/packages/modules-operations/series/search/typeCodeInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Select } from '../../../components/select-rmes';
import D from '../../../deprecated-locales';
import { Option } from '../../../model/SelectOption';
import { CL_SOURCE_CATEGORY } from '../../../redux/actions/constants/codeList';
import { useCodesList } from '../../../utils/hooks/codeslist';

type TypeCodeInputTypes = {
value: string;
onChange: (value: string) => void;
};
export const TypeCodeInput = ({
value,
onChange,
}: Readonly<TypeCodeInputTypes>) => {
const categories = useCodesList(CL_SOURCE_CATEGORY);
const options: Option[] = categories?.codes?.map((cat) => {
return { value: cat.code, label: cat.labelLg1 };
});

return (
<label className="w-100">
{D.operationType}

<Select
placeholder=""
value={value}
options={options}
onChange={onChange}
/>
</label>
);
};

0 comments on commit b541dab

Please sign in to comment.