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`.
2.4 KiB
2.4 KiB
Development
Before your commit, a good practice is to:
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 buildbeforenpm run preview.
- Start a local web server that serves the built solution from
Docker:
- Build:
docker build -t undergroundwires/privacy.sexy:latest . - 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.jsonfile.
- This script checks and sets the necessary configurations for VSCode in
Recommended extensions
You should use EditorConfig to follow project style.
For Visual Studio Code, .vscode/extensions.json includes list of recommended extensions.