Merge pull request #20 from raferdev/feature/integrated_tests

Feature/integrated tests

Author: raferdev

.dockerignore

@@ -1,11 +1,4 @@
-Dockerfile
-.dockerignore
+Dockerfile.dockerignore
 node_modules
-npm-debug.log
-README.md
-.next
-.git
-.husky
-.changeset
-.vscode
-tests
+npm - debug.log
+README.md.next.git.husky.changeset.vscode

.github/workflows/deploy.yml

@@ -1,4 +1,8 @@
 name: Build and Deploy
+concurrency:
+  group: production
+  cancel-in-progress: true
+
 on:
   push:
     branches: [main]
@@ -80,5 +84,5 @@ jobs:
 
       - name: Update content
         run: |
-          sudo docker cp ./out server:/www/data/
-          sudo docker cp ./storybook-static server:/www/data/
+          sudo docker cp ./out nginx_server:/www/data/
+          sudo docker cp ./storybook-static nginx_server:/www/data/

.github/workflows/tests.yml

@@ -1,22 +1,33 @@
 name: Playwright Tests
 on:
-  push:
-    branches: [main]
+  pull_request:
+    branches: [main, development]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node & Pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.9.2
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: '18'
+          cache: 'pnpm'
+      - name: Create env file
+        run: |
+          echo "${{ secrets.ENV_TEST_FILE }}" > .env.local
       - name: Install dependencies
-        run: npm ci
+        run: pnpm i
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
+      - name: Build
+        run: pnpm run build
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm run test.playwright
       - uses: actions/upload-artifact@v3
         if: always()
         with:

Dockerfile.test

@@ -1,25 +1,18 @@
 version: '3'
 
 services:
-  ngnix:
-    container_name: server
-    restart: on-failure
-    tty: true
-    build: ./nginx/tests
-    volumes:
-      - builder_nginx_vol_tests:/www/data
-    depends_on:
-      - builder
+  nginx:
+    container_name: server_nginx
+    restart: 'no'
+    build:
+      context: .
+      dockerfile: ./nginx/tests/Dockerfile
     ports:
       - 3000:80
-
-  builder:
-    env_file:
-      - .env.local
-    container_name: front-build
-    build: '.'
-    volumes:
-      - builder_nginx_vol_tests:/app/build
+    networks:
+      - running-tests
 
 volumes:
-  builder_nginx_vol_tests:
+  builder_nginx_vol:
+networks:
+  running-tests:

docker-compose.test.yaml

@@ -11,8 +11,8 @@ http {
 
   add_header X-Frame-Options "SAMEORIGIN";
   add_header X-XSS-Protection "1; mode=block";
-  add_header Content-Security-Policy "worker-src blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.datadoghq-browser-agent.com; frame-src 'none' *.youtube.com; object-src 'none'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'; default-src 'none'; style-src 'self'; img-src 'self; font-src 'self';"
-  add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
+  add_header Content-Security-Policy "worker-src blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.datadoghq-browser-agent.com; frame-src 'none' *.youtube.com; object-src 'none'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'; default-src 'none'; style-src 'self'; img-src 'self; font-src 'self'; manifest-src 'https://rafer.dev/';"
+  add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
   add_header Referrer-Policy "strict-origin";
   add_header Permissions-Policy "geolocation=(self),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(),payment=()";
   add_header X-Content-Type-Options nosniff;
@@ -47,7 +47,7 @@ http {
     listen 80;
 
     gzip on;
-    gzip_types text/plain application/xml;
+    gzip_types text/plain application/xml font/woff2;
     gzip_proxied no-cache no-store private expired auth;
     gzip_min_length 1000;
     gunzip on;
@@ -122,4 +122,7 @@ http {
 
     error_page 404 /404.html;
     location = /404.html {
-      internal;
+      internal;
+    }
+  }
+}

nginx/nginx.conf

@@ -7,7 +7,8 @@ RUN mkdir /var/cache/nginx -p
 RUN rm /etc/nginx/mime.types
 RUN rm /etc/nginx/conf.d/default.conf
 
-COPY ./nginx.conf /etc/nginx/
-COPY ./mime.types /etc/nginx/conf/
+COPY ./nginx/tests/nginx.conf /etc/nginx/
+COPY ./nginx/tests/mime.types /etc/nginx/conf/
+COPY ./out /www/data/out
 
 EXPOSE 80

nginx/tests/Dockerfile

@@ -11,8 +11,8 @@ http {
 
     add_header X-Frame-Options "SAMEORIGIN";
     add_header X-XSS-Protection "1; mode=block";
-    add_header Content-Security-Policy "worker-src blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.datadoghq-browser-agent.com; frame-src 'none' *.youtube.com; object-src 'none'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'; default-src 'none'; style-src 'self'; img-src 'self; font-src 'self';"
-    add_header Strict-Transport-Security 'max-age=31536000; includeSubDomains; preload';
+    add_header Content-Security-Policy "worker-src blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' *.googletagmanager.com *.datadoghq-browser-agent.com; frame-src *.youtube.com; object-src 'none'; base-uri 'self'; form-action 'none'; frame-ancestors 'none'; img-src 'self'; font-src 'self'; manifest-src 'http://localhost:3000/';";
+    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
     add_header Referrer-Policy "strict-origin";
     add_header Permissions-Policy "geolocation=(self),midi=(),sync-xhr=(),microphone=(),camera=(),magnetometer=(),gyroscope=(),fullscreen=(),payment=()";
     add_header X-Content-Type-Options nosniff;
@@ -41,7 +41,7 @@ http {
         listen 80;
 
         gzip on;
-        gzip_types text/plain application/xml;
+        gzip_types text/plain application/xml font/woff2;
         gzip_proxied no-cache no-store private expired auth;
         gzip_min_length 1000;
         gunzip on;
@@ -116,4 +116,7 @@ http {
 
         error_page 404 /404.html;
         location = /404.html {
-            internal;
+            internal;
+        }
+    }
+}

nginx/tests/nginx.conf

@@ -9,6 +9,7 @@
     "build": "next build",
     "build.storybook": "storybook build",
     "build.tailwind": "pnpm dlx tailwindcss -o ./src/styles/tailwind.css",
+    "build.docker": "pnpm move.prod && tail -f /dev/null",
     "move.prod": "cp -fr out build && cp -fr storybook-static build",
     "prepare": "husky install",
     "__move-out-storybook": "cp out -fr out/_next/static/media/ .storybook/public && cp out -fr out/_next/static/css/ .storybook/public",
@@ -18,8 +19,8 @@
     "docker.prod": "docker compose up -f docker-compose.yaml --no-cache --log-level 0",
     "test": "docker-compose -f docker-compose.test.yaml up",
     "test.reset": "docker-compose -f docker-compose.test.yaml up --build",
-    "test.playwright": "npx playwright test",
-    "test.playwright.debug": "npx playwright test --debug",
+    "test.playwright": "pnpm playwright test",
+    "test.playwright.debug": "pnpm playwright test --debug",
     "types.check": "pnpm dlx tsc *.ts /*.tsx --noEmit",
     "check.eslint": "ESLINT_USE_FLAT_CONFIG=true eslint -c eslint.config.mjs --quiet --fix"
   },

package.json

@@ -8,7 +8,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
   use: {
-    baseURL: 'http://127.0.0.1:3000',
+    baseURL: process.env.WEB_SERVER_URL || 'http://localhost:3000',
 
     trace: 'on-first-retry',
   },
@@ -18,40 +18,16 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] },
     },
-
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
     {
       name: 'Mobile Chrome',
-      use: { ...devices['Pixel 5'] },
-    },
-    {
-      name: 'Mobile Safari',
-      use: { ...devices['iPhone 12'] },
-    },
-
-    {
-      name: 'Microsoft Edge',
-      use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    },
-    {
-      name: 'Google Chrome',
-      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+      use: { ...devices['Galaxy S9+'] },
     },
   ],
 
   webServer: {
     command: 'npm run test',
-    url: 'http://127.0.0.1:3000',
-    reuseExistingServer: !process.env.CI,
-    timeout: 120 * 1000,
+    url: process.env.WEB_SERVER_URL || 'http://localhost:3000',
+    reuseExistingServer: true,
+    timeout: 20 * 60 * 1000,
   },
 })