Skip to content

Commit 1371a86

Browse files
jendiamondpghorpade
jendiamond
and
pghorpade
authored
chore: APPS-2864 Write E2E tests for EventDetail Page template (#29)
* add comments of the types of tests to include * linting * add cypress tests * linting * update component library * update the cypress config and the tests * add context * add context * update component library & design tokens * linting * update * x * add tests * add wait time * linting * comment out timewait * update calendar-dropdown tes * delete .only * delete wait time * re-add the named screen shot * before fix * update data * linting * update snapshot * linting * fix: unprocessable entity error and cypress tests refactor for performance and what we tests --------- Co-authored-by: pghorpade <[email protected]>
1 parent 9481a65 commit 1371a86

File tree

8 files changed

+151
-48
lines changed

8 files changed

+151
-48
lines changed

‎.github/workflows/ci.yml

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ jobs:
4848
steps:
4949
- uses: actions/checkout@v3
5050
- uses: ./.github/workflows/setup-workspace
51+
- name: Set deployment date
52+
id: set-deploy-date
53+
run: echo "DEPLOY_DATE=$(date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_ENV
5154
- name: Cache built static site
5255
uses: actions/cache@v3
5356
id: cache-nuxt3
@@ -79,7 +82,10 @@ jobs:
7982
uses: nwtgck/[email protected] #
8083
with:
8184
production-deploy: false
82-
deploy-message: https://github.com/UCLALibrary/ftva-website-nuxt/pull/${{ github.event.pull_request.number }}
85+
deploy-message: |
86+
Deploy preview for PR #${{ github.event.pull_request.number }}: Date: ${{ env.DEPLOY_DATE }}
87+
Commit ${{ github.event.pull_request.head.sha }} - https://github.com/UCLALibrary/library-website-nuxt/commit/${{ github.event.pull_request.head.sha }}
88+
Pull Request: https://github.com/UCLALibrary/library-website-nuxt/pull/${{ github.event.pull_request.number }}
8389
alias: deploy-preview-${{ github.event.pull_request.number }}
8490
github-token: ${{ secrets.GITHUB_TOKEN }}
8591
overwrites-pull-request-comment: true
@@ -109,11 +115,11 @@ jobs:
109115
uses: nwtgck/actions-netlify@v2 #
110116
with:
111117
production-deploy: true
112-
deploy-message: https://github.com/UCLALibrary/ftva-website-nuxt/commit/${{ github.sha }}
118+
deploy-message: "Deploy to test on merge to main Date: ${{ env.DEPLOY_DATE }} for commit ${{ github.sha }}: https://github.com/UCLALibrary/library-website-nuxt/commit/${{ github.sha }}"
113119
github-token: ${{ secrets.GITHUB_TOKEN }}
114120
publish-dir: .output/public
115121
fails-without-credentials: true
116-
github-deployment-environment: production
122+
github-deployment-environment: testing
117123
env:
118124
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
119125
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_TEST_FTVA_SITE_ID }}

‎cypress/e2e/eventDetailPage.cy.js

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,71 @@
1-
describe('Event Detail page', () => {
2-
it('Visit a event Detail Page', () => {
3-
cy.visit('/events/la-région-centrale-03-08-24')
1+
Cypress.on('uncaught:exception', () => { return false })
42

5-
cy.get('h3.title-no-link').should('contain', 'TEST - La Région Centrale')
3+
describe('Event Detail page', () => {
4+
// context('breadcrumb', () => {
5+
// // NavBreadcrumb
6+
// it('has a breadcrumb nav with the correct title', () => {
7+
// cy.wait(1000)
8+
// cy.getByData('breadcrumb').contains('TEST - La Région Centrale')
9+
// })
10+
// })
611

12+
it('Visit the Event Detail Page', () => {
13+
// CarouselImages
14+
cy.visit('/events/la-région-centrale-03-08-24')
15+
cy.getByData('image-carousel').should('exist')
16+
cy.getByData('text-block').contains('TEST - La Région Centrale Screening')
17+
cy.getByData('text-block').should('be.visible')
18+
cy.getByData('event-description').should('be.visible')
19+
cy.getByData('acknowledgements').should('be.visible')
20+
cy.getByData('screening-details').should('be.visible')
21+
cy.get('.block-event-detail.ftva').scrollIntoView()
22+
cy.get('.block-event-detail.ftva').should('be.visible')
23+
cy.getByData('calendar-dropdown').should('exist')
24+
cy.getByData('ticket-info').should('be.visible')
25+
cy.getByData('event-series').should('be.visible')
726
cy.percySnapshot('eventdetailpage', { widths: [768, 992, 1200] })
27+
28+
// it('clicks the arrow to see the next image', () => {
29+
// cy.getByData('screening-details').contains('Trailer with Cover image')
30+
// })
831
})
32+
// modal exists
33+
// two images
34+
// creditText is visible .contains('Movie Database')
35+
// click on arrow and it moves to next image
36+
// cy.getByData("ticket-info").find("a").contains("Plan Your Visit").click()
937
})
38+
39+
// Potential TODOs and test ideas
40+
// https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test
41+
// it.only('allows users to subscribe to the email list', () => {
42+
// cy.getByData('email-input').type('[email protected]')
43+
// cy.getByData('submit-button').click()
44+
// cy.getByData('success-message').should('exist').contains('[email protected]')
45+
// })
46+
47+
// UI Elements: Test visibility and functionality of important UI elements (e.g., buttons, links, modals)
48+
49+
// Verify that data is displayed correctly, especially dynamic data fetched from APIs
50+
51+
// Event Information Display: Ensure that all event details (title, description, date, time, location) are displayed correctly
52+
53+
// Add to Calendar: Verify that the "Add to Calendar" button works as expected
54+
55+
// Responsive Design: Check that the page renders correctly on different screen sizes
56+
57+
// Navigation: Ensure that navigation to and from the event detail page works smoothly
58+
59+
// ---------
60+
61+
// UI Elements: Test visibility and functionality of important UI elements (e.g., buttons, links, modals)
62+
63+
// Verify that data is displayed correctly, especially dynamic data fetched from APIs
64+
65+
// Event Information Display: Ensure that all event details (title, description, date, time, location) are displayed correctly
66+
67+
// Add to Calendar: Verify that the "Add to Calendar" button works as expected
68+
69+
// Responsive Design: Check that the page renders correctly on different screen sizes
70+
71+
// Navigation: Ensure that navigation to and from the event detail page works smoothly

‎cypress/support/commands.js renamed to ‎cypress/support/commands.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
/// <references types='cypress' />
2+
3+
declare namespace Cypress {
4+
interface Chainable {
5+
getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
6+
}
7+
}
8+
9+
Cypress.Commands.add('getByData', (selector) => {
10+
return cy.get(`[data-test=${selector}]`)
11+
})
12+
113
// ***********************************************
214
// This example commands.js shows you how to
315
// create various custom commands and overwrite

‎layouts/default.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,12 @@ const secondaryMenuItems = computed(() => {
1313
return globalStore.header.secondary
1414
})
1515
16-
const isMobile = computed(() => {
17-
return globalStore.winWidth <= 1024
18-
})
16+
const isMobile = ref(false)
1917
2018
onMounted(() => {
2119
classes.value.push({ 'has-scrolled': globalStore.sTop })
2220
classes.value.push({ 'has-scrolled-past-header': globalStore.sTop >= 150 })
21+
isMobile.value = globalStore.winWidth <= 1024
2322
})
2423
2524
</script>
@@ -66,11 +65,12 @@ onMounted(() => {
6665
<hr>
6766
</div>
6867

69-
<footer>
68+
<footer data-test="footer">
7069
<footer-main />
7170
</footer>
7271
</div>
7372
</template>
73+
7474
<style lang="scss" scoped>
7575
.layout-default {
7676
min-height: 100vh;

‎pages/events/[slug].vue

Lines changed: 45 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
104104
return page?.value.ftvaEventScreeningDetails?.map((obj) => {
105105
return {
106106
...obj,
107-
image: obj.image[0] // craft data has an array, but component expects a single object for image
107+
image: obj.image && obj.image.length === 1 ? obj.image[0] : null, // craft data has an array, but component expects a single object for image
108108
}
109109
})
110110
})
@@ -118,12 +118,14 @@ const parsedFTVAEventScreeningDetails = computed(() => {
118118
<div class="one-column">
119119
<NavBreadcrumb
120120
class="breadcrumb"
121-
:title="page.title"
121+
data-test="breadcrumb"
122+
:title="page?.title"
122123
/>
123124
124125
<ResponsiveImage
125-
v-if="parsedImage.length === 1"
126-
:media="parsedImage[0].image[0]"
126+
v-if="parsedImage && parsedImage.length === 1 && parsedImage[0]?.image && parsedImage[0]?.image?.length === 1"
127+
data-test="single-image"
128+
:media="parsedImage[0]?.image[0]"
127129
:aspect-ratio="43.103"
128130
>
129131
<template
@@ -137,32 +139,46 @@ const parsedFTVAEventScreeningDetails = computed(() => {
137139
v-else
138140
class="lightbox-container"
139141
>
140-
<FlexibleMediaGalleryNewLightbox :items="parsedCarouselData">
142+
<FlexibleMediaGalleryNewLightbox
143+
data-test="image-carousel"
144+
:items="parsedCarouselData"
145+
>
141146
<template #default="slotProps">
142-
<BlockTag :label="parsedCarouselData[slotProps.selectionIndex]?.creditText" />
147+
<BlockTag
148+
data-test="credit-text"
149+
:label="parsedCarouselData[slotProps.selectionIndex]?.creditText"
150+
/>
143151
</template>
144152
</FlexibleMediaGalleryNewLightbox>
145153
</div>
146154
</div>
147155
148-
<div class="two-column">
156+
<div
157+
data-test="second-column"
158+
class="two-column"
159+
>
149160
<div class="primary-column top">
150161
<SectionWrapper>
151162
<CardMeta
163+
data-test="text-block"
152164
:category="series[0]?.title"
153165
:title="page?.title"
154-
:guest-speaker="page.guestSpeaker"
155-
:tag-labels="page.tagLabels"
156-
:introduction="page.introduction"
166+
:guest-speaker="page?.guestSpeaker"
167+
:tag-labels="page?.tagLabels"
168+
:introduction="page?.introduction"
157169
/>
158170
<RichText
159-
v-if="page.eventDescription"
160-
:rich-text-content="page.eventDescription"
171+
v-if="page?.eventDescription"
172+
data-test="event-description"
173+
class="eventDescription"
174+
:rich-text-content="page?.eventDescription"
161175
/>
162176
163177
<RichText
164-
v-if="page.acknowledements"
165-
:rich-text-content="page.acknowledements"
178+
v-if="page?.acknowledements"
179+
data-test="acknowledgements"
180+
class="acknowledgements"
181+
:rich-text-content="page?.acknowledements"
166182
/>
167183
</SectionWrapper>
168184
</div>
@@ -172,21 +188,24 @@ const parsedFTVAEventScreeningDetails = computed(() => {
172188
<div class="sidebar-column">
173189
<div class="sidebar-content-wrapper">
174190
<BlockEventDetail
175-
:start-date="page.startDateWithTime"
176-
:time="page.startDateWithTime"
177-
:locations="page.location"
191+
data-test="event-details"
192+
:start-date="page?.startDateWithTime"
193+
:time="page?.startDateWithTime"
194+
:locations="page?.location"
178195
/>
179196
<ButtonDropdown
180-
:title="parsedCalendarData.title"
181-
:event-description="parsedCalendarData.eventDescription"
182-
:start-date-with-time="parsedCalendarData.startDateWithTime"
183-
:location="parsedCalendarData.location"
197+
data-test="calendar-dropdown"
198+
:title="parsedCalendarData?.title"
199+
:event-description="parsedCalendarData?.eventDescription"
200+
:start-date-with-time="parsedCalendarData?.startDateWithTime"
201+
:location="parsedCalendarData?.location"
184202
:is-event="true"
185203
:debug-mode-enabled="false"
186204
/>
187205
<BlockInfo
188-
v-if="page.ftvaTicketInformation && page.ftvaTicketInformation.length > 0"
189-
:ftva-ticket-information="page.ftvaTicketInformation"
206+
v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
207+
data-test="ticket-info"
208+
:ftva-ticket-information="page?.ftvaTicketInformation"
190209
/>
191210
</div>
192211
</div>
@@ -199,11 +218,13 @@ const parsedFTVAEventScreeningDetails = computed(() => {
199218
<SectionWrapper>
200219
<SectionScreeningDetails
201220
v-if="parsedFTVAEventScreeningDetails"
221+
data-test="screening-details"
202222
:items="parsedFTVAEventScreeningDetails"
203223
/>
204224
</SectionWrapper>
205225
</div>
206226
</div>
227+
207228
<div class="full-width">
208229
<SectionWrapper
209230
v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
@@ -212,6 +233,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
212233
>
213234
<SectionTeaserCard
214235
v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
236+
data-test="event-series"
215237
:items="parsedFtvaEventSeries"
216238
/>
217239
</SectionWrapper>

‎pages/events/index.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,15 @@ const page = ref(_get(data.value, 'entries[0]', {}))
4343

4444
<div
4545
v-for="event in data.entries"
46-
:key="event.id"
46+
:key="event?.id"
4747
>
48-
<NuxtLink :to="`/${event.to}`">
49-
{{ event.title }}
48+
<NuxtLink :to="`/${event?.to}`">
49+
{{ event?.title }}
5050
</NuxtLink> <br>
51-
<h4>startDate: <code>{{ event.startDate }}</code></h4>
52-
<h4>startTime: <code>{{ event.startTime }}</code></h4>
53-
<h4>ftvaEventFilters: <code>{{ event.ftvaEventFilters }}</code></h4>
54-
<h4>image: <code>{{ event.image }}</code></h4>
51+
<h4>startDate: <code>{{ event?.startDate }}</code></h4>
52+
<h4>startTime: <code>{{ event?.startTime }}</code></h4>
53+
<h4>ftvaEventFilters: <code>{{ event?.ftvaEventFilters }}</code></h4>
54+
<h4>image: <code>{{ event?.image }}</code></h4>
5555
<divider-general />
5656
</div>
5757

‎pages/series/index.vue

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -52,16 +52,16 @@ const page = ref(_get(data.value, 'entries', {}))
5252

5353
<div
5454
v-for="event in page"
55-
:key="event.id"
55+
:key="event?.id"
5656
class="events"
5757
>
58-
<NuxtLink :to="`/${event.to}`">
59-
<h3>{{ event.title }}</h3>
58+
<NuxtLink :to="`/${event?.to}`">
59+
<h3>{{ event?.title }}</h3>
6060
</NuxtLink> <br>
61-
<h4>image: <code>{{ event.image }}</code></h4>
62-
<h4>startdate: <code>{{ event.startDate }}</code></h4>
63-
<h4>enddate: <code>{{ event.endDate }}</code></h4>
64-
<h4>eventDescription: <code>{{ event.eventDescription }}</code></h4>
61+
<h4>image: <code>{{ event?.image }}</code></h4>
62+
<h4>startdate: <code>{{ event?.startDate }}</code></h4>
63+
<h4>enddate: <code>{{ event?.endDate }}</code></h4>
64+
<h4>eventDescription: <code>{{ event?.eventDescription }}</code></h4>
6565
<divider-general />
6666
</div>
6767

‎pnpm-lock.yaml

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)