test: setup component tests - #13579
Conversation
|
Thanks for opening your first pull request in this repository! 鉁岋笍 |
a4e0da5 to
e340b07
Compare
862b127 to
4d06661
Compare
There was a problem hiding this comment.
@GretaD @GVodyanov Maybe this visual regression testing setup will be useful for you during migration to Vue 3.
I suspect many components will break visually when going from @nextcloud/vue@8 (Vue 2) to @nextcloud/vue@9 (Vue3) because we often use :deep customize standard components.
4d06661 to
968280a
Compare
| - name: Download css | ||
| run: | | ||
| cd src/tests/component/gallery/assets/server | ||
| curl https://nextcloud.github.io/server/apps/theming/css/default.css > apps/theming/css/default.css |
There was a problem hiding this comment.
My preference is to commit the server style like https://github.com/nextcloud-libraries/nextcloud-vue/blob/main/.github/workflows/server-styling-update.yml
Pros
- It works offline
- It's clear which styles is tested with
- Can run
npm run test:componentwithout needing the checkout of sever- Simplifies CI running
- Gives more flexibility in local development (e.g. fixing visual issue or creating mockups without server running)
Alternatives
- Directly reference https://nextcloud.github.io like https://github.com/nextcloud-libraries/nextcloud-upload
- Assume Repo is checked out in servers app directory and use the Css from that server
Not sure how you develop with this repo, let me know if you want to keep it as proposed or do it differently.
There was a problem hiding this comment.
@susnux I want to apply component testing including visual regression testing to a groupware apps. Do you have thoughts of a good long term solution for making server styles available for that?
I thought of creating an NPM package nextcloud/testing (repo nextcloud-libraries/nextcloud-testing that bundles styling. NPM package would automatically be published for server versions and updated through renovate in using repos.
<head>
<link href="node_modules/nextcloud/testing/styles/server/stable35/apps/theming/css/default.css" rel="stylesheet" />
<link href="node_modules/nextcloud/testing/styles/server/stable35/core/css/server.css" rel="stylesheet" />
</head>It would have /server/stable35/, /server/stable34, /server/master etc. for matrix testing.
This would remove CI complexity and maintance for this from individual apps (mail, calendar, contacts) and libraries (nextcloud-vue).
Adapts https://playwright.dev/docs/test-components for Vue 2. But put stories next to tests and not component sources. This follows https://github.com/nextcloud-libraries/nextcloud-vue. Assisted-by: Claude:claude-opus-5 Signed-off-by: Oleksandr Dzhychko <hey@oleks.dev>
968280a to
4a2684f
Compare
| # SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors | ||
| # SPDX-License-Identifier: MIT | ||
|
|
||
| name: Playwright Tests |
There was a problem hiding this comment.
Gate run only for fronted changes.
See #13586
There was a problem hiding this comment.
Maybe even wrap in to the workflow that runs the node tests. Also simplify, because we do not need parllel running.
| runs-on: ubuntu-latest | ||
| strategy: | ||
| matrix: | ||
| branch: ['main', 'stable8'] |
There was a problem hiding this comment.
Use correct branches
2 participants
Adapts https://playwright.dev/docs/test-components for Vue 2.
But put stories next to tests and not component sources.
This follows https://github.com/nextcloud-libraries/nextcloud-vue.
馃 AI (if applicable)