Add Unit Tests for Application and New CI Workflow for Vitest Coverage #1379

EnsiyehE · 2025-07-25T13:04:06Z

This PR introduces the following enhancements to the application:

Unit Tests
Added new unit tests, including coverage for some components, thunks and events inside the application.
New CI Workflow for Vitest Coverage
Created a new GitHub Actions workflow to run vitest with coverage reporting.

The CI job is configured to run automatically when a new version is released.

Coverage settings are added in package.json to keep it maintainable and version-aware.

Review Request:
Please review the added unit tests and CI workflow. I'd appreciate your feedback on:

The test logic and structure

The setup of the CI job and coverage reporting

Any improvements or missing cases you notice

Thanks for your time and input!

…est (Api)

github-actions · 2025-07-25T13:04:18Z

Hi @EnsiyehE
Thank you for contributing to the Opencast Admin UI.
We noticed that you have not yet filed an Individual Contributor License Agreement. Doing that (once) helps us to ensure that Opencast stays free for all. If you make your contribution on behalf of an institution, you might also want to file a Corporate Contributor License Agreement (giving you as individual contributor a bit more security as well). It can take a while for this bot to find out about new filings, so if you just filed one or both of the above do not worry about this message!
Please let us know if you have any questions regarding the CLA.

github-actions · 2025-07-25T13:05:13Z

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/opencast-admin-interface:pr-1379

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/opencast-admin-interface:pr-1379

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

Arnei

Thanks for introducing unit tests to the admin interface. The overall approach looks good I think, but I still have a couple comments and questions for you (Some of which likely come across as terse. I assure you I am not trying to be rude though).

Running npm test produces a couple warnings and errors in the console. Are they expected? If so, would it be preferable to handle them in some way so as not to confuse others?

Please adapt the gitignore file to include files generated by the tests and coverage, e.g. /coverage.

The npm run build command is failing. Looks like eslint expects different syntax. Could you fix that?

Oops! Something went wrong! :(

ESLint: 9.32.0

A config object is using the "env" key, which is not supported in flat config system.

Flat config uses "languageOptions.globals" to define global variables for your files.

Please see the following page for information on how to convert your config object into the correct format:
https://eslint.org/docs/latest/use/configure/migration-guide#configuring-language-options

If you're not using "env" directly (it may be coming from a plugin), please see the following:
https://eslint.org/docs/latest/use/configure/migration-guide#using-eslintrc-configs-in-flat-config

src/components/events/partials/wizards/NewEventWizard.tsx

vitest.config.ts

tests/components/navBar.test.tsx

Arnei · 2025-07-31T08:30:31Z

.github/workflows/coverage.yml

@@ -0,0 +1,38 @@
+name: Vitest Coverage


Why should we add code coverage reports to our releases? I feel like it will just unnecessarily bloat our releases with files that no one will ever look at.

It was my idea to give the topic of testing a bit more visibility. If we only create them as artifacts of e.g. each action run, I think nobody will ever look at them. This was just a first idea. I think there are other options as well. Maybe just publishing them using github.io might also be a possibility. Other ideas are also welcome.

Adding test coverage to the releases is likely to get ignored, especially since we're aiming to automate away releases of the admin interface to Opencast as much as possible.

Another idea would be to add the coverage value to the Opencast release notes, somehow. Although I am not sure we want to proudly announce 5% code coverage in our release notes, so maybe not ^^'.

May be better if we could automatically post to github discussion, or even the matrix channel? No idea how to do that though.

With all due respect, what I see here already represents nearly 20% of the entire application—a considerable portion of a clearly large codebase. I believe this level of coverage provides a solid starting point that could even be built on by myself.

This is simply my opinion, shared with the intention of contributing constructively.

I did not mean to belittle your work, this is definitely a large step up from our previous situation. Still, whether it is 5% or 20%, neither of these numbers is nearly large enough to inspire confidence in our adopters (and especially new adopters). Instead, I fear that it would have quite the opposite effect. Therefore, I think we should consider carefully how we want to draw attention to this.

tests/components/shared/table.test.tsx

tests/components/shared/tableFilters.test.tsx

tests/components/users.test.tsx

tests/server.ts

package.json

EnsiyehE · 2025-08-05T13:21:10Z

I have fixed whatever we discussed according to your solutions , but still build command would give me error regarding something related to Linux , because my machine now is windows as an operating system , i am not sure how i can fix it , i would appreciate your hints and code review again Arnei , thank you !

src/store.ts

Arnei · 2025-08-06T09:27:39Z

package.json

+    "eslint-plugin-vitest": "^0.5.4",
+    "jsdom": "^26.1.0",
+    "msw": "^1.3.5",
+    "prettier": "^3.6.2",


We can certainly discuss if we want to introduce an opinionated code formatter to the project, but let's do so in an issue separate from this PR. As such, please remove prettier from this PR and undo the automatic formatting it applied to previously existing files.

You're absolutely right, and I’ll work on removing Prettier from this PR and undoing the formatting changes as requested.

Apologies for the confusion — I think the formatting on my end may have used 4 tabs, which might be getting interpreted as spaces by others. Outside of using a formatter, I don’t really have another reliable way to keep indentation consistent, but I’ll do my best to adjust it manually this time. Thanks for the clarification!

tests/components/shared/table.test.tsx

Arnei · 2025-08-06T10:59:31Z

src/store.ts

->
+>;
+
+export const rootReducer = reducers;


Why not directly export reducers? This feels needlessly convoluted.

Arnei · 2025-08-06T11:01:58Z

tests/components/usersSetupStore.tsx

+import { MemoryRouter } from "react-router";
+import { render } from "@testing-library/react";
+
+export function renderWithStore(


The renderWithStore from setUpStore.tsx now support routing, right? Why not use it here then?

tests/components/shared/tableFilters.test.tsx

tests/components/users.test.tsx

Arnei · 2025-08-06T13:48:04Z

I have fixed whatever we discussed according to your solutions , but still build command would give me error regarding something related to Linux , because my machine now is windows as an operating system , i am not sure how i can fix it , i would appreciate your hints and code review again Arnei , thank you !

It now builds fine, at least on my machine ^^'. Whatever you did seemed to help, thanks for that!

github-actions · 2025-08-07T11:24:29Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

github-actions · 2025-10-02T13:25:42Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

Arnei · 2025-11-11T08:24:45Z

@EnsiyehE are you planning to address the outstanding requested changes?

A brief overview:

Undo changes to formatting in unrelated code (for example switching tabs and whitespaces, line breaks).
Directly export reducers from store.ts, unless there is an argument for not doing that.
Use renderWithStore from setUpStore.tsx in usersSetupStore.tsx, if it makes sense to do so.
Remove coverage.yml, or continue the discussion.
Say what you think about including a github workflow that runs the tests on pull requests.

EnsiyehE added 8 commits July 9, 2025 12:27

Add vitest coverage GitHub Action

ad88ef7

Add Vitest coverage integration

58d52a8

eslint errors solved

a988c4b

changing the ci jobs

f292571

edittextfilter action creator function redux tested -without the requ…

3ad5fca

…est (Api)

polish the test files and check on syntaxes

fbd666e

Merge remote-tracking branch 'origin/develop' into my-feature-branch

f3679ca

fix the merge conflicts with the test cases

6e22ab2

Arnei added the type:tests Unit and integration tests label Jul 29, 2025

Arnei requested changes Jul 31, 2025

View reviewed changes

EnsiyehE added 5 commits August 4, 2025 10:15

fix error and warnings of the test inside the console

d1921d7

Fix the npm build error env key

127a2a3

fix the archticture and the test cases

f57a03e

try to fix the eslint warnings

0153192

es lint warnings

4b9bd94

Arnei requested changes Aug 6, 2025

View reviewed changes

github-actions bot added the status:conflicts label Aug 7, 2025

EnsiyehE added 4 commits August 18, 2025 09:14

Change the test cases errors

fe227cd

Merge remote-tracking branch 'origin/develop' into my-feature-branch

bab71b7

resolving the conflicts

edd1cf4

remove the extra console

97b5ee4

github-actions bot removed the status:conflicts label Aug 18, 2025

EnsiyehE added 3 commits August 18, 2025 09:55

test the workflow error

8511f29

fix the eslint warning for the building the project

eb3cd5f

try to fix the build error

4a8bb7b

github-actions bot added the status:conflicts label Oct 2, 2025

Add Unit Tests for Application and New CI Workflow for Vitest Coverage #1379

Are you sure you want to change the base?

Add Unit Tests for Application and New CI Workflow for Vitest Coverage #1379

Uh oh!

Conversation

EnsiyehE commented Jul 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 25, 2025

Uh oh!

github-actions bot commented Jul 25, 2025

Uh oh!

Arnei left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Arnei Jul 31, 2025

Choose a reason for hiding this comment

Uh oh!

pascalseeland Aug 5, 2025

Choose a reason for hiding this comment

Uh oh!

Arnei Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

EnsiyehE Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Arnei Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

EnsiyehE commented Aug 5, 2025

Uh oh!

Uh oh!

Arnei Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

EnsiyehE Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Arnei Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Arnei Aug 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Arnei commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 7, 2025

Uh oh!

github-actions bot commented Oct 2, 2025

Uh oh!

Arnei commented Nov 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

EnsiyehE commented Jul 25, 2025 •

edited

Loading

Arnei Aug 6, 2025 •

edited

Loading

Arnei Aug 6, 2025 •

edited

Loading

Arnei commented Aug 6, 2025 •

edited

Loading