Merge pull request #20 from Dino-Kupinic/develop

feat: readme and frontend tests

README.md

@@ -1,4 +1,5 @@
 # Schulbuchaktion
+
 Application for teachers to easily manage the upcoming books for each classroom at the HTL Steyr.
 
 > [!CAUTION]
@@ -7,70 +8,165 @@ Application for teachers to easily manage the upcoming books for each classroom
 ## ✨ Installation and Configuration
 
 ### Installation for Development
+
 1. clone the repository:
+
 ```bash
 git clone https://github.com/Dino-Kupinic/Schulbuchaktion.git
 ```
 
 ### Frontend
+
 1. go into the frontend directory
+
 ```bash
 cd frontend
 ```
 
 2. install packages
+
 ```bash
 pnpm i 
 ```
-> [!IMPORTANT]  
+
+> [!TIP]  
 > If you don't have pnpm installed, checkout https://pnpm.io/installation to install for your operating system.
 
 3. run dev server
+
 ```bash
 pnpm run dev
 ```
-5. Head to http://localhost:3000/
+
+4. Head to http://localhost:3000/
 
 ### Backend
+
 1. go into the backend directory
+
 ```bash
-cd backend
+cd ../backend
 ```
-2. install dependencies
+
+2. define enviroment variables
+
+Create a `.env` file and checkout the `.env.example`. Copy the content into your `.env` and replace
+the `SECRET_PASSWORD`, `USERNAME`, `BIND_PORT`, `APP_SECRET`  fields with your own.
+
+> [!IMPORTANT]  
+> For the `APP_SECRET` checkout https://symfony.com/doc/current/reference/configuration/framework.html#secret to see the
+> latest requirements.
+
+3. start docker
+
 ```bash
-composer install
+docker compose up -d
 ```
-3. define enviroment variables
 
-Create a `.env` file and checkout the `.env.example`. You can copy the content and replace the `SECRET_PASSWORD` field with a password of your choosing.
+> [!TIP]  
+> If you don't have docker installed, checkout https://www.docker.com/products/docker-desktop/ to install for your
+> operating system.
 
-4. start the dev server
+4. install dependencies
+
+```bash
+composer install
 ```
+
+5. start the dev server
+
+```bash
 symfony server:start
 ```
+
 > [!IMPORTANT]  
-> If you don't have symfony cli installed, checkout https://symfony.com/download#step-1-install-symfony-cli to install for your operating system.
+> If you don't have symfony cli installed, checkout https://symfony.com/download#step-1-install-symfony-cli to install
+> for your operating system.
+
+6. head to http://127.0.0.1:8000
 
-5. head to http://127.0.0.1:8000
+### Docs
+
+1. go into the docs directory
+
+```bash
+cd ../docs
+```
+
+2. install packages
+
+```bash
+pnpm i 
+```
+
+> [!TIP]  
+> If you don't have pnpm installed, checkout https://pnpm.io/installation to install for your operating system.
+
+3. run dev server
+
+```bash
+pnpm run docs:dev
+```
+
+4. Head to http://localhost:5173/
 
 ## 🚀 Deployment
+
+> [!NOTE]  
+> The frontend operates as a "Single Page
+> Application" [SPA](https://nuxt.com/docs/guide/concepts/rendering#client-side-rendering), requiring the client to
+> handle all rendering tasks. It's essential to acknowledge that due to this architecture, there may be limitations in
+> terms of SEO optimization. However, it's worth noting that the application's primary use case doesn't heavily rely on
+> search engine visibility, since it is meant to be used as an internal tool.
+
 ### Frontend
+
 1. run build
+
 ```bash
-npm run build
+pnpm run build
 ```
+
 2. check if everything works as it should
+
 ```bash
-npm run preview
+pnpm run preview
 ```
+
 3. Head to http://localhost:3000/
 4. All generated assets can be found in `./output`
 
 > [!TIP]
 > Further information regarding deployment can be found on https://nuxt.com/deploy
 
 ### Backend
-// TODO: Add Backend deploy steps
+
+The latest information regarding deploying symfony can be found
+here: https://symfony.com/doc/current/deployment.html#symfony-deployment-basics
+
+### Docs
+
+> [!NOTE]  
+> The documentation uses the same principle as the frontend. More
+> infos: https://vitepress.dev/guide/what-is-vitepress#performance
+
+1. run build
+
+```bash
+pnpm run docs:build
+```
+
+2. check if everything works as it should
+
+```bash
+pnpm run docs:preview
+```
+
+3. Head to http://localhost:4173/
+4. All generated assets can be found in `./vitepress/dist`
+
+> [!TIP]
+> Further information regarding deployment can be found on https://vitepress.dev/guide/deploy
 
 ## 😄 Authors
 
@@ -81,18 +177,21 @@ npm run preview
 - [@Lukas Bauer](https://www.github.com/dsamhabe)
 
 ## 🐥 Team Organization:
+
 ### Scrum Master + Full Stack:
+
 - Dino Kupinic
 
 ### Frontend
+
 - Daniel Samhaber
 - Jannick Angerer
 
 ### Backend
+
 - Michael Ploier
 - Lukas Bauer
 
-
 ## 🛠️ Tech Stack
 
 - Symfony
@@ -101,9 +200,11 @@ npm run preview
 - Docker
 
 #### Frontend
+
 You can find all dependencies in the `package.json` and for the `nuxt.config.ts` in the `modules` section.
 
 #### Backend
+
 You can find all dependencies in the `composer.json`.
 
 ## 😊 License

frontend/.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm install -g pnpm && pnpm install
+    - name: Install Playwright Browsers
+      run: pnpm exec playwright install --with-deps
+    - name: Run Playwright tests
+      run: pnpm exec playwright test
+    - uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

frontend/.gitignore

@@ -22,3 +22,7 @@ logs
 .env
 .env.*
 !.env.example
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

frontend/app.vue

@@ -1,5 +1,3 @@
 <template>
-  <div>
-    <NuxtWelcome />
-  </div>
+
 </template>

frontend/nuxt.config.ts

@@ -33,7 +33,7 @@ export default defineNuxtConfig({
     "@pinia-plugin-persistedstate/nuxt",
     "@nuxt/ui",
     "nuxt-csurf",
-    "@nuxtjs/storybook",
+    // "@nuxtjs/storybook",
     "@vite-pwa/nuxt",
     "nuxt-typed-router",
     "nuxt-viewport",

frontend/package.json

@@ -8,6 +8,9 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
+    "test": "vitest run test/unit --silent=false",
+    "e2e-test": "npx playwright test test/e2e && npx playwright show-report",
+    "e2e-test-ui": "npx playwright test test/e2e --ui",
     "storybook": "storybook dev --port 6006",
     "build-storybook": "storybook build"
   },
@@ -25,6 +28,7 @@
     "@nuxtjs/storybook": "7.0.0",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
     "@pinia/nuxt": "^0.5.1",
+    "@playwright/test": "^1.42.1",
     "@storybook-vue/nuxt": "0.2.1",
     "@storybook/addon-essentials": "7.6.7",
     "@storybook/addon-interactions": "7.6.7",
@@ -43,6 +47,8 @@
     "nuxt-viewport": "^2.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "7.6.7"
+    "storybook": "7.6.7",
+    "vitest": "^1.3.1",
+    "happy-dom": "^12.10.3"
   }
-}
+}

frontend/playwright.config.ts

@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './test/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+});