(test) O3-4553: Add unit tests for question component #419
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
new translation keys:isQuestionInfoProvided,questionInfo,questionInfoPlaceholder
enhanced some code to match conventions
This commit has the test file for the question component. - For now only the tests only include the feature being introduced in this PR. - Future tests will be in a different PR. - Few changes has been made to the `Question` component: * Radio buttons in the same group should have both the attribute `defaultChecked` * Replaced `defaultChecked` with `checked`
…rm/question/question.test.tsx Co-authored-by: Nethmi Rodrigo <[email protected]>
MohamedAliMefteh
changed the title
NethmiRodrigo
changed the title
NethmiRodrigo
requested changes
Mar 24, 2025
Comment on lines
11
to
28
| jest.mock('../rendering-types/rendering-type.component', () => ({ | ||
| __esModule: true, | ||
| default: jest.fn(() => <div data-testid="render-type-component" />), | ||
| })); | ||
|
|
||
| jest.mock('../question-types/question-type.component', () => ({ | ||
| __esModule: true, | ||
| default: jest.fn(() => <div data-testid="question-type-component" />), | ||
| })); | ||
|
|
||
| jest.mock('../common/required-label/required-label.component', () => ({ | ||
| __esModule: true, | ||
| default: jest.fn(({ isRequired, text }) => ( | ||
| <div data-testid="required-label"> | ||
| {text} {isRequired ? '(Required)' : ''} | ||
| </div> | ||
| )), | ||
| })); |
There was a problem hiding this comment.
Why are these internal components mocked? We should try to avoid mocking internal components like these as much as possible.
Comment on lines
36
to
38
| jest.mock('./question.scss', () => ({ | ||
| questionIdLabel: 'mock-question-id-label', | ||
| })); |
There was a problem hiding this comment.
Why is a stylesheet mocked?
| }); | ||
|
|
||
| it('should render without crashing', () => { | ||
| renderWithFormFieldProvider(<Question checkIfQuestionIdExists={jest.fn()} />); |
There was a problem hiding this comment.
Define checkIfQuestionIdExists as a mock function at the top so you can just pass it in instead of defining it as jest.fn every time.
|
|
||
| it('should render without crashing', () => { | ||
| renderWithFormFieldProvider(<Question checkIfQuestionIdExists={jest.fn()} />); | ||
| expect(screen.getByRole('textbox', { name: /Question ID/i })).toBeInTheDocument(); |
There was a problem hiding this comment.
Not just the question id, the question type field, you should also check if question type and rendering type fields also get rendered.
Comment on lines
85
to
93
| // it('should validate duplicate question ids', () => { | ||
| // const checkIfQuestionIdExists = jest.fn(() => true); | ||
| // renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, { | ||
| // formField: { ...initialFormField, id: 'duplicateId' }, | ||
| // }); | ||
|
|
||
| // expect(checkIfQuestionIdExists).toHaveBeenCalledWith('duplicateId'); | ||
| // expect(screen.getByText(/This question ID already exists/i)).toBeInTheDocument(); | ||
| // }); |
There was a problem hiding this comment.
Don't include commented out test cases
Comment on lines
167
to
174
| // it('should not show label and required inputs when rendering type is markdown', () => { | ||
| // renderWithFormFieldProvider(<Question checkIfQuestionIdExists={jest.fn()} />, { | ||
| // formField: { ...initialFormField, questionOptions: { rendering: 'markdown' } }, | ||
| // }); | ||
|
|
||
| // expect(screen.queryByRole('textbox', { name: /Label/i })).not.toBeInTheDocument(); | ||
| // expect(screen.queryByText(/Is this question a required or optional field?/i)).not.toBeInTheDocument(); | ||
| // }); |
Comment on lines
149
to
165
| it('should render RenderTypeComponent when rendering type is selected', () => { | ||
| renderWithFormFieldProvider(<Question checkIfQuestionIdExists={jest.fn()} />, { | ||
| formField: { ...initialFormField, questionOptions: { rendering: 'text' } }, | ||
| }); | ||
|
|
||
| expect(screen.getByTestId('render-type-component')).toBeInTheDocument(); | ||
| expect(RenderTypeComponent).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should render QuestionTypeComponent when question type is selected', () => { | ||
| renderWithFormFieldProvider(<Question checkIfQuestionIdExists={jest.fn()} />, { | ||
| formField: { ...initialFormField, type: 'obs' }, | ||
| }); | ||
|
|
||
| expect(screen.getByTestId('question-type-component')).toBeInTheDocument(); | ||
| expect(QuestionTypeComponent).toHaveBeenCalled(); | ||
| }); |
There was a problem hiding this comment.
These components should be rendered even if they are not in the field.
| const renderingTypeSelect = screen.getByLabelText(/Rendering type/i); | ||
| fireEvent.click(renderingTypeSelect); | ||
|
|
||
| // TODO: test the select options. |
| // TODO: check if it gets the updated prop | ||
|
|
||
| const optionalRadio = screen.getByLabelText(/Optional/i); | ||
| fireEvent.click(optionalRadio); |
There was a problem hiding this comment.
Prefer to use userEvents over fireEvent - https://testing-library.com/docs/user-event/intro#differences-from-fireevent
| const optionalRadio = screen.getByLabelText(/Optional/i); | ||
| fireEvent.click(optionalRadio); | ||
|
|
||
| // TODO: check if it gets the updated prop |
When writing these tests, I didn't take in consideration other tests written in openMRS form-builder. |
…ith useEvents and fixed other tests
enhanced some code to match conventions
This commit has the test file for the question component. - For now only the tests only include the feature being introduced in this PR. - Future tests will be in a different PR. - Few changes has been made to the `Question` component: * Radio buttons in the same group should have both the attribute `defaultChecked` * Replaced `defaultChecked` with `checked`
…ith useEvents and fixed other tests
…ithub.com/MohamedAliMefteh/openmrs-esm-form-builder into feat/add-unit-test-for-question-component
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Requirements
Summary
This PR adds unit tests for the Question Component used within modals to ensure the correct rendering, behavior, and functionality. The tests cover a wide range of scenarios, including interactions with form fields, conditional rendering, and component-specific functionality such as converting labels to camel case, toggling question visibility, and updating question info.
However, some of the tests are currently failing and require adjustments. Additionally, a few test cases are incomplete and need to be finalized later.
Key Changes:
Rendering & Interactions: Tests ensure the Question component renders correctly and interacts with the form fields, such as updating the questionId, toggling visibility of additional question info, and updating question info text.
Question Info Visibility: Tests handle toggling the visibility of the "Additional Question Info" section when radio buttons (Yes/No) are clicked.
Label Conversion: Added tests for converting the question label to camel-case when the corresponding button is clicked.
Component Rendering: Tests ensure that child components like RenderTypeComponent and QuestionTypeComponent are rendered when their corresponding properties are set.
Known Issues:
Test Failures: There are a few tests that are currently not passing. The failing tests are marked with comments in the code, and they need to be reviewed and adjusted to handle specific behaviors or edge cases correctly.
Duplicate Question ID Validation: The test for checking duplicate question IDs is commented out due to an issue in mocking the validation function (checkIfQuestionIdExists). It needs to be reworked to properly test the validation logic.
Rendering Type with Markdown: The test to ensure that label and required inputs are hidden when the rendering type is set to "markdown" is commented out. This needs to be revisited to handle conditional rendering based on the rendering property.
Incomplete Tests: There are two tests marked with TODO comments that need to be completed later:
Question Required Status: The test for toggling between required and optional statuses is incomplete and needs to be updated to verify that the prop value is correctly passed down and updated.
Rendering Type Select Options: The test for checking the select options when rendering type is clicked is a work-in-progress and needs to be finalized to validate the available options for the user.
Screenshots
Related Issue
https://openmrs.atlassian.net/browse/O3-4553