Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(test) 03-3853: Add Unit Tests for Datepicker Component. #1126

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Samstar10
Copy link
Contributor

@Samstar10 Samstar10 commented Aug 27, 2024

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

This PR includes unit tests for the DatePicker component as mentioned in this ticket (https://openmrs.atlassian.net/issues/O3-3853).

Screenshots

Related Issue

Other

Copy link
Member

@vasharma05 vasharma05 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Samstar10!
Can you please connect with Sachit and combine #1130 together.
Thanks!
CC: @NethmiRodrigo

Comment on lines +8 to +25
beforeAll(() => {
window.i18next = {
language: 'en',
changeLanguage: jest.fn(),
t: jest.fn((key) => key), // Simple mock for translation function
// Other properties and methods that might be required
init: jest.fn(),
getFixedT: jest.fn(),
exists: jest.fn(),
loadNamespaces: jest.fn(),
loadLanguages: jest.fn(),
use: jest.fn(),
on: jest.fn(),
off: jest.fn(),
dir: jest.fn(),
cloneInstance: jest.fn(),
} as unknown as i18nType; // Casting the mock to the correct i18n type
});
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
beforeAll(() => {
window.i18next = {
language: 'en',
changeLanguage: jest.fn(),
t: jest.fn((key) => key), // Simple mock for translation function
// Other properties and methods that might be required
init: jest.fn(),
getFixedT: jest.fn(),
exists: jest.fn(),
loadNamespaces: jest.fn(),
loadLanguages: jest.fn(),
use: jest.fn(),
on: jest.fn(),
off: jest.fn(),
dir: jest.fn(),
cloneInstance: jest.fn(),
} as unknown as i18nType; // Casting the mock to the correct i18n type
});
Object.defineProperty(window, 'i18next', {
value: {
language: 'en',
changeLanguage: jest.fn(),
t: jest.fn((key) => key), // Simple mock for translation function
// Other properties and methods that might be required
init: jest.fn(),
getFixedT: jest.fn(),
exists: jest.fn(),
loadNamespaces: jest.fn(),
loadLanguages: jest.fn(),
use: jest.fn(),
on: jest.fn(),
off: jest.fn(),
dir: jest.fn(),
cloneInstance: jest.fn(),
}
})

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Collaborator

@NethmiRodrigo NethmiRodrigo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for picking this up @Samstar10! Please see the suggestions and the build failures:

@@ -70,6 +70,7 @@
"@openmrs/esm-translations": "workspace:*",
"@types/geopattern": "^1.2.9",
"autoprefixer": "^9.8.8",
"cross-env": "^7.0.3",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this required?

// Test to ensure that the component renders without crashing
it('renders without crashing', () => {
render(<OpenmrsDatePicker />);
expect(screen.getByRole('group')).toBeInTheDocument();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the comment in #1130

const { container } = render(<OpenmrsDatePicker defaultValue={new Date(2024, 7, 27)} />);
expect(container.querySelector('input')).toHaveValue('2024-08-27');
});

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we also add a test case to ensure that the current date is highlighted in the calendar grid? We should test this for different locales

Comment on lines +75 to +79
if (input?.hasAttribute('aria-invalid')) {
expect(input).toHaveAttribute('aria-invalid', 'false');
} else {
expect(input).not.toHaveAttribute('aria-invalid');
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is the right way to do this. We should check that dates outside the min and max range are disabled.

});

// Test to ensure the component handles edge cases like `minDate` and `maxDate` correctly
it('handles edge cases gracefully', () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
it('handles edge cases gracefully', () => {
it('disables dates that are outside the given min and max range', () => {

@denniskigen denniskigen requested review from a team and removed request for a team October 5, 2024 09:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants