From 9bb8636bad9e0d4806210cb8123a0f568ea78bb8 Mon Sep 17 00:00:00 2001
From: Olivier Lechevalier <olivier.lechevalier@gmail.com>
Date: Sat, 29 Oct 2022 13:50:35 +0900
Subject: [PATCH] Implement cypress test for homepage

---
 web/cypress/e2e/home.cy.js               | 49 ++++++++++++++++--------
 web/src/components/Toolbar.vue           |  2 +-
 web/src/components/hero/CallToAction.vue |  1 +
 web/src/views/FindSpeaker.vue            |  1 +
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/web/cypress/e2e/home.cy.js b/web/cypress/e2e/home.cy.js
index 50d6ec9b..cb4bed86 100644
--- a/web/cypress/e2e/home.cy.js
+++ b/web/cypress/e2e/home.cy.js
@@ -1,5 +1,17 @@
+// TODO: move that to somewhere
+Cypress.Commands.add('getByLabel', (label) => {
+  // you can disable individual command logging
+  // by passing {log: false} option
+  cy.contains('label', label)
+    .invoke('attr', 'for')
+    .then((id) => {
+      cy.get('#' + id)
+    })
+})
+
 describe('Visits the home page', () => {
-  before(() => {
+
+  beforeEach(() => {
     cy.visit('/');
   });
 
@@ -7,29 +19,36 @@ describe('Visits the home page', () => {
     cy.get("h1").contains("SpeakHer");
   })
 
-  it.skip('Navigates to nominate form', () => {
-    // TODO
+  it('Navigates to nominate form', () => {
+    cy.get("#home-nominate").contains("Nominate a speaker").click();
+    cy.get("h1").contains("Nominate a speaker")
   })
 
-  it.skip('Searches for a speaker by tag', () => {
-    // TODO
+  it('Searches for a speaker by tag', () => {
+    cy.getByLabel("Topic").should('have.value', '').type("AI");
+    cy.getByLabel("Topic").should('have.value', 'AI');
+    cy.get("#speaker-list").contains('AI');
   })
 
-  it.skip('Searches for a speaker by prefecture', () => {
-    // TODO
+  it('Searches for a speaker by prefecture', () => {
+    cy.getByLabel("Prefecture").should('have.value', '').type("Tokyo / 東京都");
+    cy.getByLabel("Prefecture").should('have.value', 'Tokyo / 東京都');
+    cy.get("#speaker-list").contains('Tokyo / 東京都');
   })
 
-  it.skip('Expands information panel for speaker', () => {
-    // TODO
+  it('Expands information panel for speaker', () => {
+    cy.get("#speaker-list .v-expansion-panels button").first().click();
+    cy.get("#speaker-list .v-expansion-panels button.v-expansion-panel-header--active").should('have.length', 1);
   })
 
-  it.skip('Switches from English to Japanese with the locale selector', ()=> {
+  it('Switches from English to Japanese with the locale selector', ()=> {
     // TODO
-    // Confirm that site header is in japanese
-    // Confirm that speaker name switches from english to japanese
+    cy.get('header button#desktop-toolbar-language-switcher').contains('日本語').click();
+    cy.get('h2').contains('日本にいる女性スピーカーを探すデータベース');
+    cy.get('header button#desktop-toolbar-language-switcher').contains('English');
   })
 
-  it.skip('Displays the footer', () => {
-    
+  it('Displays the footer', () => {
+    cy.get('footer').contains('SpeakHer Japan 2022')
   })
-})
\ No newline at end of file
+})
diff --git a/web/src/components/Toolbar.vue b/web/src/components/Toolbar.vue
index 89e6de0c..91bdc4ea 100644
--- a/web/src/components/Toolbar.vue
+++ b/web/src/components/Toolbar.vue
@@ -38,7 +38,7 @@
         inset
         vertical
       />
-      <locale-switcher />
+      <locale-switcher id="desktop-toolbar-language-switcher"/>
     </v-toolbar-items>
     <v-toolbar-items v-else>
       <v-btn
diff --git a/web/src/components/hero/CallToAction.vue b/web/src/components/hero/CallToAction.vue
index 400b9228..239ecf63 100644
--- a/web/src/components/hero/CallToAction.vue
+++ b/web/src/components/hero/CallToAction.vue
@@ -38,6 +38,7 @@
           dark
           class="ma-4"
           href="nominate-speaker"
+          id="home-nominate"
         >
           {{ $t('nav.nominateSpeaker') }}
         </v-btn>
diff --git a/web/src/views/FindSpeaker.vue b/web/src/views/FindSpeaker.vue
index 41d7f28c..be6e7844 100644
--- a/web/src/views/FindSpeaker.vue
+++ b/web/src/views/FindSpeaker.vue
@@ -38,6 +38,7 @@
           />
         </v-row>
         <div
+          id="speaker-list"
           v-if="!isLoading"
         >
           <div