89 docs testing (#358)

* docs(docs): 📝 write docs for testing

Co-authored-by: Jakob <jakob.gregusson@gmail.com>, Co-authored-by: Lucas<lucastran1107@gmail.com>

* chore(ide): add docs scope to conventional commits

* docs(docs): 📝 Co-authored-by: Jakob <jakob.gregusson@gmail.com>, Co-authored-by: Lucas<lucastran1107@gmail.com>

* docs(docs): 📝 add test file location to documentation

* docs(docs): 📝 Update docs for component testing

* test(docs): 📝 update docs for testing

* docs(docs): 📝 Update docs for frontend, backend, general usage and root

* docs(docs): 📝 update readmes and remove yarn from command lines since we only use npm

* fix: 🐛 prettier

* docs(docs): 📝 add prettier info

* docs(docs): 📝 write ESLint docs

---------

Co-authored-by: Mats Nyfløt <mnyflot@gmail.com>
Co-authored-by: Jakob <jakob.gregusson@gmail.com>, Co-authored-by: Lucas<lucastran1107@gmail.com>
Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
Co-authored-by: Mads Hermansen <mads.d.hermansen+main@gmail.com>

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "conventionalCommits.scopes": ["backend", "frontend", "ide", "ci/cd"],
-    "eslint.workingDirectories": ["./frontend"]
+  "conventionalCommits.scopes": ["backend", "ide", "frontend", "docs", "ci/cd"],
+  "eslint.workingDirectories": ["./frontend"]
 }

README.md

@@ -3,7 +3,7 @@ The Hypso Space Outreach Website is an interactive web page developed for the ge
 
 ![alt text](docs/images/image.png)
 
-## General Information  
+## General Information
 
 * Country: 🇳🇴 Norway  
 * Customer: NTNU SmallSat Lab  
@@ -24,7 +24,39 @@ The Hypso Space Outreach Website is an interactive web page developed for the ge
 
 Goto [`/docs/README.md`](/docs/README.md) to read more about the project.
 
+1. Clone this repository.
+2. Navigate to the `backend/` directory and follow the instructions [here](./backend/README.md).
+3. Navigate to the `frontend/` directory and follow the instructions [here](./frontend/README.md).
 
 ## Contributing
 
-Contributions are welcome, for more information, refer to the documentation in the `/docs/` folder.
+To ensure a consistent coding style, we have used Prettier to enforce code formatting.
+Please install the Prettier extension for VSCode. Prettier can be configured to run on save, or it can be ran manually with the command
+
+```
+npx prettier --write
+```
+
+This will automatically format the code according to the rules set up for this project. The specific formatting rules have been defined here:
+
+```
+./frontend/.prettierrc
+```
+
+Prettier has been integrated into the CI/CD pipeline to automatically check code formatting during pull requests.
+
+We have also used ESLint to maintain code quality. It can be run manually with the command
+
+```
+npm run lint
+```
+
+ESLint has also been integratd into the CI/CD pipeline to automatically check code quality during pull requests. The specific linting rules have been defined here:
+
+```
+./frontend/.eslintrc.json
+```
+
+## More Info
+
+If looking for more information about the project please refer to the submitted report which Small Satellite Lab should have access to as well as the documentation in the `/docs/` folder.

backend/README.md

@@ -16,8 +16,6 @@ Start your Strapi application with autoReload enabled. [Learn more](https://docs
 
 ```
 npm run develop
-# or
-yarn develop
 ```
 
 ### `start`
@@ -26,8 +24,6 @@ Start your Strapi application with autoReload disabled. [Learn more](https://doc
 
 ```
 npm run start
-# or
-yarn start
 ```
 
 ### `build`
@@ -36,8 +32,6 @@ Build your admin panel. [Learn more](https://docs.strapi.io/dev-docs/cli#strapi-
 
 ```
 npm run build
-# or
-yarn build
 ```
 
 ## ⚙️ Deployment
@@ -53,13 +47,3 @@ Strapi gives you many possible deployment options for your project including [St
 - [Changelog](https://strapi.io/changelog) - Find out about the Strapi product updates, new features and general improvements.
 
 Feel free to check out the [Strapi GitHub repository](https://github.com/strapi/strapi). Your feedback and contributions are welcome!
-
-## ✨ Community
-
-- [Discord](https://discord.strapi.io) - Come chat with the Strapi community including the core team.
-- [Forum](https://forum.strapi.io/) - Place to discuss, ask questions and find answers, show your Strapi project and get feedback or just talk with other Community members.
-- [Awesome Strapi](https://github.com/strapi/awesome-strapi) - A curated list of awesome things related to Strapi.
-
----
-
-<sub>🤫 Psst! [Strapi is hiring](https://strapi.io/careers).</sub>

docs/testing.md

@@ -0,0 +1,92 @@
+# Introduction
+
+Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.
+
+This project uses Playwright Test for both end-to-end testing and component testing. The test files can be found in this folder:
+
+```
+IT2901-SmallSatLab-Hypso\frontend\tests
+```
+
+## Download Browsers
+
+Download the necessary browsers to run the tests.
+
+```
+npx playwright install
+```
+
+# End-to-end testing
+
+See the [docs](https://playwright.dev/docs/intro) for more info about End-to-end testing in Playwright.
+
+## Running tests
+
+By default tests will be run on all 3 browsers, chromium, firefox and webkit using all available workers (usually between 3-6). This can be configured in the playwright.config file. Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.
+
+Move to the frontend folder and run the tests.
+
+```
+cd frontend
+npm run test
+```
+
+### HTML Test Reports
+
+After your test completes, an HTML Reporter will be generated, which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test's errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.
+
+### Running Tests in UI Mode
+
+Run your tests with UI Mode for a better developer experience with time travel debugging, watch mode and more.
+
+```
+npm run testui
+```
+
+### Running Codegen
+
+Use the codegen command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead.
+
+```
+npm run codegen
+```
+
+### Updating Playwright
+
+To update Playwright to the latest version run the following command:
+
+```
+npm install -D @playwright/test@latest
+```
+
+You can always check which version of Playwright you have by running the following command:
+
+```
+npx playwright --version
+```
+
+### System requirements
+
+- Node.js 16+
+- Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL).
+- MacOS 12 Monterey, MacOS 13 Ventura, or MacOS 14 Sonoma.
+- Debian 11, Debian 12, Ubuntu 20.04 or Ubuntu 22.04, with x86-64 or arm64 architecture.
+
+# Component testing
+
+See the [docs](https://playwright.dev/docs/test-components) for more info about component testing in Playwright.
+
+## Running tests
+
+You can run tests using the VS Code extension or the command line.
+
+Move to the frontend folder and run the tests.
+
+```
+cd frontend
+npm run test-ct
+```
+
+
+### Further reading: configure reporting, browsers, tracing
+Refer to [Playwright](https://playwright.dev/docs/test-configuration) for configuring the project.

frontend/README.md

@@ -6,12 +6,6 @@ First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -28,9 +22,3 @@ To learn more about Next.js, take a look at the following resources:
 -   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.