From 2735fdf701ed10cfed54f97015e5ba4f544e59a5 Mon Sep 17 00:00:00 2001 From: scosman Date: Sun, 3 Mar 2024 10:09:03 -0500 Subject: [PATCH] Add testing CI. Yes, I should have more tests built in. But this way is at least setup for testing when I do. Add dev-ex description to README, and improve setup instructions. --- .github/workflows/format.yml | 2 +- .github/workflows/linting.yml | 2 +- .github/workflows/tests.yml | 25 ++++++++++++ README.md | 12 ++++-- package.json | 1 + src/{index.test.js => index.test.ts} | 0 src/routes/(marketing)/+page.svelte | 57 ++++++++++++++++++---------- 7 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 .github/workflows/tests.yml rename src/{index.test.js => index.test.ts} (100%) diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml index a8a7b15a..987661bd 100644 --- a/.github/workflows/format.yml +++ b/.github/workflows/format.yml @@ -11,7 +11,7 @@ env: jobs: build_and_test: - name: Build + name: Code Format Check runs-on: ubuntu-latest steps: diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml index a5691c09..4727448b 100644 --- a/.github/workflows/linting.yml +++ b/.github/workflows/linting.yml @@ -11,7 +11,7 @@ env: jobs: build_and_test: - name: Build + name: Linting and Typechecking runs-on: ubuntu-latest steps: diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml new file mode 100644 index 00000000..3863d478 --- /dev/null +++ b/.github/workflows/tests.yml @@ -0,0 +1,25 @@ +name: Linting + +on: [push] + +env: + PUBLIC_SUPABASE_URL: 'https://fake_test_url.supabase.co' + PUBLIC_SUPABASE_ANON_KEY: 'fake_anon_key' + PRIVATE_SUPABASE_SERVICE_ROLE: 'fake_service_role' + PRIVATE_STRIPE_API_KEY: 'fake_strip_api_key' + PUBLIC_SITE_NAME: 'SaaS Starter Build Test' + +jobs: + build_and_test: + name: Tests + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v3 + + - name: NPM install + run: npm install + + - name: Tests + run: npm run test_run + \ No newline at end of file diff --git a/README.md b/README.md index 651cadbd..bf2b4e70 100644 --- a/README.md +++ b/README.md @@ -132,13 +132,16 @@ npm run dev -- The repo includes [CI scripts](https://aws.amazon.com/devops/continuous-integration/) designed for [GitHub Actions](https://github.com/features/actions). These confirm you don’t break your [build](https://github.com/CriticalMoments/CMSaasStarter/blob/main/.github/workflows/build.yml), you use [proper code formatting](https://github.com/CriticalMoments/CMSaasStarter/blob/main/.github/workflows/format.yml), and [code linting and typechecking passes](https://github.com/CriticalMoments/CMSaasStarter/blob/main/.github/workflows/linting.yml). Github disables CI on forks by default, so if you fork this repo, be sure to go into the Github Actions page for your repo and enable workflows. -You can manually run these scripts yourself; `npm run build` for the build, `npm run format_check` to check formatting, `npm run lint` for the linting, and `npm run check` for typechecking. +You can manually run these scripts yourself; `npm run build` for the build, `npm run format_check` to check formatting, `npm run lint` for the linting, `npm run check` for typechecking, and `npm run test` for testing (if you add tests). -Installing a Svelte extension in your editor will help automatically apply formatting on-save, and show type issues inline. The [VS Code svelte extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) is excellent. [Extensions for other editors are available here.](https://sveltesociety.dev/tools#editor-support) +Installing extensions in your editor can automatically format-on-save, show linting/type issues inline, and run your test cases. We suggest the following extensions for VSCode: +- [Svelte Extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) for Svelte and accessibility issues +- [ESLint for type checking and linting](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) +- [Testing with Vitest](https://marketplace.visualstudio.com/items?itemName=vitest.explorer) - if you add tests -If you want to see linting errors inline as well, you should install an ESLint extension in your editor. You can find [the VSCode extension here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and extensions for other editors [here.](https://eslint.org/docs/latest/use/integrations) +Extensions for other editors are available [here](https://sveltesociety.dev/tools#editor-support) and [here](https://eslint.org/docs/latest/use/integrations). -To catch build, formatting and linting issues before you commit changes, we suggest the following local git hook. It will run before you commit, stop you from breaking the build, and show any issues that are found. Add the lines below to the git hook file at the location `.git/hooks/pre-commit`. +To catch build, formatting, linting and test issues before you commit changes, we suggest the following local git hook. It will run before you commit, stop you from breaking the build, and show any issues that are found. Add the lines below to an executable git hook script at the location `.git/hooks/pre-commit`. ``` #!/bin/sh @@ -147,6 +150,7 @@ npm run format_check npm run lint npm run build npm run check +npm run test_run ``` Finally: if you find build, formatting or linting rules too tedious, you can disable enforcement by deleting the CI files (`.github/workflows/*`) and remove the git hook (`.git/hooks/pre-commit`). diff --git a/package.json b/package.json index ff7e9f2d..93790a3c 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "test": "vitest", + "test_run": "vitest run", "lint": "eslint .", "format": "prettier --write --plugin prettier-plugin-svelte ./src", "format_check": "prettier --check --plugin prettier-plugin-svelte ./src" diff --git a/src/index.test.js b/src/index.test.ts similarity index 100% rename from src/index.test.js rename to src/index.test.ts diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte index 3ae2825c..4c111c9d 100644 --- a/src/routes/(marketing)/+page.svelte +++ b/src/routes/(marketing)/+page.svelte @@ -1,5 +1,24 @@