From b850a5d4d256ccead03b70170a6b79cdb01c8cd6 Mon Sep 17 00:00:00 2001 From: Birk Johansson Date: Tue, 17 Dec 2024 16:02:11 +0100 Subject: [PATCH] test: add tests for modelsingleselect --- .../ModelSingleSelect.test.tsx | 357 ++++++++++++++++++ 1 file changed, 357 insertions(+) create mode 100644 src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx new file mode 100644 index 00000000..b6a9276d --- /dev/null +++ b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.test.tsx @@ -0,0 +1,357 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { render, fireEvent, waitFor } from '@testing-library/react' +import React from 'react' +import { ComponentWithProvider } from '../../../testUtils/TestComponentWithRouter' +import { ModelSingleSelect } from './ModelSingleSelect' +import { PlainResourceQuery, ResultQuery } from '../../../types' +const categoryCombos = [ + { + displayName: 'Births', + id: 'm2jTvAj5kkm', + }, + { + displayName: 'Commodities', + id: 'gbvX3pogf7p', + }, + { + displayName: 'Fixed/Outreach', + id: 'KYYSTxeVw28', + }, + { + displayName: 'Gender', + id: 'dPmavA0qloX', + }, + { + displayName: 'HIV age', + id: 'Wfan7UwK8CQ', + }, + { + displayName: 'HIV age+gender', + id: 'jCNGsC2NawV', + }, + { + displayName: 'HIV Paed age+gender', + id: 'v1K6CE6bmtw', + }, + { + displayName: 'Implementing Partner', + id: 'nM3u9s5a52V', + }, + { + displayName: 'Implementing Partner and Projects', + id: 'O4VaNks6tta', + }, + { + displayName: 'Location and age group', + id: 'dzjKKQq0cSO', + }, + { + displayName: 'Maternal deaths', + id: 'sgoeVsAbF4r', + }, + { + displayName: 'Morbidity Age', + id: 'pbvcDRasDav', + }, + { + displayName: 'Morbidity Cases', + id: 't3aNCvHsoSn', + }, + { + displayName: 'Morbidity Referrals', + id: 'ck7mRNwGDjP', + }, + { + displayName: 'Pregnancy complications', + id: 'Hz71pt7Eb3e', + }, + { + displayName: 'Project', + id: 'idcDPkDtepR', + }, + { + displayName: 'Rural and Urban', + id: 'DJXmyhnquyI', + }, + { + displayName: 'Staffing', + id: 'aN8uN5b15YG', + }, + { + displayName: 'Stock discarded', + id: 'WA3HunbaGt0', + }, + { + displayName: 'Target vs Result', + id: 'WBW7RjsApsv', + }, + { + displayName: 'TT', + id: 'arTwh07V6qz', + }, + { + displayName: 'Under 5/5 and above', + id: 'UnNIOt1uB0J', + }, +] + +const categoryCombosResolver = (type: string, query: PlainResourceQuery) => { + const { id } = query + if (id) { + const categoryCombo = categoryCombos.find((cc) => id === cc.id) + return Promise.resolve(categoryCombo) + } + + return Promise.resolve({ + categoryCombos, + pager: { + page: 1, + total: 23, + pageSize: 50, + pageCount: 1, + }, + }) +} + +// Exporting this so other tests which render this component +// don't have to mock this, too +export const dataResolvers = { + categoryCombos: categoryCombosResolver, +} + +describe('', () => { + const categoryComboQuery = { + resource: 'categoryCombos', + } + + it('should render all options', async () => { + const onChange = jest.fn() + const result = render( + + + + ) + + const selectInput = result.getByTestId('dhis2-uicore-select-input') + fireEvent.click(selectInput) + + for (let i = 0; i < categoryCombos.length; ++i) { + const categoryCombo = categoryCombos[i] + const selectOptions = await result.findByText( + categoryCombo.displayName, + { selector: '[data-test="dhis2-uicore-singleselectoption"]' } + ) + expect(selectOptions).toBeTruthy() + } + // const noneOption = await result.findByText('None', { + // selector: '[data-test="dhis2-uicore-singleselectoption"]', + // }) + // expect(noneOption).toBeInTheDocument() + }) + + // it('should add an "empty" option when not required', async () => { + // const onChange = jest.fn() + // const dataResolvers = { + // categoryCombos: categoryCombosResolver, + // } + + // const result = render( + // + // + // + // ) + + // const selectInput = result.getByTestId('dhis2-uicore-select-input') + // fireEvent.click(selectInput) + + // const noneLabel = await result.findByText('None', { + // selector: '[data-test="dhis2-uicore-singleselectoption"]', + // }) + // const selectedLabel = await result.findByText(/No value/, { + // selector: '[data-test="dhis2-uicore-singleselectoption"]', + // }) + + // expect(noneLabel).toBeInTheDocument() + // expect(selectedLabel).toBeInTheDocument() + // // We'd find a single option if we didn't wait for this. The test would + // // subsequently fail as there'd be exactly one categoryCombo option + // await waitFor(() => { + // const allOptions = result.getAllByTestId( + // 'dhis2-uicore-singleselectoption' + // ) + + // expect(allOptions).toHaveLength(categoryCombos.length + 2) + // }) + // }) + + // it('should not add an "empty" option when not required', async () => { + // const onChange = jest.fn() + // const dataResolvers = { + // categoryCombos: categoryCombosResolver, + // } + + // const result = render( + // + // + // + // ) + + // const selectInput = result.getByTestId('dhis2-uicore-select-input') + // fireEvent.click(selectInput) + + // // We'd find a single option if we didn't wait for this. The test would + // // subsequently fail as there'd be exactly one categoryCombo option + // await waitFor(() => { + // const allOptions = result.getAllByTestId( + // 'dhis2-uicore-singleselectoption' + // ) + + // expect(allOptions).toHaveLength(categoryCombos.length + 1) + // }) + // }) + + it('should display the selected option, even when not loaded', async () => { + const onChange = jest.fn() + const dataResolvers = { + categoryCombos: categoryCombosResolver, + } + const selectedNotInData = { + id: 't3aNClHsoSn', + displayName: 'Quizzes attended+age', + } + + const result = render( + + + + ) + + const selectedLabel = await result.findByText(selectedNotInData.displayName, { + selector: '.root', + }) + expect(selectedLabel).toBeTruthy() + }) + + it('should load the displayName if selected does not include it', async () => { + const onChange = jest.fn() + const dataResolvers = { + categoryCombos: categoryCombosResolver, + } + const catComboWithoutDisplayName = { + id: categoryCombos[0].id, + } + + const result = render( + + + + ) + + await waitFor(() => { + // should call onChange when it resolves the displayName + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith({ + id: catComboWithoutDisplayName.id, + displayName: categoryCombos[0].displayName, + }) + }) + // const selectInput = result.getByTestId('dhis2-uicore-select-input') + // fireEvent.click(selectInput) + + const selectedLabel = await result.findByText('Births', { + selector: '.root', + }) + expect(selectedLabel).toBeTruthy() + }) + + it('should call the onChange handler with the newly selected value', async () => { + const onChange = jest.fn() + const dataResolvers = { + categoryCombos: categoryCombosResolver, + } + + const result = render( + + + + ) + + const selectInput = result.getByTestId('dhis2-uicore-select-input') + fireEvent.click(selectInput) + + const selectedLabel = await result.findByText('Births', { + selector: '[data-test="dhis2-uicore-singleselectoption"]', + }) + fireEvent.click(selectedLabel) + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith({ + id: 'm2jTvAj5kkm', + displayName: 'Births', + }) + }) + + it('should pass the entire loaded model as parameter in onChange', async () => { + const onChange = jest.fn() + const dataResolver = { + categoryCombos: async () => { + return Promise.resolve({ + categoryCombos: categoryCombos.map((c) => ({ + ...c, + dataDimensionType: 'DISAGGREGATION', + })), + pager: { + page: 1, + total: 23, + pageSize: 50, + pageCount: 1, + }, + }) + }, + } + const categoryComboQueryWithDimensionType = { + resource: 'categoryCombos', + params: { + fields: ['id', 'displayName', 'dataDimensionType'], + }, + } + + const result = render( + + + + ) + + const selectInput = result.getByTestId('dhis2-uicore-select-input') + fireEvent.click(selectInput) + + const selectedLabel = await result.findByText('Births', { + selector: '[data-test="dhis2-uicore-singleselectoption"]', + }) + fireEvent.click(selectedLabel) + + expect(onChange).toHaveBeenCalledTimes(1) + expect(onChange).toHaveBeenCalledWith({ + id: 'm2jTvAj5kkm', + displayName: 'Births', + dataDimensionType: 'DISAGGREGATION', + }) + }) +})