From 61a5a4e35e555a768cd973abcf07cf6fb813ecb6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 15 May 2024 17:04:06 +0200
Subject: [PATCH] Fix flaky onboarding test

---
 client/cypress/e2e/frontend/ui/onboarding.spec.ts | 15 +++++++++++++--
 client/src/pages/onboarding/step1.vue             |  7 ++++++-
 client/src/pages/onboarding/step2.vue             |  7 ++++++-
 client/src/pages/onboarding/step3.vue             |  7 ++++++-
 4 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/client/cypress/e2e/frontend/ui/onboarding.spec.ts b/client/cypress/e2e/frontend/ui/onboarding.spec.ts
index 0d2b2b78..7ac5f17a 100644
--- a/client/cypress/e2e/frontend/ui/onboarding.spec.ts
+++ b/client/cypress/e2e/frontend/ui/onboarding.spec.ts
@@ -1,5 +1,9 @@
 import { assertStartPage } from '../../../support/helpers';
 
+const NewsTeasers = {
+  newsTeasers: [],
+};
+
 describe('Onboarding', () => {
   beforeEach(() => {
     cy.setup();
@@ -22,17 +26,21 @@ describe('Onboarding', () => {
             },
           };
         },
-        NewsTeasers: {},
+        NewsTeasers,
       },
     });
 
     cy.visit('/');
     assertStartPage(true);
     cy.get('[data-cy=onboarding-next-link]').click();
+    cy.getByDataCy('onboarding-heading').should('contain.text', 'Ihr Lernbereich');
     cy.get('[data-cy=onboarding-next-link]').click();
+    cy.getByDataCy('onboarding-heading').should('contain.text', 'Ihr Bereich für Zusammenarbeit');
     cy.get('[data-cy=onboarding-next-link]').click();
+    cy.getByDataCy('onboarding-heading').should('contain.text', 'Ihr persönlicher Bereich');
     cy.get('[data-cy=onboarding-next-link]').click();
     assertStartPage(false);
+    cy.wait('@NewsTeasers');
   });
 
   it('shows the onboarding steps and skips them', () => {
@@ -52,7 +60,7 @@ describe('Onboarding', () => {
             },
           };
         },
-        NewsTeasers: {},
+        NewsTeasers,
       },
     });
 
@@ -60,6 +68,7 @@ describe('Onboarding', () => {
     assertStartPage(true);
     cy.getByDataCy('onboarding-skip-link').click();
     assertStartPage(false);
+    cy.wait('@NewsTeasers');
   });
 
   it('does not show the onboarding', () => {
@@ -68,10 +77,12 @@ describe('Onboarding', () => {
         MeQuery: {
           me: {},
         },
+        NewsTeasers,
       },
     });
 
     cy.visit('/');
     assertStartPage(false);
+    cy.wait('@NewsTeasers');
   });
 });
diff --git a/client/src/pages/onboarding/step1.vue b/client/src/pages/onboarding/step1.vue
index b093d200..21122490 100644
--- a/client/src/pages/onboarding/step1.vue
+++ b/client/src/pages/onboarding/step1.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <h3 class="onboarding__page-subheading">Einführung: Schritt 1 von 3</h3>
-    <h1 class="onboarding__page-heading">Ihr Lernbereich</h1>
+    <h1
+      data-cy="onboarding-heading"
+      class="onboarding__page-heading"
+    >
+      Ihr Lernbereich
+    </h1>
     <h2 class="onboarding__heading">
       {{ $flavor.textTopics }}
     </h2>
diff --git a/client/src/pages/onboarding/step2.vue b/client/src/pages/onboarding/step2.vue
index 76344898..421cf86c 100644
--- a/client/src/pages/onboarding/step2.vue
+++ b/client/src/pages/onboarding/step2.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <h3 class="onboarding__page-subheading">Einführung: Schritt 2 von 3</h3>
-    <h1 class="onboarding__page-heading">Ihr Bereich für Zusammenarbeit</h1>
+    <h1
+      data-cy="onboarding-heading"
+      class="onboarding__page-heading"
+    >
+      Ihr Bereich für Zusammenarbeit
+    </h1>
     <h2 class="onboarding__heading">Räume</h2>
     <p class="onboarding__paragraph">
       In den Räumen können Sie in grossen und kleinen Gruppen zusammenarbeiten und Beiträge teilen.
diff --git a/client/src/pages/onboarding/step3.vue b/client/src/pages/onboarding/step3.vue
index 8e3aa6c8..eab1915e 100644
--- a/client/src/pages/onboarding/step3.vue
+++ b/client/src/pages/onboarding/step3.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <h3 class="onboarding__page-subheading">Einführung: Schritt 3 von 3</h3>
-    <h1 class="onboarding__page-heading">Ihr persönlicher Bereich</h1>
+    <h1
+      data-cy="onboarding-heading"
+      class="onboarding__page-heading"
+    >
+      Ihr persönlicher Bereich
+    </h1>
     <h2 class="onboarding__heading">Portfolio</h2>
     <p class="onboarding__paragraph">Dokumentieren Sie Ihre Arbeiten und Projekte. Reflektieren Sie Ihr Vorgehen.</p>
   </div>