Update e2e tests

vlingo · Oct 4, 2019 · d4e97f8 · d4e97f8
1 parent aeb5bea
commit d4e97f8
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 # vlingo-schemata
 
 [![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/vlingo-platform-java/schemata)
@@ -153,7 +154,7 @@ $ # run Boostrap.main from your IDE
 $ cd <project root>/src/main/frontend
 $ npm run serve &
 $ cd <project root>/src/test/e2e
-$ CYPRESS_BASE_URL=http://localhost:8080 npx cypress open
+$ CYPRESS_BASE_URL=http://localhost:8080/app npx cypress open
 ```
 In case you want to run the tests against `vlingo-schemata` running within a docker container,
 you can simple start it like this to match the E2E base URL default: 
@@ -162,6 +163,6 @@ you can simple start it like this to match the E2E base URL default:
 
 ```
 $ cd <project root>/src/test/e2e
-$ export CYPRESS_BASE_URL=http://localhost:9019 # default
+$ export CYPRESS_BASE_URL=http://localhost:9019/app # default
 $ npx cypress open
 ```
diff --git a/src/main/frontend/src/components/SchemaVersion.vue b/src/main/frontend/src/components/SchemaVersion.vue
@@ -90,6 +90,7 @@
                         <label class="v-label theme--light"
                                :class="{'primary--text':descriptionEditorActive}">Description</label>
                         <editor
+                                id="description-editor"
                                 @change="activateDescriptionEditor"
                                 v-model="description"
                                 theme="vs-dark"
@@ -103,6 +104,7 @@
                                :class="{'primary--text':specificationEditorActive}"
                         >Specification</label>
                         <editor
+                                id="specification-editor"
                                 v-model="specification"
                                 @change="activateSpecificationEditor"
                                 theme="vs-dark"

diff --git a/src/test/e2e/cypress/integration/browse-schemata.spec.ts b/src/test/e2e/cypress/integration/browse-schemata.spec.ts
@@ -24,8 +24,7 @@ describe('Entity Creation Tests', function () {
         let prevVersion = majorMinorVersion + '.' + patchVersion
         let currentVersion = majorMinorVersion + '.' + (patchVersion + 1)
         let spec = 'event SalutationHappened {\n' +
-            '    type eventType\n' +
-            '}'
+            '    type eventType'
         let desc = faker.lorem.sentence()
 
         // Create Entities
@@ -67,8 +66,8 @@ describe('Entity Creation Tests', function () {
         cy.fillField('Previous Version', prevVersion)
         cy.fillField('Current Version', currentVersion)
         cy.selectOption('Status', faker.random.arrayElement(['Draft', 'Published', 'Deprecated', 'Removed']))
-        cy.fillField('Description', desc)
-        cy.fillField('Specification', spec)
+        cy.fillEditor('#description-editor', desc)
+        cy.fillEditor('#specification-editor', spec)
         cy.contains('button', 'Create').click()
 
         // Assert visibility in treeview
@@ -86,7 +85,8 @@ describe('Entity Creation Tests', function () {
         cy.contains('.v-list-item__title', currentVersion).click()
 
         // Assert spec & desc
-        cy.contains('code',spec)
+        cy.contains('code','event SalutationHappened')
+        cy.contains('code','type eventType')
         cy.contains('.v-tab', 'Description').click()
         cy.contains('.v-window-item--active',desc)
 

diff --git a/src/test/e2e/cypress/integration/entity-creation.spec.ts b/src/test/e2e/cypress/integration/entity-creation.spec.ts
@@ -154,11 +154,11 @@ describe('Entity Creation Tests', function () {
         cy.fillField('Previous Version', prevVersion)
         cy.fillField('Current Version', currentVersion)
         cy.selectOption('Status', faker.random.arrayElement(['Draft', 'Published', 'Deprecated', 'Removed']))
-        cy.fillField('Description', faker.lorem.sentence())
-        cy.fillField('Specification', 'event SalutationHappened {\n' +
-            '    type eventType\n' +
-            '}')
-        cy.contains('button', 'Create').click()
+        cy.fillEditor('#description-editor', faker.lorem.sentence())
+        cy.fillEditor('#specification-editor', 'event SalutationHappened {\n' +
+            '    type eventType')
+        cy.contains('button', 'Create').click({force: true})
+
         cy.fieldContent('SchemaVersionID').should('not.be.empty')
     });
 

diff --git a/src/test/e2e/cypress/support/commands.ts b/src/test/e2e/cypress/support/commands.ts
@@ -7,20 +7,28 @@
 // ***********************************************
 
 Cypress.Commands.add("fillField", (label: string, text: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input,textarea').type(text)
 })
 
+Cypress.Commands.add("fillEditor", (id: string, text: string) => {
+    cy.get(id)
+        .click()
+        .focused()
+        .type('{ctrl}a')
+        .type(text)
+})
+
 Cypress.Commands.add("fieldContent", (label: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input,textarea').invoke('val')
 })
 
 Cypress.Commands.add("selectOption", (label: string, optionLabel: string) => {
-    cy.contains('label', new RegExp("^"+label+"$"))
+    cy.contains('label', new RegExp("^" + label + "$"))
         .next('input')
-        .type(optionLabel.substr(0,optionLabel.length-1))
+        .type(optionLabel.substr(0, optionLabel.length - 1))
         .get('.v-select-list')
-        .contains('.v-list-item',optionLabel)
+        .contains('.v-list-item', optionLabel)
         .click({force: true})
 })
diff --git a/src/test/e2e/cypress/support/index.d.ts b/src/test/e2e/cypress/support/index.d.ts
@@ -8,6 +8,12 @@ declare namespace Cypress {
          */
         fillField(label: string, text: string): Chainable<Element>
 
+        /**
+         * Fill a vue-monaco-editor field identified by its id
+         * @example cy.fillEditor('#specification-editor','schema MySpec {}')
+         */
+        fillEditor(label: string, text: string): Chainable<Element>
+
         /**
          * Return the value a Vuetify text(area) field identified by its label
          * @example cy.fieldContent('Name')