Chore: e2e tests on media component (issue/286)

test/e2e/media.cy.js

@@ -0,0 +1,36 @@
+describe('Media', function () {
+  beforeEach(function () {
+    cy.getData()
+  });
+
+  it('should display the media component', function () {
+    const mediaComponents = this.data.components.filter((component) => component._component === 'media')
+    mediaComponents.forEach((mediaComponent) => {
+      cy.visit(`/#/preview/${mediaComponent._id}`);
+      const bodyWithoutHtml = mediaComponent.body.replace(/<[^>]*>/g, '');
+
+      // Test basic media component
+      cy.testContainsOrNotExists('.media__title', mediaComponent.displayTitle)
+      cy.testContainsOrNotExists('.media__body', bodyWithoutHtml)
+      cy.testContainsOrNotExists('.media__instruction', mediaComponent.instruction)
+
+      if (mediaComponent._media.mp4) {
+        cy.get('.mejs-mediaelement video').should('have.attr', 'src', mediaComponent._media.mp4)
+      }
+      if (mediaComponent._media.poster) {
+        cy.get('.mejs-poster img').should('have.attr', 'src', mediaComponent._media.poster)
+      }
+
+      if (mediaComponent._transcript) {
+        cy.get('.media__transcript-body-inline').should('not.be.visible')
+        cy.get('button.media__transcript-btn').should('contain', mediaComponent._transcript.inlineTranscriptButton).click()
+        cy.get('.media__transcript-body-inline-inner').should('be.visible').should('contain', mediaComponent._transcript.inlineTranscriptBody)
+        cy.get('button.media__transcript-btn').should('contain', mediaComponent._transcript.inlineTranscriptCloseButton).click()
+        cy.get('.media__transcript-body-inline').should('not.be.visible')
+      }
+
+      // Allow the component to load and run external custom tests
+      cy.wait(1000)
+    });
+  });
+});