Skip to content

Commit

Permalink
chore: APPS-2864 Write E2E tests for EventDetail Page template (#29)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
jendiamond and pghorpade authored Aug 30, 2024
1 parent 9481a65 commit 1371a86
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 48 deletions.
12 changes: 9 additions & 3 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,9 @@ jobs:
steps:
- uses: actions/checkout@v3
- uses: ./.github/workflows/setup-workspace
- name: Set deployment date
id: set-deploy-date
run: echo "DEPLOY_DATE=$(date '+%Y-%m-%d %H:%M:%S %Z')" >> $GITHUB_ENV
- name: Cache built static site
uses: actions/cache@v3
id: cache-nuxt3
Expand Down Expand Up @@ -79,7 +82,10 @@ jobs:
uses: nwtgck/[email protected] #
with:
production-deploy: false
deploy-message: https://github.com/UCLALibrary/ftva-website-nuxt/pull/${{ github.event.pull_request.number }}
deploy-message: |
Deploy preview for PR #${{ github.event.pull_request.number }}: Date: ${{ env.DEPLOY_DATE }}
Commit ${{ github.event.pull_request.head.sha }} - https://github.com/UCLALibrary/library-website-nuxt/commit/${{ github.event.pull_request.head.sha }}
Pull Request: https://github.com/UCLALibrary/library-website-nuxt/pull/${{ github.event.pull_request.number }}
alias: deploy-preview-${{ github.event.pull_request.number }}
github-token: ${{ secrets.GITHUB_TOKEN }}
overwrites-pull-request-comment: true
Expand Down Expand Up @@ -109,11 +115,11 @@ jobs:
uses: nwtgck/actions-netlify@v2 #
with:
production-deploy: true
deploy-message: https://github.com/UCLALibrary/ftva-website-nuxt/commit/${{ github.sha }}
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 }}"
github-token: ${{ secrets.GITHUB_TOKEN }}
publish-dir: .output/public
fails-without-credentials: true
github-deployment-environment: production
github-deployment-environment: testing
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_TEST_FTVA_SITE_ID }}
Expand Down
70 changes: 66 additions & 4 deletions cypress/e2e/eventDetailPage.cy.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,71 @@
describe('Event Detail page', () => {
it('Visit a event Detail Page', () => {
cy.visit('/events/la-région-centrale-03-08-24')
Cypress.on('uncaught:exception', () => { return false })

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

it('Visit the Event Detail Page', () => {
// CarouselImages
cy.visit('/events/la-région-centrale-03-08-24')
cy.getByData('image-carousel').should('exist')
cy.getByData('text-block').contains('TEST - La Région Centrale Screening')
cy.getByData('text-block').should('be.visible')
cy.getByData('event-description').should('be.visible')
cy.getByData('acknowledgements').should('be.visible')
cy.getByData('screening-details').should('be.visible')
cy.get('.block-event-detail.ftva').scrollIntoView()
cy.get('.block-event-detail.ftva').should('be.visible')
cy.getByData('calendar-dropdown').should('exist')
cy.getByData('ticket-info').should('be.visible')
cy.getByData('event-series').should('be.visible')
cy.percySnapshot('eventdetailpage', { widths: [768, 992, 1200] })

// it('clicks the arrow to see the next image', () => {
// cy.getByData('screening-details').contains('Trailer with Cover image')
// })
})
// modal exists
// two images
// creditText is visible .contains('Movie Database')
// click on arrow and it moves to next image
// cy.getByData("ticket-info").find("a").contains("Plan Your Visit").click()
})

// Potential TODOs and test ideas
// https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test
// it.only('allows users to subscribe to the email list', () => {
// cy.getByData('email-input').type('[email protected]')
// cy.getByData('submit-button').click()
// cy.getByData('success-message').should('exist').contains('[email protected]')
// })

// UI Elements: Test visibility and functionality of important UI elements (e.g., buttons, links, modals)

// Verify that data is displayed correctly, especially dynamic data fetched from APIs

// Event Information Display: Ensure that all event details (title, description, date, time, location) are displayed correctly

// Add to Calendar: Verify that the "Add to Calendar" button works as expected

// Responsive Design: Check that the page renders correctly on different screen sizes

// Navigation: Ensure that navigation to and from the event detail page works smoothly

// ---------

// UI Elements: Test visibility and functionality of important UI elements (e.g., buttons, links, modals)

// Verify that data is displayed correctly, especially dynamic data fetched from APIs

// Event Information Display: Ensure that all event details (title, description, date, time, location) are displayed correctly

// Add to Calendar: Verify that the "Add to Calendar" button works as expected

// Responsive Design: Check that the page renders correctly on different screen sizes

// Navigation: Ensure that navigation to and from the event detail page works smoothly
12 changes: 12 additions & 0 deletions cypress/support/commands.js → cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,15 @@
/// <references types='cypress' />

declare namespace Cypress {
interface Chainable {
getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
}
}

Cypress.Commands.add('getByData', (selector) => {
return cy.get(`[data-test=${selector}]`)
})

// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
Expand Down
8 changes: 4 additions & 4 deletions layouts/default.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@ const secondaryMenuItems = computed(() => {
return globalStore.header.secondary
})
const isMobile = computed(() => {
return globalStore.winWidth <= 1024
})
const isMobile = ref(false)
onMounted(() => {
classes.value.push({ 'has-scrolled': globalStore.sTop })
classes.value.push({ 'has-scrolled-past-header': globalStore.sTop >= 150 })
isMobile.value = globalStore.winWidth <= 1024
})
</script>
Expand Down Expand Up @@ -66,11 +65,12 @@ onMounted(() => {
<hr>
</div>

<footer>
<footer data-test="footer">
<footer-main />
</footer>
</div>
</template>

<style lang="scss" scoped>
.layout-default {
min-height: 100vh;
Expand Down
68 changes: 45 additions & 23 deletions pages/events/[slug].vue
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
return page?.value.ftvaEventScreeningDetails?.map((obj) => {
return {
...obj,
image: obj.image[0] // craft data has an array, but component expects a single object for image
image: obj.image && obj.image.length === 1 ? obj.image[0] : null, // craft data has an array, but component expects a single object for image
}
})
})
Expand All @@ -118,12 +118,14 @@ const parsedFTVAEventScreeningDetails = computed(() => {
<div class="one-column">
<NavBreadcrumb
class="breadcrumb"
:title="page.title"
data-test="breadcrumb"
:title="page?.title"
/>
<ResponsiveImage
v-if="parsedImage.length === 1"
:media="parsedImage[0].image[0]"
v-if="parsedImage && parsedImage.length === 1 && parsedImage[0]?.image && parsedImage[0]?.image?.length === 1"
data-test="single-image"
:media="parsedImage[0]?.image[0]"
:aspect-ratio="43.103"
>
<template
Expand All @@ -137,32 +139,46 @@ const parsedFTVAEventScreeningDetails = computed(() => {
v-else
class="lightbox-container"
>
<FlexibleMediaGalleryNewLightbox :items="parsedCarouselData">
<FlexibleMediaGalleryNewLightbox
data-test="image-carousel"
:items="parsedCarouselData"
>
<template #default="slotProps">
<BlockTag :label="parsedCarouselData[slotProps.selectionIndex]?.creditText" />
<BlockTag
data-test="credit-text"
:label="parsedCarouselData[slotProps.selectionIndex]?.creditText"
/>
</template>
</FlexibleMediaGalleryNewLightbox>
</div>
</div>
<div class="two-column">
<div
data-test="second-column"
class="two-column"
>
<div class="primary-column top">
<SectionWrapper>
<CardMeta
data-test="text-block"
:category="series[0]?.title"
:title="page?.title"
:guest-speaker="page.guestSpeaker"
:tag-labels="page.tagLabels"
:introduction="page.introduction"
:guest-speaker="page?.guestSpeaker"
:tag-labels="page?.tagLabels"
:introduction="page?.introduction"
/>
<RichText
v-if="page.eventDescription"
:rich-text-content="page.eventDescription"
v-if="page?.eventDescription"
data-test="event-description"
class="eventDescription"
:rich-text-content="page?.eventDescription"
/>
<RichText
v-if="page.acknowledements"
:rich-text-content="page.acknowledements"
v-if="page?.acknowledements"
data-test="acknowledgements"
class="acknowledgements"
:rich-text-content="page?.acknowledements"
/>
</SectionWrapper>
</div>
Expand All @@ -172,21 +188,24 @@ const parsedFTVAEventScreeningDetails = computed(() => {
<div class="sidebar-column">
<div class="sidebar-content-wrapper">
<BlockEventDetail
:start-date="page.startDateWithTime"
:time="page.startDateWithTime"
:locations="page.location"
data-test="event-details"
:start-date="page?.startDateWithTime"
:time="page?.startDateWithTime"
:locations="page?.location"
/>
<ButtonDropdown
:title="parsedCalendarData.title"
:event-description="parsedCalendarData.eventDescription"
:start-date-with-time="parsedCalendarData.startDateWithTime"
:location="parsedCalendarData.location"
data-test="calendar-dropdown"
:title="parsedCalendarData?.title"
:event-description="parsedCalendarData?.eventDescription"
:start-date-with-time="parsedCalendarData?.startDateWithTime"
:location="parsedCalendarData?.location"
:is-event="true"
:debug-mode-enabled="false"
/>
<BlockInfo
v-if="page.ftvaTicketInformation && page.ftvaTicketInformation.length > 0"
:ftva-ticket-information="page.ftvaTicketInformation"
v-if="page?.ftvaTicketInformation && page?.ftvaTicketInformation.length > 0"
data-test="ticket-info"
:ftva-ticket-information="page?.ftvaTicketInformation"
/>
</div>
</div>
Expand All @@ -199,11 +218,13 @@ const parsedFTVAEventScreeningDetails = computed(() => {
<SectionWrapper>
<SectionScreeningDetails
v-if="parsedFTVAEventScreeningDetails"
data-test="screening-details"
:items="parsedFTVAEventScreeningDetails"
/>
</SectionWrapper>
</div>
</div>
<div class="full-width">
<SectionWrapper
v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
Expand All @@ -212,6 +233,7 @@ const parsedFTVAEventScreeningDetails = computed(() => {
>
<SectionTeaserCard
v-if="parsedFtvaEventSeries && parsedFtvaEventSeries.length > 0"
data-test="event-series"
:items="parsedFtvaEventSeries"
/>
</SectionWrapper>
Expand Down
14 changes: 7 additions & 7 deletions pages/events/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ const page = ref(_get(data.value, 'entries[0]', {}))

<div
v-for="event in data.entries"
:key="event.id"
:key="event?.id"
>
<NuxtLink :to="`/${event.to}`">
{{ event.title }}
<NuxtLink :to="`/${event?.to}`">
{{ event?.title }}
</NuxtLink> <br>
<h4>startDate: <code>{{ event.startDate }}</code></h4>
<h4>startTime: <code>{{ event.startTime }}</code></h4>
<h4>ftvaEventFilters: <code>{{ event.ftvaEventFilters }}</code></h4>
<h4>image: <code>{{ event.image }}</code></h4>
<h4>startDate: <code>{{ event?.startDate }}</code></h4>
<h4>startTime: <code>{{ event?.startTime }}</code></h4>
<h4>ftvaEventFilters: <code>{{ event?.ftvaEventFilters }}</code></h4>
<h4>image: <code>{{ event?.image }}</code></h4>
<divider-general />
</div>

Expand Down
14 changes: 7 additions & 7 deletions pages/series/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,16 @@ const page = ref(_get(data.value, 'entries', {}))

<div
v-for="event in page"
:key="event.id"
:key="event?.id"
class="events"
>
<NuxtLink :to="`/${event.to}`">
<h3>{{ event.title }}</h3>
<NuxtLink :to="`/${event?.to}`">
<h3>{{ event?.title }}</h3>
</NuxtLink> <br>
<h4>image: <code>{{ event.image }}</code></h4>
<h4>startdate: <code>{{ event.startDate }}</code></h4>
<h4>enddate: <code>{{ event.endDate }}</code></h4>
<h4>eventDescription: <code>{{ event.eventDescription }}</code></h4>
<h4>image: <code>{{ event?.image }}</code></h4>
<h4>startdate: <code>{{ event?.startDate }}</code></h4>
<h4>enddate: <code>{{ event?.endDate }}</code></h4>
<h4>eventDescription: <code>{{ event?.eventDescription }}</code></h4>
<divider-general />
</div>

Expand Down
1 change: 1 addition & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 comment on commit 1371a86

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.