test: Use Playwright + agenda start/end dates fix (ietf-tools#4471)

* test: agenda-neue - separate timezone controls assertions to allow retries

* test: agenda-neue - use dom query selectors instead of first() / eq()

* test: agenda-neue - playwright

* test: fix playwright setup for ci

* test: playwright - remove safari + fix timezone local

* test: upload playwright report

* test: playwright - fix trace upload

* test

* test: playwright - agenda search

* test: fix startdate timezone

* test: playwright - agenda table events

* test: playwright - remove only filter

* test: remove exit early flag

* test: allow longer tests

* test: agenda materials dialog

* test: agenda filter by area/group

* test: agenda calendar view

* test: agenda settings

* test: jump to day

* test: fix agenda jump to day timezone parse

* test: increase test timeout

* test: remove fail fast

* test: test sharding + increase delay

* test: fixes

* test: use macos image

* test: fixes

* test: agenda color assign + future + live meeting tests

* test: agenda mobile tests

* test: remainder of tests for playwright + optimizations

* test: red line intersection accept close value

* test: add delay for agenda search tests

* chore: cleanup old tests + adapt build workflow

* ci: fix build workflow

* ci: fix build workflow order

* fix: point to playwright floor plan images + readme

Author: NGPixel

.github/workflows/build.yml

@@ -171,42 +171,46 @@ jobs:
         name: coverage
         path: coverage.json
 
-  tests-cypress-modern:
-    name: Run Tests (Cypress - Modern)
+  tests-playwright:
+    name: Run Tests (Playwright)
     if: ${{ github.event.inputs.skiptests == 'false' }}
     needs: [prepare]
     runs-on: macos-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        project: [chromium, firefox]
 
     steps:
     - uses: actions/checkout@v3
 
+    - uses: actions/setup-node@v2
+      with:
+        node-version: '18'
+
     - name: Run all tests
       run: |
         echo "Installing dependencies..."
         yarn
-        echo "Start Vite Preview..."
-        yarn preview &>/dev/null &
+        echo "Installing Playwright..."
+        cd playwright
+        mkdir test-results
+        npm ci
+        npx playwright install --with-deps ${{ matrix.project }}
         echo "Running tests..."
-        yarn cypress
-        
-    - name: Upload Video Recordings
-      uses: actions/upload-artifact@v3.0.0
-      if: ${{ always() }}
-      continue-on-error: true
-      with:
-        name: videos-modern
-        path: cypress/videos/
+        npx playwright test --project=${{ matrix.project }}
         
-    - name: Upload Screenshots
+    - name: Upload Report
       uses: actions/upload-artifact@v3.0.0
       if: ${{ always() }}
       continue-on-error: true
       with:
-        name: screenshots-modern
-        path: cypress/screenshots/
+        name: playwright-results-${{ matrix.project }}
+        path: playwright/test-results/
+        if-no-files-found: ignore
 
-  tests-cypress-legacy:
-    name: Run Tests (Cypress - Legacy)
+  tests-cypress:
+    name: Run Tests (Cypress)
     if: ${{ github.event.inputs.skiptests == 'false' }}
     needs: [prepare]
     runs-on: ubuntu-latest
@@ -256,6 +260,7 @@ jobs:
       with:
         name: videos-legacy
         path: cypress/videos/
+        if-no-files-found: ignore
 
     - name: Upload Screenshots
       uses: actions/upload-artifact@v3.0.0
@@ -264,14 +269,15 @@ jobs:
       with:
         name: screenshots-modern
         path: cypress/screenshots/
+        if-no-files-found: ignore
 
   # -----------------------------------------------------------------
   # RELEASE
   # -----------------------------------------------------------------
   release:
     name: Make Release
     if: ${{ always() }}
-    needs: [tests-python, tests-cypress-modern, tests-cypress-legacy, prepare]
+    needs: [tests-python, tests-playwright, tests-cypress, prepare]
     runs-on: ubuntu-latest
     env:
       SHOULD_DEPLOY: ${{needs.prepare.outputs.should_deploy}}

.pnp.cjs

@@ -24,10 +24,6 @@ const agendaStore = useAgendaStore()
 
 const appContainer = ref(null)
 
-// INIT
-
-agendaStore.fetch()
-
 // --------------------------------------------------------------------
 // Handle browser resize
 // --------------------------------------------------------------------

.yarn/cache/builtins-npm-5.0.1-6d4820dd76-66d204657f.zip

@@ -227,8 +227,8 @@ const titleExtra = computed(() => {
   return title
 })
 const meetingDate = computed(() => {
-  const start = DateTime.fromISO(agendaStore.meeting.startDate).setZone(agendaStore.timezone)
-  const end = DateTime.fromISO(agendaStore.meeting.endDate).setZone(agendaStore.timezone)
+  const start = DateTime.fromISO(agendaStore.meeting.startDate, { zone: agendaStore.meeting.timezone }).setZone(agendaStore.timezone)
+  const end = DateTime.fromISO(agendaStore.meeting.endDate, { zone: agendaStore.meeting.timezone }).setZone(agendaStore.timezone)
   if (start.month === end.month) {
     return `${start.toFormat('MMMM d')} - ${end.toFormat('d, y')}`
   } else {
@@ -353,6 +353,8 @@ onBeforeUnmount(() => {
 // MOUNTED
 
 onMounted(() => {
+  agendaStore.fetch(route.params.meetingNumber)
+  
   handleCurrentMeetingRedirect()
 
   // -> Hide Loading Screen

.yarn/cache/eslint-plugin-n-npm-15.2.5-1f66a5b3be-3be265957b.zip

@@ -31,7 +31,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
       n-divider(title-placement='left')
         i.bi.bi-globe.me-2
         small Timezone
-      n-button-group.mt-2(style='justify-content: stretch; width: 100%;')
+      n-button-group.mt-2#agenda-settings-tz-btn(style='justify-content: stretch; width: 100%;')
         n-button(
           style='flex-grow: 1;'
           :type='agendaStore.isTimezoneMeeting ? `primary` : `default`'
@@ -47,7 +47,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           :type='agendaStore.timezone === `UTC` ? `primary` : `default`'
           @click='setTimezone(`UTC`)'
           ) UTC
-      n-select.mt-2(
+      n-select.mt-2#agenda-settings-tz-ddn(
         v-model:value='agendaStore.timezone'
         :options='timezones'
         placeholder='Select Time Zone'
@@ -61,7 +61,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
       //- .d-flex.align-items-center.mt-3
       //-   n-switch.me-3(v-model:value='agendaStore.listDayCollapse', disabled)
       //-   span.small Collapse Days by Default
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-colorlgd.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.colorLegendShown'
           aria-label='Display Color Legend'
@@ -71,7 +71,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           template(#trigger)
             i.bi.bi-info-circle
           span Only displayed when a color is assigned to at least 1 event.
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-infonote.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.infoNoteShown'
           aria-label='Display Current Meeting Info Note'
@@ -81,19 +81,19 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           template(#trigger)
             i.bi.bi-info-circle
           span Any update to the note will result in this setting being turned back on.
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-eventicons.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.eventIconsShown'
           aria-label='Display Event Icons'
           )
         span.small Display Event Icons
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-floorind.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.floorIndicatorsShown'
           aria-label='Display Floor Indicators'
           )
         span.small Display Floor Indicators
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-groupind.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.areaIndicatorsShown'
           aria-label='Display Group Area Indicators'
@@ -103,7 +103,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           template(#trigger)
             i.bi.bi-info-circle
           span Will not be shown on smaller screens, regardless of this setting.
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-redline.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.redhandShown'
           aria-label='Display Realtime Red Line'
@@ -113,7 +113,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
           template(#trigger)
             i.bi.bi-info-circle
           span Only shown during live events. Updated every 5 seconds.
-      .d-flex.align-items-center.mt-3
+      #agenda-settings-tgl-boldertxt.d-flex.align-items-center.mt-3
         n-switch.me-3(
           v-model:value='agendaStore.bolderText'
           aria-label='Use Bolder Text'
@@ -140,7 +140,7 @@ n-drawer(v-model:show='isShown', placement='right', :width='panelWidth')
       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')
+      .agenda-settings-colors-row.d-flex.align-items-center.mt-3(v-for='(cl, idx) of state.colors')
         n-color-picker.me-3(
           :modes='[`hex`]'
           :render-label='() => {}'