Deployment

.github/workflows/e2e_tests.yaml

@@ -2,9 +2,11 @@ name: e2e tests
 on:
   workflow_dispatch:
   push:
+    # workflow is triggered on staging and branches starting with 'e2e'
+    # but tests always run against staging preview build
     branches:
       - staging
-      - feat-e2e-tests
+      - e2e**
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -16,15 +18,16 @@ jobs:
         with:
           node-version: 18.x
       - uses: actions/checkout@v3
+      - run: yarn
+      - run: yarn playwright install --with-deps chromium
       - uses: patrickedqvist/[email protected]
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           max_timeout: 1200
           check_interval: 20
-      - run: yarn
       - run: yarn e2e-workers
       - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: e2e-screenshots-on-fail
-          path: output/ # or path/to/artifact
+          path: e2e-tests/output/ # or path/to/artifact

.github/workflows/e2e_tests_firefox.yaml

@@ -2,9 +2,11 @@ name: e2e tests with firefox
 on:
   workflow_dispatch:
   push:
+    # workflow is triggered on staging and branches starting with 'e2e'
+    # but tests always run against staging preview build
     branches:
       - staging
-      - feat-e2e-tests
+      - e2e**
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -16,12 +18,13 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 18.x
+      - run: yarn
+      - run: yarn playwright install --with-deps firefox
       - uses: patrickedqvist/[email protected]
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           max_timeout: 1200
           check_interval: 20
-      - run: yarn
       - run: yarn e2e-firefox tests/4*.ts
       - uses: actions/upload-artifact@v3
         if: failure()

README.md

@@ -3,6 +3,7 @@
 # serlo.org – Frontend
 
 Next.js app that serves [serlo.org](https://serlo.org).
+You can find it in `apps/web`.
 
 ## Overview
 
@@ -114,6 +115,21 @@ Technical issues are opened for bugs and feature that we decided to work on. For
 
 This method should avoid stale issues and make it possible to keep an "zero inbox".
 
+## e2e testing
+
+This repo includes e2e test with codeceptjs.
+To run them for the first time:
+
+```sh
+cd e2e-tests
+yarn
+yarn playwright install
+cd ..
+yarn e2e
+```
+
+You can find the [full readme here](https://github.com/serlo/frontend/tree/staging/e2e-tests#readme).
+
 ## More information
 
 You can find more detailed explanations in our wiki. Currently, we have these pages available:
@@ -123,3 +139,4 @@ You can find more detailed explanations in our wiki. Currently, we have these pa
 - [Tailwind Getting Started Guide](https://github.com/serlo/frontend/wiki/Tailwind-Getting-Started-Guide)
 - [VS Code Setup](https://github.com/serlo/frontend/wiki/VS-Code)
 - [Unsorted old stuff](https://github.com/serlo/frontend/wiki/Archive)
+- [Forked packages](https://github.com/serlo/frontend/wiki/Forked-packages)

apps/web/.env

@@ -1,18 +1,3 @@
 # Uncomment the next line to test a local API / Auth
 #NEXT_PUBLIC_ENV=local
-NEXT_PUBLIC_ENV=staging
-NEXT_PUBLIC_SERLO_DOMAIN_PRODUCTION=serlo.org
-NEXT_PUBLIC_SERLO_DOMAIN_STAGING=serlo-staging.dev
-NEXT_PUBLIC_SERLO_DOMAIN_LOCAL=serlo.localhost:4567
-# empty string if not on vercel
-NEXT_PUBLIC_VERCEL_URL=
-# empty string if not on vercel
-NEXT_PUBLIC_COMMIT_SHA=
-HYDRA_CLIENT_ID_STAGING=frontend
-HYDRA_CLIENT_SECRET_STAGING=YjgwZThhZDk0MTYxMTA4ODY1NzYxZmJk
-HYDRA_HOST_STAGING=https://hydra.${NEXT_PUBLIC_SERLO_DOMAIN_STAGING}
-HYDRA_CLIENT_ID_LOCAL=frontend.serlo.org
-HYDRA_CLIENT_SECRET_LOCAL=frontend.serlo.org
-HYDRA_HOST_LOCAL=http://localhost:4444
-KRATOS_HOST_STAGING=https://kratos.${NEXT_PUBLIC_SERLO_DOMAIN_STAGING}
-KRATOS_HOST_LOCAL=http://localhost:4433
+NEXT_PUBLIC_ENV=staging

apps/web/env.d.ts

@@ -2,42 +2,11 @@ declare namespace NodeJS {
   interface ProcessEnv {
     // Environment to use
     NEXT_PUBLIC_ENV: 'production' | 'staging' | 'local'
-    // Serlo domain for production environment
-    NEXT_PUBLIC_SERLO_DOMAIN_PRODUCTION: string
-    // Serlo domain to be used in staging environment
-    NEXT_PUBLIC_SERLO_DOMAIN_STAGING: string
     // Sentry DSN (defined in preview & production)
     NEXT_PUBLIC_SENTRY_DSN: string | undefined
-    // Google Analytics Tracking ID (defined in production)
-    NEXT_PUBLIC_GA_TRACKING_ID: string | undefined
     // The GitHub SHA of the commit the deployment was triggered by (defined in preview & production)
-    NEXT_PUBLIC_COMMIT_SHA: string | undefined
+    NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA: string | undefined
     // The public facing url of the deployment (defined in preview & production)
     NEXT_PUBLIC_VERCEL_URL: string | undefined
-
-    // Hydra client id for production environment (defined in preview & production, only exposed to server)
-    HYDRA_CLIENT_ID_PRODUCTION: string | undefined
-    // Hydra client id for staging environment (only exposed to server)
-    HYDRA_CLIENT_ID_STAGING: string
-    // Hydra client id for local environment (only exposed to server)
-    HYDRA_CLIENT_ID_LOCAL: string
-    // Hydra client secret for production environment (defined in preview & production, only exposed to server)
-    HYDRA_CLIENT_SECRET_PRODUCTION: string | undefined
-    // Hydra client secret for staging environment (only exposed to server)
-    HYDRA_CLIENT_SECRET_STAGING: string
-    // Hydra client secret for local environment (only exposed to server)
-    HYDRA_CLIENT_SECRET_LOCAL: string
-    // Hydra host for production environment (defined in preview & production, only exposed to server)
-    HYDRA_HOST_PRODUCTION: string | undefined
-    // Hydra host for staging environment (only exposed to server)
-    HYDRA_HOST_STAGING: string
-    // Hydra host for local environment (only exposed to server)
-    HYDRA_HOST_LOCAL: string
-    // Kratos host for production environment (defined in preview & production, only exposed to server)
-    KRATOS_HOST_PRODUCTION: string | undefined
-    // Kratos host for staging environment (only exposed to server)
-    KRATOS_HOST_STAGING: string
-    // Kratos host for local environment (only exposed to server)
-    KRATOS_HOST_LOCAL: string
   }
 }

apps/web/next.config.js

@@ -2,10 +2,30 @@ import bundleAnalyzer from '@next/bundle-analyzer'
 import path from 'path'
 import { fileURLToPath } from 'url'
 
+// check and display env variables
 console.log(
-  'current active environment (staging or production):',
+  '[NEXT_PUBLIC_ENV] selected environment (staging or production):',
   process.env.NEXT_PUBLIC_ENV
 )
+console.log(
+  '[NEXT_PUBLIC_SENTRY_DSN] sentry dsn:',
+  process.env.NEXT_PUBLIC_SENTRY_DSN ?? '---'
+)
+console.log(
+  '[NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA] commit sha:',
+  process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? '---'
+)
+console.log(
+  '[NEXT_PUBLIC_VERCEL_URL] deployment url:',
+  process.env.NEXT_PUBLIC_VERCEL_URL ?? '---'
+)
+console.log(
+  '[DATABASE_URL] planetscale integration:',
+  process.env.DATABASE_URL &&
+    process.env.DATABASE_URL.includes('serlo_planetscale')
+    ? 'available'
+    : 'not available'
+)
 
 /**
  * @type {import('next').NextConfig}

apps/web/src/auth/cookie/cookie-domain.ts

@@ -1,6 +1,6 @@
 const COOKIE_DOMAINS = {
-  production: process.env.NEXT_PUBLIC_SERLO_DOMAIN_PRODUCTION,
-  staging: process.env.NEXT_PUBLIC_SERLO_DOMAIN_STAGING,
+  production: 'serlo.org',
+  staging: 'serlo-staging.dev',
   local: 'localhost',
 }
 

apps/web/src/components/navigation/breadcrumbs.tsx

@@ -23,7 +23,7 @@ export function Breadcrumbs({
   noIcon,
 }: BreadcrumbsProps) {
   return (
-    <nav className="mx-side mt-5 sm:mb-11 sm:ml-2.5">
+    <nav className="mx-side mt-5 sm:mb-11 sm:ml-2.5" data-qa="breadcrumbs">
       {data &&
         data.map((bcEntry, i) => {
           return (

apps/web/src/components/navigation/header/header.tsx

@@ -60,7 +60,7 @@ export function Header() {
               mobileMenuOpen ? '' : 'hidden'
             )}
           >
-            <Menu />
+            <Menu isMobile={mobileMenuOpen} />
           </div>
           <div className="hidden h-0 basis-full md:block lg:hidden" />
           {renderQuickbar()}

apps/web/src/components/navigation/header/menu/menu.tsx

@@ -12,7 +12,7 @@ const AuthItems = dynamic(() =>
   import('./auth-items').then((mod) => mod.AuthItems)
 )
 
-export function Menu() {
+export function Menu({ isMobile }: { isMobile?: boolean }) {
   const auth = useAuthentication()
   const { headerData } = useInstanceData()
   const [mounted, setMounted] = useState(false)
@@ -22,7 +22,7 @@ export function Menu() {
   const showAuth = auth && mounted
 
   return (
-    <Root>
+    <Root orientation={isMobile ? 'vertical' : 'horizontal'}>
       <List
         className={cn(
           'relative m-0 block p-0 sm:min-w-[27rem] md:text-right',

apps/web/src/helper/urls/serlo-domain.ts

@@ -1,4 +1,4 @@
 export const serloDomain =
   process.env.NEXT_PUBLIC_ENV === 'production'
-    ? process.env.NEXT_PUBLIC_SERLO_DOMAIN_PRODUCTION
-    : process.env.NEXT_PUBLIC_SERLO_DOMAIN_STAGING
+    ? 'serlo.org'
+    : 'serlo-staging.dev'

apps/web/src/pages/_document.tsx

@@ -16,7 +16,7 @@ const sentryLoader = `
     window.Sentry.init({
       environment: "${process.env.NEXT_PUBLIC_ENV}",
       release: "frontend@${
-        process.env.NEXT_PUBLIC_COMMIT_SHA?.substring(0, 7) ?? ''
+        process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA?.substring(0, 7) ?? ''
       }",
       beforeSend(event, hint) {
         /* ignore safari warning in JsonLd component */
@@ -108,7 +108,7 @@ export default class MyDocument extends Document {
             />
           )}
           {process.env.NEXT_PUBLIC_SENTRY_DSN !== undefined &&
-            process.env.NEXT_PUBLIC_COMMIT_SHA !== undefined && (
+            process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA !== undefined && (
               <script
                 dangerouslySetInnerHTML={{
                   __html: sentryLoader,

apps/web/src/pages/api/.ory/[...paths].ts

@@ -3,8 +3,8 @@ import { createApiHandler, config } from '@ory/integrations/next-edge'
 export { config }
 
 const COOKIE_DOMAINS = {
-  production: process.env.NEXT_PUBLIC_SERLO_DOMAIN_PRODUCTION,
-  staging: process.env.NEXT_PUBLIC_SERLO_DOMAIN_STAGING,
+  production: 'serlo.org',
+  staging: 'serlo-staging.dev',
   local: 'localhost',
 }
 
@@ -16,9 +16,9 @@ export const COOKIE_DOMAIN =
       : COOKIE_DOMAINS['local']
 
 const KRATOS_HOSTS = {
-  production: process.env.KRATOS_HOST_PRODUCTION,
-  staging: process.env.KRATOS_HOST_STAGING,
-  local: process.env.KRATOS_HOST_LOCAL,
+  production: 'https://kratos.serlo.org',
+  staging: 'https://kratos.serlo-staging.dev',
+  local: 'http://localhost:4433',
 }
 
 // if env is not set, it's a production build running on localhost, use staging as default

e2e-tests/README.md

@@ -1,15 +1,16 @@
-# frontend-e2e-tests
+# @serlo/e2e-tests
 
 integration tests for serlo.org
 
 ```sh
-git clone https://github.com/serlo/frontend-e2e-tests.git
-cd frontend-e2e-tests
+cd e2e-tests
 yarn
-yarn test
+yarn playwright install
+cd ..
+yarn e2e
 ```
 
-output should look something like that:
+The output should look something like that:
 
 ![grafik](https://user-images.githubusercontent.com/13507950/210520199-ad502693-8f84-4956-9417-f750a243911d.png)
 
@@ -18,25 +19,25 @@ Tests are written with Playwright (wrapped by CodeceptJS), extensive documentati
 To run a single test, use `--grep`:
 
 ```sh
-yarn test --grep "Quickbar"
+yarn e2e --grep "Quickbar"
 ```
 
 You can also run a single file:
 
 ```sh
-yarn test tests/000-general.ts
+yarn e2e tests/000-general.ts
 ```
 
 Run all editor tests:
 
 ```sh
-yarn test tests/4*.ts
+yarn e2e tests/4*.ts
 ```
 
 You can run tests on firefox instead of chromium with
 
 ```sh
-yarn test-firefox
+yarn e2e-firefox
 ```
 
 The tests are written in `/tests`, the file names are setting the order of execution. The browser session is stored between tests, TypeScript is supported.

e2e-tests/codecept.config.ts

@@ -12,7 +12,7 @@ const isChromium = browser === 'chromium'
 
 exports.config = {
   tests: 'tests/**.ts',
-  output: './output', // we are not using any artifacts right now, but still need an output directory
+  output: './output',
   helpers: {
     Playwright: {
       url: frontendUrl,
@@ -29,7 +29,6 @@ exports.config = {
         : { browser }),
     },
   },
-  name: 'frontend-e2e-tests',
   plugins: {
     // https://codecept.io/locators/#custom-locators
     customLocator: {
@@ -66,7 +65,7 @@ exports.config = {
         },
       },
     },
-    pauseOnFail: {},
+    ...(isCI ? {} : { pauseOnFail: {} }),
     retryFailedStep: {
       enabled: true,
     },