Merge pull request #18 from edly-io/ziafazal/cypress-tests

feat: cypress e2e tests

.github/workflows/main.yml

@@ -0,0 +1,59 @@
+name: Cypress Tests using Cypress Docker Image
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches:
+    - '**'
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node16.14.0-slim-chrome99-ff97
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: install pip
+        run: |  
+          apt update -qq
+          apt install -y python3-pip
+          pip3 --version
+
+      - name: Checkout xblock-sdk repo
+        uses: actions/checkout@v2
+        with:
+          repository: openedx/xblock-sdk
+          path: xblock-sdk
+
+      - name: Setup xblock-sdk
+        working-directory: xblock-sdk
+        run: |
+          pwd
+          pip install -qr requirements/dev.txt
+          pip install -qr requirements/local.txt
+
+      - name: setup h5p xblock
+        run: |          
+          pip install .
+
+      - name: Run xblock workbench
+        working-directory: xblock-sdk
+        env:
+          EXCLUDE_SAMPLE_XBLOCKS: yes           
+        run: |          
+          python3 manage.py migrate --noinput
+          python3 ./manage.py runserver &
+
+      - name: Sleep for 5s to wait for django server getting up and running
+        uses: juliangruber/sleep-action@v1
+        with:
+          time: 5s
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v4
+        with:
+          start: python3 ../../xblock-sdk/manage.py runserver
+          browser: chrome
+          working-directory: tests/cypress

.gitignore

@@ -10,6 +10,7 @@ __pycache__/
 .Python
 build/
 h5pxblock/public/js/samples
+tests/cypress/node_modules
 develop-eggs/
 dist/
 downloads/

setup.py

@@ -28,7 +28,7 @@ def package_data(pkg, roots):
 
 setup(
     name='h5p-xblock',
-    version='0.2.2',
+    version='0.2.3',
     description='XBlock to play self hosted h5p content inside open edX',
     long_description=long_description,
     long_description_content_type='text/markdown',

tests/cypress/cypress.config.js

@@ -0,0 +1,14 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  projectId: 'h5pxblock_cypress',
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    env: {
+      STUDIO_URL: "http://localhost:8000/scenario/h5pxblock.0/studio_view/",
+      LMS_URL: "http://localhost:8000/scenario/h5pxblock.0/"
+    }
+  },
+});

tests/cypress/cypress/e2e/lms_view.cy.js

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+
+// H5P XBlock studio_view tests
+
+describe('H5P Studio View', () => {
+
+    it('displays h5p xblock in lms view', () => {
+
+        // Save data on studio first
+        cy.intercept('POST', '/handler/h5pplayerxblock.h5pxblock.d0.u0/studio_submit/*').as('studioSubmit')
+        cy.studioSubmit()
+        cy.wait('@studioSubmit')
+
+        // Now access LMS
+        cy.intercept('GET', '/h5pxblockmedia/h5pplayerxblock.h5pxblock.d0.u0/h5p.json').as('rootJson')        
+        cy.visit(Cypress.env('LMS_URL'))
+        cy.wait('@rootJson')
+
+        // Make sure H5P content iframe is loaded and relevant buttons are visible
+        cy.getIframe(".h5p-iframe").find('.h5p-drag-dropzone-container').should('have.length', 3)
+        cy.getIframe(".h5p-iframe").find('a.h5p-link').should('be.visible')
+        cy.getIframe(".h5p-iframe").find('.h5p-enable-fullscreen').should('be.visible')        
+        cy.getIframe(".h5p-iframe").find('.h5p-question-check-answer').click({force: true})
+
+    })
+
+})

tests/cypress/cypress/e2e/studio_view.cy.js

@@ -0,0 +1,84 @@
+/// <reference types="cypress" />
+
+// H5P XBlock studio_view tests
+
+describe('H5P Studio View', () => {
+    beforeEach(() => {
+        cy.visit(Cypress.env('STUDIO_URL'))
+    })
+
+    it('displays h5p xblock in studio view and verify fist, last and file fields', () => {
+
+        // h5p xblock should display file input field to display content.
+        cy.get('.settings-list li #xb_h5p_file').should('have.length', 1)
+
+        // First field should be Display name.
+        cy.get('.settings-list li label').first().should('have.text', 'Display Name')
+        cy.get('.settings-list li span').first().should('have.text', 'Display name for this module')
+
+        // Last field should be Display name.
+        cy.get('.settings-list li label').last().should('have.text', 'User content state save frequency')
+        cy.get('.settings-list li span').last().should('to.contain', 'How often current user content state should be autosaved')
+
+    })
+
+    it('sets values in studio view fields and saves them', () => {
+        // Fill all fields and submit
+        cy.intercept('POST', '/handler/h5pplayerxblock.h5pxblock.d0.u0/studio_submit/*').as('studioSubmit')
+        cy.studioSubmit()
+        cy.wait('@studioSubmit')
+        // Make sure progress bar updated after content is uploaded
+        cy.get('.progress-bar-container').should('be.visible')
+        cy.get('.progress-bar-container .progress-bar').should('have.text', 'Uploaded(100%)')
+
+        cy.visit(Cypress.env('STUDIO_URL'))
+
+        cy.fixture('sampledata').then((data) => {
+            cy.contains('Display Name')
+            .parent()
+            .find('input[id=xb_display_name]')
+            .should('have.value', data.xb_display_name)
+
+            cy.contains('Currently:')
+            .parent()
+            .should('to.contain', data.h5p_file_upload)
+            cy.contains('Reuse Existing H5P Content')
+            .parent()
+            .find('input[id=xb_existing_content_path]')
+            .should('have.value', '/h5pxblockmedia/h5pplayerxblock.h5pxblock.d0.u0')
+
+            cy.contains('Show H5P player frame')
+            .parent()
+            .find('select[id=xb_field_edit_show_frame]')
+            .should('have.value', data.xb_field_edit_show_frame)
+
+            cy.contains('Show copyright button')
+            .parent()
+            .find('select[id=xb_field_edit_show_copyright]')
+            .should('have.value', data.xb_field_edit_show_copyright)
+
+            cy.contains('Show h5p icon')
+            .parent()
+            .find('select[id=xb_field_edit_show_h5p]')
+            .should('have.value', data.xb_field_edit_show_h5p)
+
+            cy.contains('Show fullscreen button')
+            .parent()
+            .find('select[id=xb_field_edit_show_fullscreen]')
+            .should('have.value', data.xb_field_edit_show_fullscreen)
+
+            cy.contains('Is Scorable')
+            .parent()
+            .find('select[id=xb_field_edit_is_scorable]')
+            .should('have.value', data.xb_field_edit_is_scorable)
+
+            cy.contains('User content state save frequency')
+            .parent()
+            .find('input[id=xb_field_edit_save_freq]')
+            .should('have.value', data.xb_field_edit_save_freq)
+
+        })
+
+    })
+
+})

tests/cypress/cypress/fixtures/sampledata.json

@@ -0,0 +1,10 @@
+{
+  "xb_display_name": "H5P Test Content for Cypress",
+  "xb_field_edit_show_frame": "1",
+  "xb_field_edit_show_copyright": "1",
+  "xb_field_edit_show_h5p": "1",
+  "xb_field_edit_show_fullscreen": "1",
+  "xb_field_edit_is_scorable": "1",
+  "xb_field_edit_save_freq": "5",
+  "h5p_file_upload": "drag-the-words-1399.h5p"
+}

tests/cypress/cypress/support/commands.js

@@ -0,0 +1,55 @@
+Cypress.Commands.add('studioSubmit', () => {
+    cy.visit(Cypress.env('STUDIO_URL'))
+    cy.fixture('sampledata').then((data) => {
+        cy.contains('Display Name')
+        .parent()
+        .find('input[id=xb_display_name]')
+        .clear().type(data.xb_display_name)
+
+        cy.contains('Reuse Existing H5P Content')
+        .parent()
+        .find('input[id=xb_existing_content_path]')
+        .clear()
+
+        cy.contains('Show H5P player frame')
+        .parent()
+        .find('select[id=xb_field_edit_show_frame]')
+        .select(data.xb_field_edit_show_frame)
+
+        cy.contains('Show copyright button')
+        .parent()
+        .find('select[id=xb_field_edit_show_copyright]')
+        .select(data.xb_field_edit_show_copyright)
+
+        cy.contains('Show h5p icon')
+        .parent()
+        .find('select[id=xb_field_edit_show_h5p]')
+        .select(data.xb_field_edit_show_h5p)
+
+        cy.contains('Show fullscreen button')
+        .parent()
+        .find('select[id=xb_field_edit_show_fullscreen]')
+        .select(data.xb_field_edit_show_fullscreen)
+
+        cy.contains('Is Scorable')
+        .parent()
+        .find('select[id=xb_field_edit_is_scorable]')
+        .select(data.xb_field_edit_is_scorable)
+
+        cy.contains('User content state save frequency')
+        .parent()
+        .find('input[id=xb_field_edit_save_freq]')
+        .clear().type(data.xb_field_edit_save_freq)
+
+        cy.get('input[id=xb_h5p_file]').selectFile('cypress/fixtures/' + data.h5p_file_upload)
+
+    })
+    cy.get('a.save-button').click()
+})
+
+Cypress.Commands.add('getIframe', (iframe) => {
+    return cy.get(iframe).first()
+        .its('0.contentDocument.body', {timeout: 10000})
+        .should('not.be.empty')
+        .then(cy.wrap);
+})

tests/cypress/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')