[SDPA-3421] Fix embedded video issues with no transcript and add tests (

#622)

* [SDPA-3421] Fix embedded video issues with no transcript and add tests

* rename alias in TideCreateNode command

examples/vic-gov-au/test/e2e/fixtures/media/embedded-video-no-transcript.yml

@@ -0,0 +1,14 @@
+- entity: media
+  bundle: embedded_video
+  name: 'Embedded video test - no transcript'
+  uid: 1
+  status: 1
+  field_media_video_embed_field: 'https://www.youtube.com/watch?v=pZRrtGYx7EM'
+  field_media_link: 'View transcript'
+  field_license_type:
+    - '#process':
+        callback: reference
+        args:
+          - taxonomy_term
+          - vid: license_type
+            name: 'Demo License'

examples/vic-gov-au/test/e2e/fixtures/media/embedded-video.yml

@@ -0,0 +1,15 @@
+- entity: media
+  bundle: embedded_video
+  name: 'Demo: Wodonga Local Aboriginal Network - Bringing People Together'
+  uid: 1
+  status: 1
+  field_media_video_embed_field: 'https://www.youtube.com/watch?v=pZRrtGYx7EM'
+  field_media_link: 'View transcript'
+  field_media_transcript: 'this is the transcript'
+  field_license_type:
+    - '#process':
+        callback: reference
+        args:
+          - taxonomy_term
+          - vid: license_type
+            name: 'Demo License'

examples/vic-gov-au/test/e2e/integration/core-modules/media/media.feature

@@ -1,9 +1,29 @@
-Feature: Media
+Feature: Embedded Media
 
-  Test Media
+  As a citizen I am able to view videos published to the website
 
-  Scenario: Embedded media video
+  Scenario: Landing page with Embedded media video
     Given the "/embedded-video-test" page exists with fixture "media/embedded-video-test" data
     When I visit the page "/embedded-video-test"
     Then there should be 2 embedded videos
-    And there should be a embedded video transcript link
+    And there should be a embedded video transcript link "/media/7008"
+
+  Scenario: Media page for video with transcript
+    Given I have created a node with the YAML fixture "media/embedded-video"
+    When I navigate to the first created node
+    Then the current page should not be an error page
+    And the page title should be "Demo: Wodonga Local Aboriginal Network - Bringing People Together"
+    And the hero banner title should be "Demo: Wodonga Local Aboriginal Network - Bringing People Together"
+    And there should be 2 breadcrumb items
+    And there should be 1 embedded videos
+    And the embedded video transcript should contain the text "this is the transcript"
+
+  Scenario: Media page for video without transcript
+    Given I have created a node with the YAML fixture "media/embedded-video-no-transcript"
+    When I navigate to the first created node
+    Then the current page should not be an error page
+    And the page title should be "Embedded video test - no transcript"
+    And the hero banner title should be "Embedded video test - no transcript"
+    And there should be 2 breadcrumb items
+    And there should be 1 embedded videos
+

packages/ripple-nuxt-tide/lib/core/middleware.js

@@ -350,7 +350,7 @@ export default async function (context, pageData) {
     // Set image.
     const featuredImage = pageData.tidePage.field_featured_image ? pageData.tidePage.field_featured_image.field_media_image : null
     const sectionImage = siteSection && siteSection.field_site_og_image ? siteSection.field_site_og_image.field_media_image : null
-    const primaryImage = pageData.tidePage.field_node_primary_site.field_site_og_image ? pageData.tidePage.field_node_primary_site.field_site_og_image.field_media_image : null
+    const primaryImage = pageData.tidePage.field_node_primary_site && pageData.tidePage.field_node_primary_site.field_site_og_image ? pageData.tidePage.field_node_primary_site.field_site_og_image.field_media_image : null
     const mediaImage = (featuredImage || sectionImage || primaryImage || null)
     const image = mediaImage ? mediaImage.url : `${context.store.state.tide.protocol + '//' + context.store.state.tide.host}/img/social-media-image.jpg`
     const imageAlt = mediaImage ? mediaImage.meta.alt : ''

packages/ripple-nuxt-tide/modules/media/components/EmbeddedVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <rpl-row row-gutter class="app-content tide-content tide-content--media tide-content--media-embedded-video">
     <rpl-col cols="full">
-      <rpl-embedded-video variant="full" :src="page.field_media_video_embed_field" :transcript="page.field_media_transcript.processed" />
+      <rpl-embedded-video variant="full" :src="page.field_media_video_embed_field" :transcript="page.field_media_transcript && page.field_media_transcript.processed" />
     </rpl-col>
   </rpl-row>
 </template>

packages/ripple-test-tools/commands.js

@@ -38,8 +38,7 @@ function rippleCommands () {
     cy.log('test/e2e/fixtures/' + fixturePath + '.yml')
     cy.readFile('test/e2e/fixtures/' + fixturePath + '.yml').as('yaml')
     cy.get('@yaml').then(data => {
-      cy.task('createNodeFromYAML', data).as('nodeCreated')
-      cy.log('@nodeCreated')
+      cy.task('createNodeFromYAML', data).as('createdNodes')
     })
   })
 

packages/ripple-test-tools/step_definitions/common/components.js

@@ -35,11 +35,9 @@ Then(`there should be the following anchor links:`, dataTable => {
   const expectedLinks = dataTable.hashes()
   const expectedHrefs = expectedLinks.map(l => l.link)
   const expectedText = expectedLinks.map(l => l.text)
-  cy.log(expectedHrefs)
   cy.get('.rpl-anchor-links__item > a').each(($el, index) => {
     const text = $el.text()
     const href = $el.attr('href').split('#')[1]
-    cy.log(href)
     cy.wrap(expectedText).should('contain', text)
     cy.wrap(expectedHrefs).should('contain', href)
   })

packages/ripple-test-tools/step_definitions/common/modules/media.js

@@ -6,8 +6,16 @@ Then(`there should be {int} embedded videos`, (number) => {
   cy.get('.rpl-embedded-video').its('length').should('eq', number)
 })
 
-Then(`there should be a embedded video transcript link`, (number) => {
+Then(`there should be a embedded video transcript link {string}`, (href) => {
   const link = cy.get('.rpl-embed-video__link a')
-  link.should('have.attr', 'href', '/media/7008')
+  link.should('have.attr', 'href', href)
   link.contains('View transcript')
 })
+
+Then(`the embedded video transcript should contain the text {string}`, (transcript) => {
+  cy.get('.rpl-embed-video__transcript').contains(transcript)
+})
+
+Then(`the embedded video transcript should not exist`, () => {
+  cy.get('.rpl-embed-video__transcript').should('not.exist')
+})

packages/ripple-test-tools/step_definitions/common/navigation.js

@@ -1,6 +1,6 @@
 /* global cy, Cypress */
 
-const { Then, Given } = require('cypress-cucumber-preprocessor/steps')
+const { Then, Given, When } = require('cypress-cucumber-preprocessor/steps')
 
 Given(`I visit the page {string}`, url => {
   cy.visit(url, {
@@ -39,6 +39,12 @@ Given(`I have created a node with the YAML fixture {string}`, fixture => {
   cy.TideCreateNode(fixture)
 })
 
+When('I navigate to the first created node', () => {
+  cy.get('@createdNodes').then(nodes => {
+    cy.visit(nodes[0])
+  })
+})
+
 Given(`the {string} page exists with fixture {string} data`, (slug, fixture) => {
   const site = Cypress.env('SITE_ID') || '4'
   cy.request({

packages/ripple-test-tools/tide-admin/index.js

@@ -88,12 +88,15 @@ module.exports = class TideAdmin {
       // Submit
       await this.submitPage()
       await page.waitForSelector('[aria-label="Status message"]', this.options.wait)
-      const result = await page.$eval('[aria-label="Status message"]', el =>
-        el
-          .classList.contains('messages--status')
-      )
+      const result = await page.$eval('[aria-label="Status message"]', el => {
+        const messageNodes = el.querySelectorAll('.messages__item')
+        const messages = Array.from(messageNodes).slice(1, messageNodes.length).map(node => node.textContent)
+        if (messages && messages.length > 0) {
+          return messages
+        }
+      })
       await this.close()
-      return result
+      return Promise.resolve(result)
     } catch (error) {
       // Cleanup
       await this.close()