Files
privacy.sexy/docs/development.md
undergroundwires ec98d8417f Migrate Cypress (E2E) tests to Vite and TypeScript
This commit progresses the migration from Vue CLI to Vite (#230).

TypeScript migration:

- Convert JavaScript Cypress tests and configurations to TypeScript.
- Introduce `tsconfig.json` for Cypress, following official
  recommendation.

Test execution:

- Use Cypress CLI to run the tests.
- Rename Cypress commands to reflect official naming conventions.
- Start Vue server prior to Cypress execution, using
  `start-server-and-test` package based on official documentation.
- Remove dependency on Vue CLI plugin ((`@vue/cli-plugin-e2e-cypress`).

Configuration standardization (based on Cypress docs):

- Delete unused `plugins/` directory.
- Move test (spec) files to to the root directory.
- Add official ESLint plugin (`eslint-plugin-cypress`).

Changes for importing `vite.config.ts` into `cypress.config.ts`:

- Add TypeScript import assertations to files importing JSON files.
- Use ESM friendly way instead of `__dirname` to solve `ReferenceError:
  __dirname is not defined in ES module scrope`.

Other changes:

- Simplify comments in placeholder files.
- Create Cypress specific `.gitignore` for enhanced maintainability,
  clarity and scalability.
- Remove redundant `vue.config.cjs`.
2023-08-24 13:45:34 +02:00

2.4 KiB

Development

Before your commit, a good practice is to:

  1. Run unit tests
  2. Lint your code

You could run other types of tests as well, but they may take longer time and overkill for your changes. Automated actions executes the tests for a pull request or change in the main branch. See ci-cd.md for more information.

Commands

Prerequisites

  • Install node >15.x.
  • Install dependencies using npm install.

Testing

  • Run unit tests: npm run test:unit
  • Run integration tests: npm run test:integration
  • Run end-to-end (e2e) tests:
    • npm run test:cy:open: Run tests interactively using the development server with hot-reloading.
    • npm run test:cy:run: Run tests on the production build in a headless mode.

📖 Read more about testing in tests.

Linting

  • Lint all (recommended 💡): npm run lint
  • Markdown: npm run lint:md
  • Markdown consistency npm run lint:md:consistency
  • Markdown relative URLs: npm run lint:md:relative-urls
  • JavaScript/TypeScript: npm run lint:eslint
  • Yaml: npm run lint:yaml

Running

Web:

  • Run in local server: npm run dev
    • 💡 Meant for local development with features such as hot-reloading.
  • Preview production build: npm run preview
    • Start a local web server that serves the built solution from ./dist.
    • 💡 Run npm run build before npm run preview.

Docker:

  1. Build: docker build -t undergroundwires/privacy.sexy:latest .
  2. Run: docker run -it -p 8080:80 --rm --name privacy.sexy undergroundwires/privacy.sexy:latest

Building

  • Build web application: npm run build
  • Build desktop application: npm run electron:build
  • (Re)create icons (see documentation): npm run create-icons

Utility Scripts

  • Run fresh NPM install: ./scripts/fresh-npm-install.sh
    • This script provides a clean NPM install, removing existing node modules and optionally the package-lock.json (when run with -n), then installs dependencies and runs unit tests.
  • Configure VSCode: ./scripts/configure-vscode.sh
    • This script checks and sets the necessary configurations for VSCode in settings.json file.

You should use EditorConfig to follow project style.

For Visual Studio Code, .vscode/extensions.json includes list of recommended extensions.