Testing infrastructure (Vue components) #9040

New Issue

GiteaMirror · 2025-11-02T08:26:46-06:00

GiteaMirror commented

2025-11-02 08:26:46 -06:00

Originally created by @Ryuno-Ki on GitHub (Jun 8, 2022).

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 ( https://github.com/go-gitea/gitea/pull/18442 ).
https://github.com/go-gitea/gitea/issues/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

Originally created by @Ryuno-Ki on GitHub (Jun 8, 2022). ### 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 ( https://github.com/go-gitea/gitea/pull/18442 ). https://github.com/go-gitea/gitea/issues/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_

GiteaMirror added the type/testing label 2025-11-02 08:26:46 -06:00

GiteaMirror closed this issue

2025-11-02 08:26:46 -06:00

GiteaMirror commented

2025-11-02 08:26:47 -06:00

@Ryuno-Ki commented on GitHub (Jun 8, 2022):

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 https://github.com/go-gitea/gitea/issues/19902 first.

@Ryuno-Ki commented on GitHub (Jun 8, 2022): 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 https://github.com/go-gitea/gitea/issues/19902 first.

GiteaMirror commented

2025-11-02 08:26:47 -06:00

@silverwind commented on GitHub (Jun 8, 2022):

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.

@silverwind commented on GitHub (Jun 8, 2022): > 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.

GiteaMirror commented

2025-11-02 08:26:48 -06:00

@Ryuno-Ki commented on GitHub (Jun 18, 2022):

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 commented on GitHub (Jun 18, 2022): > 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 …

GiteaMirror commented

2025-11-02 08:26:48 -06:00

@Ryuno-Ki commented on GitHub (Jun 19, 2022):

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

@Ryuno-Ki commented on GitHub (Jun 19, 2022): I paused for porting to Vue3 for now, because it saves me from comparing timestamp on documents flying around. See #20044.

GiteaMirror commented

2025-11-02 08:26:48 -06:00

@kdumontnu commented on GitHub (Jun 22, 2022):

@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!! 💪)

@kdumontnu commented on GitHub (Jun 22, 2022): @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!! 💪)

GiteaMirror commented

2025-11-02 08:26:48 -06:00

@Ryuno-Ki commented on GitHub (Jul 1, 2022):

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.

@Ryuno-Ki commented on GitHub (Jul 1, 2022): 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 :new_moon_with_face: :heart_eyes_cat: ). Will come back to this once Vue 3 is around in Gitea.

GiteaMirror commented

2025-11-02 08:26:48 -06:00

@silverwind commented on GitHub (Apr 29, 2023):

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.

@silverwind commented on GitHub (Apr 29, 2023): 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.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#9040