feat/unit-testing

.github/workflows/node-ci.yml

@@ -91,3 +91,33 @@ jobs:
 
       - name: Validate HTML
         run: npm run lint:html
+
+  unit-test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    needs: setup
+
+    env:
+      DATOCMS_READONLY_API_TOKEN: ${{ secrets.DATOCMS_READONLY_API_TOKEN }}
+      DATOCMS_API_TOKEN: '' # required but unused in this workflow
+      HEAD_START_PREVIEW_SECRET: '' # required but unused in this workflow
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+
+      - name: Use dependencies cache
+        uses: actions/cache@v3
+        with:
+          path: ./node_modules
+          key: modules-${{ hashFiles('package-lock.json') }}
+
+      - name: Prepare setup
+        run: npm run prep
+
+      - name: Run unit tests
+        run: npm run test:unit

README.md

@@ -9,8 +9,9 @@
 - Provide pre-configured services like a CMS and deployment platform.
 - Support common needs like internationalisation (i18n), SEO, redirects and analytics.
 - Provide functional interactivity without a JS framework (React, Vue, Svelte, etc)*.
-- Provide functional interactivity without specific styling ("unstyled")*. 
+- Provide functional interactivity without specific styling ("unstyled")*.
 - Provide a fully accessible and highly performant baseline for every project.
+- Utilise testing to ensure quality and prevent regressions.
 
 \* We'll leave the choice for a JS framework and strategy for styling to developers using Head Start for their project.
 
@@ -28,7 +29,7 @@ Progress can also be tracked on the [Head Start project board](https://github.co
 
 The site is created as lightweight progressively enhanced website connected to a headless CMS:
 
-- [Astro](https://astro.build/) - web framework to structure this project. Astro is selected because it embraces web standards, is designed for performance, and supports all our favourite UI frameworks (React, Vue and Svelte). 
+- [Astro](https://astro.build/) - web framework to structure this project. Astro is selected because it embraces web standards, is designed for performance, and supports all our favourite UI frameworks (React, Vue and Svelte).
 - [DatoCMS](https://www.datocms.com/) - a headless CMS is connected to manage web content. DatoCMS is selected for its modular and structured content options, advanced image service, multi-language support and GraphQL API.
 - [Cloudflare Pages](https://pages.cloudflare.com/) - is a JAMstack hosting platform. Cloudflare Pages is selected for its reliable CDN, zero cold-start workers, green hosting and affordable pricing.
 
@@ -81,19 +82,21 @@ All documentation is located in [`docs/`](docs/):
 - [Routing](docs/routing.md)
 - [Search](docs/search.md)
 - [Search Engine Optimisation (SEO)](docs/seo.md)
+- [Testing](docs/testing.md)
 
 ## Commands
 
 All commands are run from the root of the project, from a terminal:
 
-| Command (`npm run ...`) | Action                                          
+| Command (`npm run ...`) | Action
 |:------------------------| :-----------------------------------------------
 | `dev`                   | Starts local dev server at `localhost:4323` (head in T9)
 | `build`                 | Build your production site to `./dist/`
 | `preview`               | Preview your build locally, before deploying
 | `astro ...`             | Run commands like `astro add` (see `astro -- --help`)
 | `create`                | Scaffold new Block, Component, API or Page route
 | `lint`                  | Check code style and valide HTML output
+| `test`                  | Runs the test suite, individual tests are available using `test:...`
 
 ## Contributing
 

docs/testing.md

@@ -0,0 +1,22 @@
+# Testing
+
+Head Start utilises testing to ensure the quality of the codebase and to prevent regressions. This helps developers to build with confidence which is especially important with a project that is developed and maintained by multiple developers. The CI pipeline will run the tests automatically on every push to the repository.
+
+We use [vitest](https://vitest.dev/) to run our tests. Vitests is configurable through its config (vitest.config.ts) and automatically finds test files to run if they follow the `<filename>.test.ts` naming convention.
+
+## Unit Testing
+
+We use unit testing to test individual library functions and components. Our setup uses `vitest` for running test and [msw](https://mswjs.io/) for mocking network requests.
+
+You can run the unit tests with the following command:
+
+```bash
+npm run test:unit
+```
+
+NOTE: not all unit test have been added at the time of writing this.
+
+## e2e Testing
+
+We plan to add this in the future.
+