search

shabados / presenter

Desktop app for presenting the Shabad OS Database on projectors, TVs, and live streams
https://shabados.com
MIT License
18 stars 15 forks source link

Set up environment for frontend tests #685

Open ManpreetSL opened 1 month ago

ManpreetSL commented 1 month ago

Summary

Currently, the project doesn't have working test functionality. We want to be able to add unit and integration tests to the app. However, there are a few build errors such as a compatibility issue between MUI and React 18.

This PR fixes build errors, and then sets up and configures Vitest and React Testing Library, along with adding some basic tests to ensure that the environment works properly.

Notes

Follow up PR from https://github.com/shabados/presenter/pull/682

Test

Duration

??

ManpreetSL commented 1 month ago

@Harjot1Singh A question: In setupTests.ts, I've got a global fetch mock: global.fetch = vi.fn(), but instead of being in this file, should I not move it to something like the __mocks__ folder?

ManpreetSL commented 1 month ago

@Harjot1Singh Done the above thing I just commented.

Only thing left is that the tests pass, but ThemeLoader is still causing this:

DOMException [AbortError]: The operation was aborted. at Fetch.onAsyncTaskManagerAbort (file:///J:/WIP/presenter/node_modules/happy-dom/src/fetch/Fetch.ts:483:17) at Object. (file:///J:/WIP/presenter/node_modules/happy-dom/src/fetch/Fetch.ts:341:10) at AsyncTaskManager.abortAll (file:///J:/WIP/presenter/node_modules/happy-dom/src/async-task-manager/AsyncTaskManager.ts:195:41) at AsyncTaskManager.abort (file:///J:/WIP/presenter/node_modules/happy-dom/src/async-task-manager/AsyncTaskManager.ts:36:15) at DetachedBrowserFrame.abort (file:///J:/WIP/presenter/node_modules/happy-dom/src/browser/detached-browser/DetachedBrowserFrame.ts:138:49) at DetachedWindowAPI.abort (file:///J:/WIP/presenter/node_modules/happy-dom/src/window/DetachedWindowAPI.ts:62:29) at teardownWindow (file:///J:/WIP/presenter/node_modules/vitest/dist/vendor/index.GVFv9dZ0.js:555:24) at Object.teardown (file:///J:/WIP/presenter/node_modules/vitest/dist/vendor/index.GVFv9dZ0.js:606:15) at withEnv (file:///J:/WIP/presenter/node_modules/vitest/dist/chunks/runtime-runBaseTests.oAvMKtQC.js:87:15) at run (file:///J:/WIP/presenter/node_modules/vitest/dist/chunks/runtime-runBaseTests.oAvMKtQC.js:105:3)

I tried css: false in the vitest config and mocking the fetch returned value, but still getting that. Not sure how to fix it.

Harjot1Singh commented 1 month ago

@Harjot1Singh A question:

In setupTests.ts, I've got a global fetch mock: global.fetch = vi.fn(), but instead of being in this file, should I not move it to something like the __mocks__ folder?

The __mocks__ folder is for mocking out imports and modules with vi.mock. You should never need to import the mock directly from __mocks__.

Since fetch is a global, there's no good reason to put it in that folder, since you're having to import it anyway.