test: add agenda-neue cypress tests (#4293)

* fix: move vue app to parent dir

* test: prepare vue for cypress testing

* test: add basic cypress test for vue app

* test: add agenda-neue header tests

* test: meeting generator for cypress tests (wip)

* test: agenda-neue meeting nav + settings button

* test: agenda-neue check settings button position against viewport size

* test: agenda-neue fix viewport + add schedule list header tests

* test: agenda-neue timezone tests + future meeting template

* test: agenda-neue add test floor plan image fixtures

* test: floor-plan-neue - handle floor plan images

* test: floor-plan-neue room selection + pin drop tests

* test: floor-plan-neue - test all viewports

* test: floor-plan-neue add missing header tests

* test: agenda-neue - generate areas + groups

* test: agenda-neue - test filter areas + groups dialog

* test: agenda-neue code cleanup + generate schedule (wip)

* test: agenda-neue - generate schedule (wip)

* test: agenda-neue - generate schedule + test settings dialog (wip)

* test: agenda-neue - settings timezone controls

* test: agenda-neue - settings toggles + agenda table headers tests

* test: agenda-neue - table events + memory fixes

* test - agenda-neue - table events remaining columns tests

* test: agenda-neue - meeting materials dialog + future schedule list table buttons

* test: agenda-neue - remove skips

* test: agenda-neue - search

* test: agenda-neue - remove skips

* test: agenda-neue - use random seed for deterministic results

* test: agenda-neue - set constant clock

* test: add percy to cypress + upgrade cypress

* test: agenda-neue - jump to day tests

* test: agenda-neue - add to calendar tests

* test: agenda-neue - add pick sessions tests

* test: agenda-neue - calendar view tests

* test: agenda-neue - color assignment tests

* test: agenda-neue - skip test not supported in firefox/safari

* test: agenda-neue - live sessions tests

* test: agenda-neue - smaller screens tests

* chore: update workflows to handle modern + legacy cypress tests

* test: fix legacy agenda weekview test + cypress legacy config

.editorconfig

@@ -31,6 +31,9 @@ indent_size = 2
 [client/**]
 indent_size = 2
 
+[dev/**.js]
+indent_size = 2
+
 [{package.json,.eslintrc.js,.yarnrc.yml,vite.config.js,cypress.config.js}]
 indent_size = 2
 

.github/workflows/build.yml

@@ -160,8 +160,31 @@ jobs:
         name: coverage
         path: coverage.json
 
-  tests-cypress:
-    name: Run Tests (Cypress)
+  tests-cypress-modern:
+    name: Run Tests (Cypress - Modern)
+    if: ${{ github.event.inputs.skiptests == 'false' }}
+    needs: [prepare]
+    runs-on: ubuntu-latest
+    
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Run all tests
+      run: |
+        echo "Installing dependencies..."
+        yarn
+        echo "Running tests..."
+        yarn cypress
+        
+    - name: Upload Video Recordings
+      uses: actions/upload-artifact@v3.0.0
+      if: ${{ always() }}
+      with:
+        name: videos-modern
+        path: cypress/videos/
+
+  tests-cypress-legacy:
+    name: Run Tests (Cypress - Legacy)
     if: ${{ github.event.inputs.skiptests == 'false' }}
     needs: [prepare]
     runs-on: ubuntu-latest
@@ -202,13 +225,13 @@ jobs:
     - name: Run all tests
       run: |
         echo "Running tests..."
-        yarn cypress
+        yarn cypress:legacy
         
     - name: Upload Video Recordings
       uses: actions/upload-artifact@v3.0.0
       if: ${{ always() }}
       with:
-        name: videos
+        name: videos-legacy
         path: cypress/videos/
         
   # -----------------------------------------------------------------
@@ -217,7 +240,7 @@ jobs:
   release:
     name: Make Release
     if: ${{ always() }}
-    needs: [tests-python, tests-cypress, prepare]
+    needs: [tests-python, tests-cypress-modern, tests-cypress-legacy, prepare]
     runs-on: ubuntu-latest
     env:
       SHOULD_DEPLOY: ${{needs.prepare.outputs.should_deploy}}

.gitignore

@@ -11,6 +11,7 @@ datatracker.sublime-workspace
 /.settings
 /.tmp
 /.vite
+/client/dist
 /data
 /dist
 /docker/docker-compose.extend-custom.yml

client/App.vue

@@ -12,9 +12,9 @@ n-theme
 import { onBeforeUnmount ,onMounted, ref } from 'vue'
 import { NMessageProvider } from 'naive-ui'
 
-import { useAgendaStore } from './store'
+import { useAgendaStore } from './agenda/store'
 
-import NTheme from '../components/n-theme.vue'
+import NTheme from './components/n-theme.vue'
 
 // STORES
 
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
 <style lang="scss">
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
-@import "../shared/breakpoints";
+@import "./shared/breakpoints";
 
 .app-error {
   background-color: $red-500;

client/agenda/Agenda.vue

@@ -62,7 +62,7 @@
             @update:value='() => { agendaStore.persistMeetingPreferences() }'
             )
 
-      .alert.alert-warning.mt-3(v-if='agendaStore.isCurrentMeeting') #[strong Note:] IETF agendas are subject to change, up to and during a meeting.
+      .agenda-currentwarn.alert.alert-warning.mt-3(v-if='agendaStore.isCurrentMeeting') #[strong Note:] IETF agendas are subject to change, up to and during a meeting.
       .agenda-infonote.mt-3(v-if='agendaStore.meeting.infoNote && agendaStore.infoNoteShown')
         n-popover
           template(#trigger)

client/agenda/AgendaQuickAccess.vue

@@ -4,6 +4,7 @@
     .card.shadow-sm
       .card-body
         n-button(
+          id='agenda-quickaccess-filterbyareagroups-btn'
           block
           type='success'
           size='large'
@@ -15,6 +16,7 @@
           n-badge.ms-2(:value='agendaStore.selectedCatSubs.length', processing)
         n-button.mt-2(
           v-if='!agendaStore.pickerMode'
+          id='agenda-quickaccess-picksessions-btn'
           block
           secondary
           type='success'
@@ -28,6 +30,7 @@
           .agenda-quickaccess-btnrow-title {{ shortMode ? 'Sess. Pick' : 'Session Selection' }}
           n-button.me-1(
             v-if='!agendaStore.pickerModeView'
+            id='agenda-quickaccess-applypick-btn'
             type='success'
             size='large'
             strong
@@ -37,6 +40,7 @@
             span Apply
           n-button.me-1(
             v-else
+            id='agenda-quickaccess-modifypick-btn'
             color='#6f42c1'
             size='large'
             strong
@@ -45,6 +49,7 @@
             i.bi.bi-pencil-square.me-2
             span Modify
           n-button.ms-1(
+            id='agenda-quickaccess-discardpick-btn'
             secondary
             color='#666'
             size='large'
@@ -55,6 +60,7 @@
             span Discard
         n-divider: small.text-muted Calendar
         n-button.mt-2(
+          id='agenda-quickaccess-calview-btn'
           block
           color='#6c757d'
           size='large'
@@ -71,6 +77,7 @@
           @select='downloadIcs'
           )
           n-button.mt-2(
+            id='agenda-quickaccess-addtocal-btn'
             block
             secondary
             color='#6c757d'
@@ -81,7 +88,7 @@
             span {{ shortMode ? '.ics' : 'Add to your calendar...' }}
         template(v-if='agendaStore.meetingDays.length > 0')
           n-divider: small.text-muted Jump to...
-          ul.nav.nav-pills.flex-column.small
+          ul.nav.nav-pills.flex-column.small.agenda-quickaccess-jumpto
             li.nav-item(v-if='agendaStore.isMeetingLive')
               a.nav-link(
                 href='#now'

client/agenda/AgendaScheduleList.vue

@@ -68,7 +68,7 @@
               a.discreet(:href='`/group/` + item.acronym + `/about/`') {{item.acronym}}
             //- CELL - NAME ---------------------------
             td.agenda-table-cell-name
-              i.bi.me-2(v-if='item.icon && agendaStore.eventIconsShown', :class='item.icon')
+              i.bi.me-2.agenda-event-icon(v-if='item.icon && agendaStore.eventIconsShown', :class='item.icon')
               a.discreet(
                 v-if='item.flags.agenda'
                 :href='item.agenda.url'
@@ -120,7 +120,10 @@
                     template(v-if='item.flags.agenda')
                       n-popover
                         template(#trigger)
-                          i.bi.bi-collection(@click='showMaterials(item.key)')
+                          i.bi.bi-collection(
+                            :id='`btn-lnk-` + item.key + `-mat`'
+                            @click='showMaterials(item.key)'
+                            )
                         span Show meeting materials
                     template(v-else-if='item.type === `regular`')
                       n-popover
@@ -132,6 +135,7 @@
                     n-popover(v-for='lnk of item.links', :key='lnk.id')
                       template(#trigger)
                         a(
+                          :id='`btn-` + lnk.id'
                           :href='lnk.href'
                           :aria-label='lnk.label'
                           :class='`text-` + lnk.color'

client/agenda/AgendaSettings.vue

@@ -3,7 +3,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
   n-drawer-content.agenda-settings
     template(#header)
       span Agenda Settings
-      .d-flex.justify-content-end
+      .agenda-settings-actions.d-flex.justify-content-end
         n-dropdown(
           :options='actionOptions'
           size='large'
@@ -137,7 +137,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           @click='agendaStore.defaultCalendarView = `day`'
           ) Day
 
-      n-divider(title-placement='left')
+      n-divider#agenda-settings-colors-header(title-placement='left')
         i.bi.bi-palette.me-2
         small Custom Colors / Tags
       .d-flex.align-items-center.mt-3(v-for='(cl, idx) of state.colors')
@@ -364,6 +364,7 @@ async function actionClick (key) {
           redhandShown: configJson.redhandShown === true
         })
         state.colors = cloneDeep(agendaStore.colors)
+        message.success('Config imported successfully.')
       } catch (err) {
         console.warn(err)
         message.error('Failed to import JSON config.')

client/agenda/store.js

@@ -208,7 +208,7 @@ export const useAgendaStore = defineStore('agenda', {
     },
     hideLoadingScreen () {
       // -> Hide loading screen
-      const loadingRef = document.querySelector('#app-meeting-loading')
+      const loadingRef = document.querySelector('#app-loading')
       if (loadingRef) {
         loadingRef.remove()
       }

client/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite Test</title>
+    <!-- Bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
+  </head>
+  <body>
+    <div class="pt-3 container-fluid">
+      <div class="row">
+        <div class="col mx-lg-3" id="content">
+          <div id="app"></div>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

client/main.js

@@ -28,4 +28,4 @@ app.use(router)
 
 // Mount App
 
-app.mount('#app-meeting')
+app.mount('#app')

client/router.js

@@ -6,7 +6,7 @@ export default createRouter({
     {
       name: 'agenda',
       path: '/meeting/:meetingNumber(\\d+)?/agenda-neue',
-      component: () => import('./Agenda.vue'),
+      component: () => import('./agenda/Agenda.vue'),
       meta: {
         hideLeftMenu: true
       }
@@ -14,7 +14,7 @@ export default createRouter({
     {
       name: 'floor-plan',
       path: '/meeting/:meetingNumber(\\d+)?/floor-plan-neue',
-      component: () => import('./FloorPlan.vue'),
+      component: () => import('./agenda/FloorPlan.vue'),
       meta: {
         hideLeftMenu: true
       }

cypress/.gitignore

@@ -1,2 +1,3 @@
+downloads
 screenshots
 videos

cypress/configs/legacy.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+    specPattern: 'cypress/e2e-legacy/**/*.cy.{js,jsx,ts,tsx}',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    }
+  },
+  numTestsKeptInMemory: 10,
+  viewportWidth: 1280,
+  viewportHeight: 800
+})

cypress/configs/modern.config.js

@@ -9,11 +9,12 @@ module.exports = defineConfig({
     }
   },
   e2e: {
-    baseUrl: 'http://localhost:8000',
+    baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
       // implement node event listeners here
     }
   },
+  numTestsKeptInMemory: 10,
   viewportWidth: 1280,
   viewportHeight: 800
 })

cypress/e2e-legacy/meeting/agenda.cy.js

@@ -58,7 +58,7 @@ describe('meeting agenda', () => {
 
 describe('meeting agenda weekview', () => {
   before(() => {
-    cy.visit('/meeting/agenda/week-view.html')
+    cy.visit('/meeting/113/agenda/week-view.html')
   })
   it('should have day headers', () => {
     cy.get('.agenda-weekview-day').should('have.length.greaterThan', 0).and('be.visible')

cypress/fixtures/agenda-settings.json

@@ -0,0 +1,32 @@
+{
+  "areaIndicatorsShown": true,
+  "bolderText": false,
+  "colorLegendShown": true,
+  "colors": [
+    {
+      "hex": "#0d6efd",
+      "tag": "Interesting"
+    },
+    {
+      "hex": "#6f42c1",
+      "tag": "Might Attend"
+    },
+    {
+      "hex": "#d63384",
+      "tag": "Important"
+    },
+    {
+      "hex": "#ffc107",
+      "tag": "Food"
+    },
+    {
+      "hex": "#20c997",
+      "tag": "Attended"
+    }
+  ],
+  "defaultCalendarView": "week",
+  "eventIconsShown": true,
+  "floorIndicatorsShown": true,
+  "listDayCollapse": false,
+  "redhandShown": true
+}