Skip to content

Latest commit

 

History

History
69 lines (42 loc) · 3.08 KB

CONTRIBUTING.md

File metadata and controls

69 lines (42 loc) · 3.08 KB
Raw

Contributing to Svader

All contributions to Svader are welcome and greatly appreciated!

This document outlines the process of developing and contributing to the project.

Development

Start by installing the necessary dependencies:

npm install

Project Structure

The project is structured in the following way:

  • The top-level package, "svader-monorepo", is a workspace containing the necessary configuration files, scripts, etc. to build and test the project.
  • packages/svader/ contains the Svader library itself, which is the main package that is published to npm.
  • packages/tests-svelte4/ and packages/tests-svelte5/ contain (what should be) visually identical test sites implemented with Svelte 4 and Svelte 5, respectively. These sites contain a set of routes representing different test cases for the library.
  • tests/ contains the automated tests of the project, plus the .generated-screenshots/ directory. The contents of this directory are automatically generated by the tests and should, in general, not be modified manually. See the Testing section for more information.

To run a test site on the development server, use the following commands, respectively:

Svelte 4:

npm run dev:v4

Svelte 5:

npm run dev:v5

This will start the development server, allowing you to view the test site at http://localhost:5173.

Testing

To run the tests, run the following command in the root directory of the project:

npm run test

This will run the automated tests using the Playwright testing framework.

Playwright works by running the test sites in a set of different browsers on your computer. This means that it might be necessary to install some additional browsers at this point, which Playwright will guide you through if necessary.

Svader's test suite consists of a set of visual tests that are run against each of the test sites. The tests will take screenshots at the declared points and compare them to a reference image from the .generated-screenshots/ directory. When a newly added test is run for the first time, the reference images will be created automatically and can be inspected to ensure that the test is working as expected. If a reference image has become outdated, the image can be deleted, and the tests can be re-run to generate a new one.

Style Guide

To ensure consistent code style, the Prettier code formatter is used to automatically format the code. When you open a pull request, an automated check will be run to ensure that the code is formatted correctly with respect to the .prettierrc configuration file.

The same check can be run locally using the following command:

npm run check

When using VS Code, the workspace is set up to automatically run this formatting on every save, as long as you have the recommended Prettier extension installed.

Licensing

By contributing your code, you agree to license your contribution under the MIT License.