Add E2E for Document Template Development with KM editor

Author: janslifka

cypress.config.js

@@ -36,4 +36,5 @@ module.exports = defineConfig({
     },
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
   },
+  chromeWebSecurity: false
 })

cypress/e2e/document-template-editor/editor/preview-with-editor.spec.js

@@ -0,0 +1,113 @@
+import * as editor from '../../../support/editor-helpers'
+import * as project from '../../../support/project-helpers'
+import { dataCy } from '../../../support/utils'
+
+describe('Document Template Editor / Editor / Preview with KM Editor', () => {
+    const kmName = 'Test Knowledge Model'
+    const kmId = 'test-km'
+
+    const createKmEditor = () => {
+        cy.visitApp('/knowledge-model-editors/create')
+        cy.fillFields({
+            name: kmName,
+            kmId,
+            'version-major': '1',
+            'version-minor': '0',
+            'version-patch': '0'
+        })
+        cy.submitForm()
+        cy.url().should('contain', '/knowledge-model-editors/editor/')
+
+        const chapter = { title: 'Chapter 1' }
+        const question = { 
+            s_type: 'Value',
+            title: 'Question 1',
+        }
+        editor.createChildren([
+            ['chapter', chapter],
+            ['question', question]
+        ])
+    }
+
+    const createDocumentTemplateEditor = () => {
+        cy.visitApp('/document-template-editors/create?selected=dsw:questionnaire-report:1.4.0&edit=true')
+        cy.submitForm()
+        cy.url().should('contain', '/document-template-editors/dsw:questionnaire-report:1.5.0')
+    }
+    
+    const validateReplies = (validate) => {
+        cy.frameLoaded(dataCy('document-preview'))
+        cy.iframe().find('pre').then($pre => {
+            const templateJson = JSON.parse($pre.text())
+            validate(templateJson['questionnaire']['replies'])
+        })
+    }
+    
+    beforeEach(() => {
+        cy.task('branch:delete')
+        cy.task('documentTemplate:delete')
+        cy.putDefaultAppConfig()
+        cy.clearServerCache()
+        cy.importTemplate('templates/questionnaire-report.zip')
+
+        cy.loginAs('datasteward')
+    })
+
+
+    it('preview in browser', () => {
+        // Create KM Editor and Document Template Editor
+        createKmEditor()
+        createDocumentTemplateEditor()
+
+        // Set preview in Document Template Editor
+        cy.getCy('dt-editor_nav_preview').click()
+        cy.getCy('dt-editor_preview-mode_km-editor').click()
+        cy.fillFields({
+            th_uuid: kmName,
+            s_format: 'JSON Data'
+        })
+
+        // Ensure empty replies
+        validateReplies(replies => {
+            cy.wrap(replies).should('be.empty')
+        })
+
+        // Go back to the KM Editor and edit replies
+        cy.visitApp('/knowledge-model-editors')
+        editor.open(kmId)
+        editor.openPreview()
+        project.typeAnswer('Question 1', 'This is the question answer')
+        cy.getCy('km-editor_preview_save-values').click()
+        editor.awaitSave()
+
+        // Go back to the Document Template Editor
+        cy.visitApp('/document-template-editors')
+        cy.clickListingItemAction('dsw:questionnaire-report:1.5.0', 'view')
+        cy.getCy('dt-editor_nav_preview').click()
+
+        validateReplies(replies => {
+            cy.wrap(Object.keys(replies)).should('have.length', 1)
+
+            const value = Object.values(replies)[0].value
+            cy.wrap(value.type).should('eq', 'StringReply')
+            cy.wrap(value.value).should('eq', 'This is the question answer')
+        })
+
+        // Back to KM Editor
+        cy.visitApp('/knowledge-model-editors')
+        editor.open(kmId)
+        editor.openPreview()
+        project.clearAnswer('Question 1')
+        cy.getCy('km-editor_preview_save-values').click()
+        editor.awaitSave()
+
+        // Back to Document Template Editor and check replies are empty again
+        cy.visitApp('/document-template-editors')
+        cy.clickListingItemAction('dsw:questionnaire-report:1.5.0', 'view')
+        cy.getCy('dt-editor_nav_preview').click()
+
+        validateReplies(replies => {
+            cy.wrap(replies).should('be.empty')
+        })
+    })
+})

cypress/support/commands.js

@@ -1,3 +1,4 @@
+import 'cypress-iframe'
 import { dataCy } from './utils'
 
 

package-lock.json

@@ -8,6 +8,7 @@
     "pg": "^8.13.1"
   },
   "devDependencies": {
-    "cypress": "^14.0.1"
+    "cypress": "^14.0.1",
+    "cypress-iframe": "^1.0.1"
   }
 }