Implement cypress test for homepage

web/cypress/e2e/home.cy.js

@@ -1,35 +1,54 @@
+// 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('/');
   });
 
   it('Displays the Hero Section', () => {
     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')
   })
-})
+})

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

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>

web/src/views/FindSpeaker.vue

@@ -38,6 +38,7 @@
           />
         </v-row>
         <div
+          id="speaker-list"
           v-if="!isLoading"
         >
           <div