forgejo/tests/e2e
Gusted 14d9c386fd
[UI] Fix HTMX support for profile card
- There were two issues with the profile card since the introduction of
HTMX in 3e8414179c. If an HTMX request
resulted in a flash message, it wasn't being shown and HTMX was
replacing all the HTML content instead of morphing it into the existing
DOM which caused event listeners to be lost for buttons.
- Flash messages are now properly being shown by using `hx-swap-oob`
and sending the alerts on a HTMX request, this does mean it requires
server-side changes in order to support HTMX requests like this, but
it's luckily not a big change either.
- Morphing is now enabled for the profile card by setting
`hx-swap="morph"`, and weirdly, the morphing library was already
installed and included as a dependency. This solves the issue of buttons
losing their event listeners.
- This patch also adds HTMX support to the modals feature, which means
that the blocking feature on the profile card now takes advantage of
HTMX.
- Added a E2E test.
2024-07-17 01:41:32 +02:00
..
actions.test.e2e.js Fixes an visual bug where the info box to dispatch a workflow is shown even for users that lack permissions to actualy run the workflow. (#4305) 2024-07-06 05:30:58 +00:00
commit-graph-branch-selector.test.e2e.js fix branch selector in commit graph 2024-07-07 20:26:30 +02:00
dashboard-ci-status.test.e2e.js Fixed link to commit status and tooltip on dashboard 2024-07-14 13:03:03 +02:00
debugserver_test.go
e2e_test.go tests(e2e): only run one test, not all of them each time 2024-07-14 14:19:05 +02:00
edit-comment.test.e2e.js show edit textfield always initially when editing comments 2024-06-14 15:42:21 +02:00
example.test.e2e.js Update instance title in tests 2024-06-08 23:33:55 +05:00
explore.test.e2e.js
issue-sidebar.test.e2e.js test: issue sidebar testing using playwright (#4319) 2024-07-05 05:03:45 +00:00
markdown-editor.test.e2e.js Remove tab key handling in markdown editor, add toolbar buttons instead, re #4072 #4142 (#4263) 2024-06-30 13:03:32 +00:00
markup.test.e2e.js [FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985) 2024-06-09 10:50:53 +00:00
profile_actions.test.e2e.js [UI] Fix HTMX support for profile card 2024-07-17 01:41:32 +02:00
README.md docs(e2e): explain how to use VSCodium or VSCode 2024-07-16 17:22:39 +02:00
right-settings-button.test.e2e.js Fixes that the settings button moves in the overflow menu 2024-04-28 23:31:31 +02:00
utils_e2e.js
utils_e2e_test.go

End to end tests

E2e tests largely follow the same syntax as integration tests. Whereas integration tests are intended to mock and stress the back-end, server-side code, e2e tests the interface between front-end and back-end, as well as visual regressions with both assertions and visual comparisons. They can be run with make commands for the appropriate backends, namely:

make test-sqlite
make test-pgsql
make test-mysql

Make sure to perform a clean front-end build before running tests:

make clean frontend

Install playwright system dependencies

npx playwright install-deps

Interactive testing

You can make use of Playwright's integrated UI mode to run individual tests, get feedback and visually trace what your browser is doing.

To do so, launch the debugserver using:

make test-e2e-debugserver

Then launch the Playwright UI:

npx playwright test --ui

You can also run individual tests while the debugserver using:

npx playwright test actions.test.e2e.js:9

First, specify the complete test filename, and after the colon you can put the linenumber where the test is defined.

Run all tests via local act_runner

act_runner exec -W ./.github/workflows/pull-e2e-tests.yml --event=pull_request --default-actions-url="https://github.com" -i catthehacker/ubuntu:runner-latest

Run sqlite e2e tests

Start tests

make test-e2e-sqlite

Run MySQL e2e tests

Setup a MySQL database inside docker

docker run -e "MYSQL_DATABASE=test" -e "MYSQL_ALLOW_EMPTY_PASSWORD=yes" -p 3306:3306 --rm --name mysql mysql:latest #(just ctrl-c to stop db and clean the container)
docker run -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" --rm --name elasticsearch elasticsearch:7.6.0 #(in a second terminal, just ctrl-c to stop db and clean the container)

Start tests based on the database container

TEST_MYSQL_HOST=localhost:3306 TEST_MYSQL_DBNAME=test TEST_MYSQL_USERNAME=root TEST_MYSQL_PASSWORD='' make test-e2e-mysql

Run pgsql e2e tests

Setup a pgsql database inside docker

docker run -e "POSTGRES_DB=test" -p 5432:5432 --rm --name pgsql postgres:latest #(just ctrl-c to stop db and clean the container)

Start tests based on the database container

TEST_PGSQL_HOST=localhost:5432 TEST_PGSQL_DBNAME=test TEST_PGSQL_USERNAME=postgres TEST_PGSQL_PASSWORD=postgres make test-e2e-pgsql

Running individual tests

Example command to run example.test.e2e.js test file:

Note: unlike integration tests, this filtering is at the file level, not function

For SQLite:

make test-e2e-sqlite#example

For PostgreSQL databases(replace mysql to pgsql):

TEST_MYSQL_HOST=localhost:1433 TEST_MYSQL_DBNAME=test TEST_MYSQL_USERNAME=sa TEST_MYSQL_PASSWORD=MwantsaSecurePassword1 make test-e2e-mysql#example

Visual testing

Although the main goal of e2e is assertion testing, we have added a framework for visual regress testing. If you are working on front-end features, please use the following:

  • Check out main, make clean frontend, and run e2e tests with VISUAL_TEST=1 to generate outputs. This will initially fail, as no screenshots exist. You can run the e2e tests again to assert it passes.
  • Check out your branch, make clean frontend, and run e2e tests with VISUAL_TEST=1. You should be able to assert you front-end changes don't break any other tests unintentionally.

VISUAL_TEST=1 will create screenshots in tests/e2e/test-snapshots. The test will fail the first time this is enabled (until we get visual test image persistence figured out), because it will be testing against an empty screenshot folder.

ACCEPT_VISUAL=1 will overwrite the snapshot images with new images.

With VSCodium or VSCode

To debug a test, you can use "Playwright Test" for VScodium or VSCode. Before doing that you will need to manually start a Forgejo instance and populate it with data from models/fixtures by running:

make TAGS='sqlite sqlite_unlock_notify' 'test-e2e-debugserver'