Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a test framework to test the JS part of the course #2471

Merged
merged 9 commits into from
Dec 4, 2024

Conversation

michael-kerscher
Copy link
Collaborator

@michael-kerscher michael-kerscher commented Nov 25, 2024

This is a first draft for a test framework for testing the JS part of the book that is discussed in #2462

It is using webdriverIO and the webdriverIO Expect API in combination with Mocha. WebdriverIO is taking care of accessing the webpage with a real browser and can access the state of the page so behavior can be asserted.

Currently only a small test for the speaker-notes implementation demos the functionality.

The Static Server Service is used to serve the book in a way that the test runner can access it.

A CI integration can look like https://webdriver.io/docs/githubactions/ and is implemented with a headless setup. In CI it uses the language variable to set environment variable that configures where the built book should be mounted from

Fixes #2462.

@michael-kerscher michael-kerscher force-pushed the js-test-framework branch 2 times, most recently from 410fa34 to 7b3ac51 Compare November 26, 2024 10:05
@michael-kerscher michael-kerscher force-pushed the js-test-framework branch 4 times, most recently from a7099cc to 154b081 Compare November 26, 2024 11:55
Copy link
Collaborator

@mgeisler mgeisler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks really cool from a quick local test run!

tests/wdio.conf.ts Outdated Show resolved Hide resolved
@mgeisler
Copy link
Collaborator

Small things to add here or in a later PR:

  • a README which briefly explains the setup and in particular has links to documentation for the
    • the Mocha unit test framework and
    • the WebdriverIO test runner (just so I don't have to look it up myself when I want to add more tests)
  • when we have a README in the directory, we should then also add a link to to other relevant documentation so people know to update the tests
  • perhaps a default command for npm so that npm run does the right thing by default? If I remember correctly from my web developer days, that's possible 😄
  • would it be possible to have a setup for local development where the tests run against the server on http://localhost:3000 started by mdbook serve? Using the HTML on disk is great for GitHub CI, but I think it would be cool to iterate with mdbook serve locally

Feel free to do all this here or in later PRs, the existing setup is already a great improvement on what we have right now.

@michael-kerscher
Copy link
Collaborator Author

Thinking about mdbook serve, yes there is a benefit to this I have not thought of by not having to recreate the book.
This looks a bit more difficult to support two different setups though. Either I'm using mdbook serve in CI as well or I modify the config so it can be configured by the CI by setting a environment variable

@michael-kerscher michael-kerscher marked this pull request as ready for review December 2, 2024 09:29
@michael-kerscher
Copy link
Collaborator Author

I included a second config, deriving from the regular config that uses http://localhost:3000 (mdbook serve). The CI still uses the static file service to test exactly what is used in production.
A Readme is now also available.
I'm open to discuss if npm start should be developer friendly and use the npm test-mdbook or npm test. Currently it is testing with the static service

tests/README.md Outdated Show resolved Hide resolved
tests/README.md Outdated Show resolved Hide resolved
Copy link
Collaborator

@mgeisler mgeisler left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks awesome, please merge this so we can get it into production!

@mgeisler mgeisler enabled auto-merge (squash) December 4, 2024 09:00
@mgeisler mgeisler merged commit 48b2b5c into google:main Dec 4, 2024
35 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

JavaScript tests
2 participants