ILIAS icon indicating copy to clipboard operation
ILIAS copied to clipboard

[FEATURE] JS Unit Tests Migration

Open thibsy opened this issue 1 year ago • 4 comments

Hi folks,

This PR introduces the the following changes:

  • The chai assertion package has been removed and replaced by jest's internal expect object.
  • The @jest/globals package has been added in order to receive proper intelisense for our unit test functions, and in order to comply with our code-style (no usage of globals).
  • The @babel/preset-env package has been added in order to transform ES6 syntax at runtime, so jest will be able to perform unit tests inside the Node.js environment. This is necessary because ES6 is still not supported (or considered experimental) by Node.js.
  • All JavaScript unit tests are migrated from mocha to jest, by
    • setting up the new testing framework using the .jestrc.json configuration file.
    • replacing all imports from mocha (describe, it, ...).
    • updating the documentation accordingly.
  • JavaScript unit tests are now collected from every component, by searching inside a components tests/ directory after any .js files.
  • The unit tests are now executed in random order, so flaky unit tests can be discovered more easily. The random seed will be visible in the output.
  • The JavaScript unit test GitHub action is "active" again.

However, there are still some problems:

  • We have been using jsdom to test DOM manipulations. This approach is discouraged from us UI coordinators and the package was also not suggested for ILIAS 10. However, there are still many unit tests which depend on this library, which I could not simply transform into other unit tests as part of this migration. For the time being, I simply skipped these test cases or test groups, using describe.skip() and it.skip().
  • I needed to include the docs/ directory to be searched for JavaScript unit tests in order for the example to be run. We could also remove this directory again and agree that we don't want the example to be runnable, since it only serves for documentation.
  • The mainbar component unit tests are currently failing, possibly due to changes made by the improved drilldown menu.
  • The tooltip component unit tests are currently failing, possibly due to changes made in the meantime, but also because they are flaky.

I added the Kitchensink label because the changes are mostly inside the UI framework.

Kind regards, @thibsy

thibsy avatar Aug 21 '24 12:08 thibsy

Jour Fixe, 16 SEP 2024: @thibsy notified us about this PR and its intention. He asks all developers to read the PR and ask questions until the next JF when decision should be made about this PR.

matthiaskunkel avatar Sep 16 '24 12:09 matthiaskunkel

This PR adds the @jest/globals as npm package.

Usage:

  • All JavaScript unit tests, primarily in components/ILIAS/UI/tests/*.

Wrapped By:

  • Not applicable.

Reasoning:

  • This package handles:
    • It provides the jest testing framework API by exporting it as ES6 modules. This means we can import functions like describe, it, etc. in our unit tests using ES6 syntax, and do not need access them globally.
  • Its required because:
    • We have to avoid using globals per our JavaScript code-style definition. To make ESLint happy and meet our code-style criteria, we have to import these globals from this package.

Maintenance:

  • The package is part of the jest monorepo, which is actively maintained and receives yearly major releases, as well as some minor and patch releases throughout the year. The package itself is not likely to be updated though, because it only provides the jest API.

Links:

  • Package manager: https://www.npmjs.com/package/@jest/globals
  • GitHub: https://github.com/jestjs/jest/tree/main/packages/jest-globals
  • Documentation: https://jestjs.io/docs/api

thibsy avatar Sep 30 '24 07:09 thibsy

This PR adds the @babel/preset-env as npm package.

Usage:

  • JavaScript unit tests, primarily in components/ILIAS/UI/tests/*.
  • JavaScript module bundling, primarily in components/ILIAS/UI/tests/*.

Wrapped By:

  • Not applicable.

Reasoning:

  • This package handles:
    • It is responsible for transforming JavaScript code to compatible syntax for the desired target environment. This makes our JavaScript code compatible with multiple environments (browser, Node.js) without having to micromanage syntax features.
  • Its required because:
    • Node.js does not yet fully support ES6 syntax, which is accepted by all modern browsers. Since we want to make use of this syntax and are forced by our JavaScript code-style to do so, we need to transform ES6 syntax to compatible code for the Node.js environment. Without this, JavaScript unit testing and module bundling using Rollup.js would not be possible.

Maintenance:

  • The package is part of the babel monorepo, which is actively maintained and receives ~weekly releases. The package itself is also receiving the same amount of commits.

Links:

  • Package manager: https://www.npmjs.com/package/@babel/preset-env
  • GitHub: https://github.com/babel/babel/tree/main/packages/babel-preset-env
  • Documentation: https://babeljs.io/docs/babel-preset-env.html

thibsy avatar Sep 30 '24 07:09 thibsy

Jour Fixe, 30 SEP 2024: We accept both dependencies for ILIAS 10. List of dependencies will be updated accordingly.

matthiaskunkel avatar Sep 30 '24 12:09 matthiaskunkel