HDDS-9790. Added UI unit tests for Recon Overview Page and AutoReloadPanel

[devabhishekpal]

What changes were proposed in this pull request?

HDDS-9790. Added UI unit tests for Recon Overview Page and AutoReloadPanel

Please describe your PR in detail:

• Currently we don't have any tests for Recon UI. This increases manual effort for validating UI fixes/changes.
• This PR will add the initial setup required for adding tests using ReactTestingLibrary and Jest, along with some unit test cases for the Recon Overview page and the AutoReloadPanel component for Recon.
• After we get good coverage of tests for basic scenarios, these can be run as a part of the CI checks to reduce manual effort in verifying changes, as well as providing an initial filter to catch bugs/errors early on.
• It uses RTL library to provide test functionality and Jest as a test runner.
• Along with that it will use msw to intercept API calls to endpoints and return mock responses to ensure a single static source of truth for testing.

What is the link to the Apache JIRA

https://issues.apache.org/jira/browse/HDDS-9790

How was this patch tested?

The patch was tested manually.

[devabhishekpal]

Reference for quick overview on the frameworks:

ReactTestingLibrary

React Testing Library is a lightweight testing library built on top of the DOM Testing Library for React components. It focuses on the functionality of the component in contrast to the actual implementation of the component. This ensures that no matter how we implement our components and no matter the changes, we can ensure a consistent functionality. It can work with any test runner, but we are using Jest as the preferred runner in this case.

Jest

Jest is a testing framework which also acts as a runner for our tests, allowing us to implement various testing methods and provide a way to interact with the virtual DOM to verify and assert conditions. It also has many built in features like mocking functions, generating coverage etc. allowing us to focus on the testing, rather than the implementation.

MSW

Mock Service Worker is a API mocking library that allows us to intercept API calls, and provide mocks for the same. It is independent of the client, framework and environment - this means we can run it anywhere independently.

How are we setting up our tests?

The main configuration for our tests start with configuring Jest, in the package.json file. Under the jest section we are setting up the configs like:

• preset - Tells Jest which of the builtin presets to use for transforming test code. Since we are writing in TypeScript we set this as ts-jest which allows jest to run tests for TypeScript.
• globals - Tells Jest about the global variables that are available for usage in the tests. In our case we are defining ts-jest as a property which allows us to configure ts-jest properties
• transformIgnorePatterns - Specifies an array of folders/files which are to be ignored when transforming our code from TS to JS
• roots - Specifies an array of the folders which contain the root of the source code
• transform - Defines the transformers that are to be used with the various file types, in our case since we have TS, we are specifying using regex that any file with a .tsx extension needs to be transformed using ts-jest transformer preset.
• setupFilesAfterEnv - Defines the set of modules to be executed immediately after the framework has been installed in the environment and before each test file.
• modulePathIgnorePatterns - Specifies an array of files/modules which are to be ignored when searching for tests or modules to be loaded.
• moduleFileExtensions - Stores an array of file types/extensions that the module uses.
• resetMocks - Jest provides us a way to implement mocks for functions. When resetMocks is enabled, it will reset this implementation to default (a no return function, which is equivalent to jest.fn()). We are setting this as false, since we want to preserve our mock implementations between tests.

Reference Documentations for reading:

Jest: https://archive.jestjs.io/docs/en/24.x/getting-started.html React Testing Library: https://testing-library.com/docs/react-testing-library/intro/ MSW: https://mswjs.io/docs/getting-started

[smitajoshi12]

@devabhishekpal

All looks god to me CI Build or testing is there any Dependbot configuration that we need to check?

[devabhishekpal]

The current codebase for Recon has been shifted to Vite and Vitest, hence these changes are no longer applicable for the current framework. Hence closing this PR and will open a new PR with the required changes.