From 8e4d5b8f605b23d79306848fbcd05936f55abbfb Mon Sep 17 00:00:00 2001
From: Dat <dat.nguyen@wikimedia.de>
Date: Thu, 6 Jun 2024 23:48:56 +0200
Subject: [PATCH] test: add more test specs

---
 src/components/Layout/Foot.vue                |  2 +-
 src/components/Layout/Navbar.vue              |  4 +-
 .../Pages/Home/Components/DiscoveryView.vue   |  2 +-
 .../Pages/Home/Components/PhotoTextView.vue   |  2 +-
 tests/e2e/pageobjects/app.page.js             |  4 +-
 tests/e2e/specs/app.spec.js                   | 86 +++++++++++++++++--
 6 files changed, 86 insertions(+), 14 deletions(-)

diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index ebc53fe4..7af28d49 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="footer">
+  <footer id="footer" class="footer">
   <v-footer color="primary lighten-1">
     <v-container>
       <ul class="footer-list">
diff --git a/src/components/Layout/Navbar.vue b/src/components/Layout/Navbar.vue
index 80ee7338..b076eb0f 100644
--- a/src/components/Layout/Navbar.vue
+++ b/src/components/Layout/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <v-toolbar height="64px">
     <a class="pr-4 logo" href="/">
-      <img class="logo" src="../../assets/logo.svg">
+      <img id="logo" class="logo" src="../../assets/logo.svg">
     </a>
     <v-spacer></v-spacer>
     <template v-if="!isInitializing">
@@ -13,7 +13,7 @@
       </template>
       <v-menu content-class="menu" internal-activator offset-y transition="scale-transition" v-if="($vuetify.breakpoint.width < 600) && !isLoggedIn">
         <template v-slot:activator="{ on, attrs }">
-          <v-btn icon class="dots-button mr-4" v-bind="attrs" v-on="on">
+          <v-btn id="dots-button" icon class="dots-button mr-4" v-bind="attrs" v-on="on">
             <v-icon>mdi-dots-horizontal</v-icon>
           </v-btn>
         </template>
diff --git a/src/components/Pages/Home/Components/DiscoveryView.vue b/src/components/Pages/Home/Components/DiscoveryView.vue
index 0cf3eebd..28986539 100644
--- a/src/components/Pages/Home/Components/DiscoveryView.vue
+++ b/src/components/Pages/Home/Components/DiscoveryView.vue
@@ -37,7 +37,7 @@
         </DiscoveryCard>
         </div>
       <div class="button">
-        <v-btn to="/discovery" large outlined>
+        <v-btn id="discovery-button" to="/discovery" large outlined>
           Discover more wikibases
         </v-btn>
       </div>
diff --git a/src/components/Pages/Home/Components/PhotoTextView.vue b/src/components/Pages/Home/Components/PhotoTextView.vue
index 620a34b6..cf9202d3 100644
--- a/src/components/Pages/Home/Components/PhotoTextView.vue
+++ b/src/components/Pages/Home/Components/PhotoTextView.vue
@@ -7,7 +7,7 @@
       <div>
         <div class="text-h3">{{header}}</div>
         <div class="text-body text-body-1">{{content}}</div>
-        <v-btn :to="target" color="primary" x-large>{{button}}</v-btn>
+        <v-btn id="open-beta-button" :to="target" color="primary" x-large>{{button}}</v-btn>
       </div>
     </div>
   </div>
diff --git a/tests/e2e/pageobjects/app.page.js b/tests/e2e/pageobjects/app.page.js
index 5c6045e6..98c2fb56 100644
--- a/tests/e2e/pageobjects/app.page.js
+++ b/tests/e2e/pageobjects/app.page.js
@@ -3,15 +3,15 @@ class App {
    * elements
    */
   get heading () { return $('h1') }
-  get navLogin () { return $('#nav-login') }
+  get logo () { return $('#logo') }
   get navLogout () { return $('#nav-logout') }
-  get navCreateAccount () { return $('#nav-create-account') }
   get navUser () { return $('#nav-user') }
   get navDashboard () { return $('#nav-dashboard') }
   get wbcloudIntro () { return $('#wbcloud-intro') }
   get featuredWiki1 () { return $('#featured-wiki-1') }
   get featuredWiki2 () { return $('#featured-wiki-2') }
   get featuredWiki3 () { return $('#featured-wiki-3') }
+  get footer () { return $('#footer') }
 
   /**
    * methods
diff --git a/tests/e2e/specs/app.spec.js b/tests/e2e/specs/app.spec.js
index df9efe33..49f6d9ef 100644
--- a/tests/e2e/specs/app.spec.js
+++ b/tests/e2e/specs/app.spec.js
@@ -1,21 +1,93 @@
 const App = require('../pageobjects/app.page')
 
 describe('Vue.js app', () => {
-  it('should open and render with Login and Sign Up buttons', () => {
+  it('should render the WBC logo', async () => {
     App.open()
-    expect(App.navLogin).toExist()
-    expect(App.navCreateAccount).toExist()
+    expect(App.logo).toExist()
   })
-  it('should open and render with some buttons', () => {
+
+  it('should open and render with Login button', async () => {
+    const navLogin = await $('#nav-login')
+    // await navLogin.waitForDisplayed()
+
+    // Assert that the element is clickable
+    expect(await navLogin.isClickable()).toBe(true)
+    await navLogin.click()
+  })
+
+  it('should open and render with Signup button', async () => {
+    const navCreateAccount = await $('#nav-create-account')
+    // await navCreateAccount.waitForDisplayed()
+
+    // Assert that the element is clickable
+    expect(await navCreateAccount.isClickable()).toBe(true)
+    await navCreateAccount.click()
+  })
+
+  it('should collapse Login and Signup buttons into a dots-button icon when screen width < 600px', async () => {
+    await browser.setWindowSize(599, 800)
+    const dotsButton = await $('#dots-button')
+    await dotsButton.waitForDisplayed()
+
+    // Assert that the element is displayed
+    expect(await dotsButton.isDisplayed()).toBe(true)
+  })
+
+  it('should have a button linking to Discovery page', async () => {
     App.open()
-    App.navLogin.click()
+    const discoveryButton = await $('#discovery-button')
+    await discoveryButton.waitForDisplayed()
+
+    // Assert that the element is clickable
+    expect(await discoveryButton.isClickable()).toBe(true)
+    // CLick the button
+    await discoveryButton.click()
+    // Wait for the URL to change to the discovery URL
+    await browser.waitUntil(
+      async () => (await browser.getUrl()).includes('/discovery'),
+      {
+        timeout: 5000,
+        timeoutMsg: 'expected to be redirected to /discovery within 5s'
+      }
+    )
+
+    // Assert the new URL
+    const discoveryUrl = await browser.getUrl()
+    expect(discoveryUrl).toContain('/discovery')
   })
-  it('should open and render some text to introduce WBCloud', () => {
+
+  it('should prompt users to sign up for open Beta', async () => {
     App.open()
+    const openBetaButton = await $('#open-beta-button')
+    await openBetaButton.waitForDisplayed()
+
+    // Assert that the element is clickable
+    expect(await openBetaButton.isClickable()).toBe(true)
+    // CLick the button
+    await openBetaButton.click()
+    // Wait for the URL to change to the signup URL
+    await browser.waitUntil(
+      async () => (await browser.getUrl()).includes('/create-account'),
+      {
+        timeout: 10000,
+        timeoutMsg: 'expected to be redirected to /create-account within 5s'
+      }
+    )
+
+    // Assert the new URL
+    const signupUrl = await browser.getUrl()
+    expect(signupUrl).toContain('/create-account')
+  })
+
+  it('should open and render some text to introduce WBCloud', () => {
     expect(App.wbcloudIntro).toExist()
   })
+
+  it('should open and render a footer element', () => {
+    expect(App.footer).toExist()
+  })
+
   it('should open and show 3 featured wikis', () => {
-    App.open()
     expect(App.featuredWiki1).toExist()
     expect(App.featuredWiki2).toExist()
     expect(App.featuredWiki3).toExist()