Testing infrastructure (Vue components)

[Ryuno-Ki]

Feature Description

The other day, we noticed the lack of tests for the Frontend.
While there are thoughts about migrating away (if possible) from Fomantic + jQuery, I looked into what would be needed to run tests against Vue components.

Let me explain…

Testing types

The official documentation highlights three different kinds of tests:
https://vuejs.org/guide/scaling-up/testing.html#testing-types

End-to-end tests are already in the work ( #18442 ).
#18346 is about visual regression testing (so related, but not the same).

So I'm looking into Component Testing before going deeper (because in my experience, Unit Tests aren't worth it in this case).

Testing library

Since this should focus on the DOM, I picked Testing Library (yeah, that's the name of the library) instead of Vue Test Utils (which render headless).
https://testing-library.com/docs/vue-testing-library/intro/
Testing Library focuses on the User Behaviour instead of units (so it's kind of BDD instead of TDD). Look at some examples to see what I mean.
Biggest difference will be the lack of assertions / expectations. Instead, if some element does not behave, the library will throw an error to mark the test as failed.

Now, this project uses Vue2 components. That means, the latest and greatest cannot be used right out of the box.
I stick to Jest here which meant to use https://github.com/vuejs/vue-jest#installation

Now, Jest expects Common JS format instead of ES modules. There are some ways to make it behave:
https://jestjs.io/docs/ecmascript-modules

I went to use a Babel transform (I found on StackOverflow…) because the preset did not lead to any change.

Right now, I can get the Vue component to be loaded into Jest, but it does not appear to be mounted correctly.
I started yesterday, but got interrupted several time. Best to document what I have in mind before I loose it.

Do you have questions? I'm happy to dig into specifics in more detail if you want to learn about something.

Screenshots

No response

[Ryuno-Ki]

If you are curious, here's the diff: https://github.com/go-gitea/gitea/compare/main...Ryuno-Ki:test-19923-vue-testing?expand=1

Be aware, that there were reports about the migration to Vue3 not running smoothly for everybody.
It might make sense to resolve #19902 first.

[silverwind]

Now, Jest expects Common JS format instead of ES modules. There are some ways to make it behave:

Quick note: Jest is already set up in ESM mode, it will work via make test-frontend which sets the relevant node.js flags.

[Ryuno-Ki]

I went to use a Babel transform (I found on StackOverflow…) because the preset did not lead to any change.

See also: https://how-to.dev/how-to-set-up-jest-for-es-module

Currently trying to figure out, why it tells me to use import syntax for ESM imports …

[Ryuno-Ki]

I paused for porting to Vue3 for now, because it saves me from comparing timestamp on documents flying around. See #20044.

[kdumontnu]

@Ryuno-Ki does the recent support playwright added for Vue help you here? https://playwright.dev/docs/release-notes#version-122

(also, thanks for tacking the upgrade to Vue 3!! 💪)

[Ryuno-Ki]

Haven't taken a look at end-to-end testing with Playwright yet, because I helped another project wrapping up their next release (automatic dark mode 🌚 😻 ).

Will come back to this once Vue 3 is around in Gitea.

[silverwind]

We have vue3 and vitest runner now. Feel free to raise a PR to integrate component testing via testing-library or similar. I don't think we need to keep this open.