Merge branch 'master' into feature/592-implement-heat-map-on-the-fron…

…tend

.gitignore

@@ -10,8 +10,6 @@ report.html
 .mypy_cache
 .install
 
-### dotenv ###
-.env
 ### Emacs ###
 # -*- mode: gitignore; -*-
 *~

.nvmrc

@@ -0,0 +1 @@
+v20

.pre-commit-config.yaml

@@ -23,7 +23,7 @@ repos:
         name: frontend format
         args:
           [
-            --config=frontend/prettier.config.js,
+            --config=frontend/prettier.config.cjs,
             --ignore-path=frontend/.prettierignore,
           ]
         files: ^frontend/
@@ -47,7 +47,7 @@ repos:
         name: frontend lint
         args:
           [
-            --config=frontend/.eslintrc.js,
+            --config=frontend/.eslintrc.cjs,
             --max-warnings=0,
             --ignore-path=frontend/.eslintignore,
           ]

backend/.gitignore

@@ -1 +1,2 @@
 /src/schema.rs
+.env

benchmarks/README.md

@@ -1,3 +1,56 @@
 # Benchmarks
 
-This folder contains scripts to run benchmarks for PermaplanT.
+## Requirements
+
+- nodejs 20
+- npm
+
+## Installation and Usage
+
+1. Install dependencies
+
+```shell
+npm install
+```
+
+2. Start the backend from the backend folder
+
+```shell
+cargo run
+```
+
+3. Start the frontend from the frontend folder
+
+```shell
+npm run dev
+```
+
+4. Run benchmarks
+
+```shell
+npm run benchmark
+```
+
+## Benchmarking
+
+The benchmarking script runs a performance audit on a web page using [Lighthouse](https://github.com/GoogleChrome/lighthouse) and [Playwright](https://playwright.dev/).
+The audit measures the performance of a web page by generating a performance score and then saves the results of the audit in `report` folder:
+
+- `<test_name>-report.json` - the raw report of LightHouse for a single test case defined in `performance-audit.spec.js`
+- `<timestamp>-lighthouse-results.csv` - the results of the audit for all test cases
+
+Metrics:
+
+- `First Contentful Paint (FCP)` - the time it takes for the browser to render the first bit of content on the page. Measured in milliseconds.
+- `Interactive` - the time it takes for the page to become fully interactive. Measured in milliseconds.
+- other metrics are described in the [Chrome Developers documentation](https://web.dev/performance-scoring/)
+
+Pages to audit are defined in `performance-audit.spec.js` file as individual test cases.
+In order to add new pages to the audit, add a new test case to the file e.g.:
+
+```javascript
+test("Another page", async () => {
+  const testname = "Another page";
+  await audit(testname, "http://localhost:5173/another_page", results);
+});
+```

ci/container-images/permaplant-node/Dockerfile

@@ -1,5 +1,5 @@
 # docker build -t permaplant-node -f ci/container-images/permaplant-node/Dockerfile .
-FROM node:19.4.0-slim
+FROM node:20.10.0-slim
 
 RUN mkdir /.npm /.cache /.java-caller
 RUN chown 47110:47110 -R /.npm /.cache /.java-caller

doc/architecture/05building.md

@@ -87,8 +87,8 @@ flowchart LR
 
 ### `__mocks__`
 
-This folder has a special name to be recognized by our test runner jest.
-More details on how mocking with jest works can be found in the [jest documentation](https://jestjs.io/docs/manual-mocks).
+This folder has a special name to be recognized by our test runner vitest.
+More details on how mocking with vitest works can be found in the [documentation](https://vitest.dev/guide/mocking.html#modules).
 
 ### `assets`
 

doc/changelog.md

@@ -29,7 +29,7 @@ Syntax: `- short text describing the change _(Your Name)_`
 - _()_
 - _()_
 - _()_
-- _()_
+- Migrate from Jest to Vitest, update Vite to v5, update Node to 20, .env should be .env.local _(Paul)_
 - _()_
 - _()_
 - Remove error messages in console if a seed was not found _(Moritz)_

doc/decisions/frontend_documentation.md

@@ -53,9 +53,9 @@ We will use [TypeDoc](https://typedoc.org/) with the markdown plugin to extract
 
 ## Decision
 
-We will use [Storybook](https://storybook.js.org/) to enable a project wide component overview and style-guide.
-It has support for `MDX`, a format that enables embeddable components in markdown.
-It has support for automated testing via `Jest` and `Playwright`.
+We will use [Storybook](https://storybook.js.org/) to enable a project-wide component overview and style guide.
+It has support for `MDX`, a format that enables embeddable components in Markdown.
+It has support for automated testing via `Vitest` and `Playwright`.
 
 ## Rationale
 

doc/development_setup.md

@@ -51,8 +51,8 @@ to manage your node environment:
 
 ```bash
 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
-nvm install 19.4.0
-nvm use 19.4.0
+nvm install 20
+nvm use 20
 ```
 
 Or if you use the default macOS starting with Catalina shell `zsh`, try:

doc/tests/README.md

@@ -137,7 +137,7 @@ This will include testing of all features, navigation, and error handling.
 
 - E2E: Python Playwright & Pytest + plugins
 - Backend: Rust built-in tests by cargo
-- Frontend: Jest
+- Frontend: Vitest
 
 ## Test Data Management
 
@@ -160,7 +160,6 @@ This will include testing of all features, navigation, and error handling.
 - Unit and Integration tests must be fully automated.
 - Security and Performance tests may be manual.
 - System tests are automated (if possible) according to [the e2e guidelines](../guidelines/e2e.md).
-- Selenium, Cypress and Jest must be used for UI automation testing.
 
 ## Other Considerations
 

doc/tests/frontend.md

@@ -2,7 +2,7 @@
 
 ## Libraries
 
-PermaplanT uses the [Jest](https://jestjs.io) testing framework.
+PermaplanT uses the [Vitest](https://vitest.dev/) testing framework.
 
 [React Test Renderer](https://legacy.reactjs.org/docs/test-renderer.html), [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) and [User Event](https://testing-library.com/docs/user-event/intro) are available as companion libraries.
 
@@ -42,6 +42,10 @@ If possible, [User Event](https://testing-library.com/docs/user-event/intro) sho
 
 ## Logic Tests
 
-The remaining tests are used to test our frontends endpoints, helper functions and in general code that is not tied to the DOM.
+The remaining tests are used to test our helper functions and in general code that is not tied to the DOM.
 
-[Jest](https://jestjs.io) provides plenty of APIs that can be used to mock functions and backend routes for this purpose.
+[Vitest](https://vitest.dev/) provides plenty of APIs that can be used to mock functions for this purpose.
+
+Mocking API requests should be done with [MSW](https://mswjs.io/docs/).
+There is an example of this in `src/__test_utils__/msw_handlers/plants.ts`.
+The gist is, MSW intercepts all requests, for which a handler is defined returns the handler's response instead of the backend's.

frontend/.env

@@ -0,0 +1,5 @@
+// Env variables must have the prefix VITE_ for Vite to include them.
+// More information about env variables with Vite can be found here: https://vitejs.dev/guide/env-and-mode.html
+
+VITE_BASE_API_URL=http://localhost:8080
+VITE_NEXTCLOUD_URI=https://cloud.permaplant.net

frontend/.env.production

@@ -0,0 +1,4 @@
+# This file is used by the build system to provide environment variables to the application.
+
+VITE_BASE_API_URL="/"
+VITE_NEXTCLOUD_URI="https://cloud.permaplant.net"

frontend/.env.sample

@@ -1,5 +1,8 @@
 # Env variables must have the prefix VITE_ for Vite to include them.
 # More information about env variables with Vite can be found here: https://vitejs.dev/guide/env-and-mode.html
+# The .env file is checked into version control, but the .env.local file is not.
+# This allows us to have default values for the env variables, but also allows
+# developers to override them locally without affecting other developers.
 
 # The URL used to connect to the backend.
 # e.g.

frontend/.gitignore

@@ -13,7 +13,5 @@ src/generated/*
 *.sln
 *.sw?
 
-.env
-
 # storybook build
 storybook-static

frontend/README.md

@@ -2,8 +2,8 @@
 
 ## Requirements
 
-- nodejs 19.4.0 ([Installation guide](../doc/development_setup.md))
-- npm v9.2.0
+- nodejs 20 ([Installation guide](../doc/development_setup.md))
+- npm v10
 
 ## Installation and Usage
 
@@ -20,11 +20,11 @@ npm install
 npm run generate-api-types
 ```
 
-3. Create '.env' file and copy content from '.env.sample'.
+3. Create '.env.local' file and copy content from '.env.sample'.
    Modify env variables to fit the environment.
 
 ```shell
-cp .env.sample .env
+cp .env.sample .env.local
 ```
 
 4. Start development server

frontend/__mocks__/zustand.ts

@@ -1,21 +1,44 @@
-// if using Jest:
-import { act } from 'react-dom/test-utils';
-import { StateCreator } from 'zustand';
+import { act } from '@testing-library/react';
+import * as zustand from 'zustand';
 
-const { create: actualCreate } = jest.requireActual<typeof import('zustand')>('zustand');
+const { create: actualCreate, createStore: actualCreateStore } = await vi.importActual<
+  typeof zustand
+>('zustand');
 
 // a variable to hold reset functions for all stores declared in the app
 const storeResetFns = new Set<() => void>();
 
+const createUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreate(stateCreator);
+  const initialState = store.getState();
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+};
+
+// when creating a store, we get its initial state, create a reset function and add it in the set
+export const create = (<T>(stateCreator: zustand.StateCreator<T>) => {
+  // to support curried version of create
+  return typeof stateCreator === 'function' ? createUncurried(stateCreator) : createUncurried;
+}) as typeof zustand.create;
+
+const createStoreUncurried = <T>(stateCreator: zustand.StateCreator<T>) => {
+  const store = actualCreateStore(stateCreator);
+  const initialState = store.getState();
+  storeResetFns.add(() => {
+    store.setState(initialState, true);
+  });
+  return store;
+};
+
 // when creating a store, we get its initial state, create a reset function and add it in the set
-export const create =
-  () =>
-  <S>(createState: StateCreator<S>) => {
-    const store = actualCreate(createState);
-    const initialState = store.getState();
-    storeResetFns.add(() => store.setState(initialState, true));
-    return store;
-  };
+export const createStore = (<T>(stateCreator: zustand.StateCreator<T>) => {
+  // to support curried version of createStore
+  return typeof stateCreator === 'function'
+    ? createStoreUncurried(stateCreator)
+    : createStoreUncurried;
+}) as typeof zustand.createStore;
 
 // Reset all stores after each test run
 beforeEach(() => {