From d31ccf444d2b7766829942e7eb3ced7137a5e654 Mon Sep 17 00:00:00 2001 From: dylankelly Date: Mon, 13 Jan 2020 10:56:43 +1100 Subject: [PATCH] [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 --- .../media/embedded-video-no-transcript.yml | 14 ++++++++++ .../e2e/fixtures/media/embedded-video.yml | 15 ++++++++++ .../core-modules/media/media.feature | 28 ++++++++++++++++--- .../ripple-nuxt-tide/lib/core/middleware.js | 2 +- .../media/components/EmbeddedVideo.vue | 2 +- packages/ripple-test-tools/commands.js | 3 +- .../step_definitions/common/components.js | 2 -- .../step_definitions/common/modules/media.js | 12 ++++++-- .../step_definitions/common/navigation.js | 8 +++++- .../ripple-test-tools/tide-admin/index.js | 13 +++++---- 10 files changed, 81 insertions(+), 18 deletions(-) create mode 100644 examples/vic-gov-au/test/e2e/fixtures/media/embedded-video-no-transcript.yml create mode 100644 examples/vic-gov-au/test/e2e/fixtures/media/embedded-video.yml diff --git a/examples/vic-gov-au/test/e2e/fixtures/media/embedded-video-no-transcript.yml b/examples/vic-gov-au/test/e2e/fixtures/media/embedded-video-no-transcript.yml new file mode 100644 index 000000000..47a812656 --- /dev/null +++ b/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' \ No newline at end of file diff --git a/examples/vic-gov-au/test/e2e/fixtures/media/embedded-video.yml b/examples/vic-gov-au/test/e2e/fixtures/media/embedded-video.yml new file mode 100644 index 000000000..20155a72a --- /dev/null +++ b/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' \ No newline at end of file diff --git a/examples/vic-gov-au/test/e2e/integration/core-modules/media/media.feature b/examples/vic-gov-au/test/e2e/integration/core-modules/media/media.feature index 1729599ed..8eb428326 100644 --- a/examples/vic-gov-au/test/e2e/integration/core-modules/media/media.feature +++ b/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 + diff --git a/packages/ripple-nuxt-tide/lib/core/middleware.js b/packages/ripple-nuxt-tide/lib/core/middleware.js index 3b7e22c40..1db162371 100644 --- a/packages/ripple-nuxt-tide/lib/core/middleware.js +++ b/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 : '' diff --git a/packages/ripple-nuxt-tide/modules/media/components/EmbeddedVideo.vue b/packages/ripple-nuxt-tide/modules/media/components/EmbeddedVideo.vue index b0281c88a..1324cc35f 100644 --- a/packages/ripple-nuxt-tide/modules/media/components/EmbeddedVideo.vue +++ b/packages/ripple-nuxt-tide/modules/media/components/EmbeddedVideo.vue @@ -1,7 +1,7 @@ diff --git a/packages/ripple-test-tools/commands.js b/packages/ripple-test-tools/commands.js index d5eee76df..112a5ade5 100644 --- a/packages/ripple-test-tools/commands.js +++ b/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') }) }) diff --git a/packages/ripple-test-tools/step_definitions/common/components.js b/packages/ripple-test-tools/step_definitions/common/components.js index 84e854021..621307b17 100644 --- a/packages/ripple-test-tools/step_definitions/common/components.js +++ b/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) }) diff --git a/packages/ripple-test-tools/step_definitions/common/modules/media.js b/packages/ripple-test-tools/step_definitions/common/modules/media.js index c52d7849f..3e1ff41e6 100644 --- a/packages/ripple-test-tools/step_definitions/common/modules/media.js +++ b/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') +}) diff --git a/packages/ripple-test-tools/step_definitions/common/navigation.js b/packages/ripple-test-tools/step_definitions/common/navigation.js index 0c8e70ee7..7361bcf75 100644 --- a/packages/ripple-test-tools/step_definitions/common/navigation.js +++ b/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({ diff --git a/packages/ripple-test-tools/tide-admin/index.js b/packages/ripple-test-tools/tide-admin/index.js index c277257b3..b32945d64 100644 --- a/packages/ripple-test-tools/tide-admin/index.js +++ b/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()