Skip to content

Commit

Permalink
Merge pull request #48 from vlingo/feature/34-text_editor
Browse files Browse the repository at this point in the history
Use monaco editor for specification and description
  • Loading branch information
VaughnVernon authored Oct 4, 2019
2 parents 590bbfe + 51889c7 commit 69c6875
Show file tree
Hide file tree
Showing 9 changed files with 1,902 additions and 1,751 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

# vlingo-schemata

[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/vlingo-platform-java/schemata)
Expand Down Expand Up @@ -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:
Expand All @@ -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
```
3,517 changes: 1,815 additions & 1,702 deletions src/main/frontend/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions src/main/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
},
"dependencies": {
"@babel/polyfill": "^7.0.0-rc.1",
"monaco-editor-vue": "1.0.9",
"axios": "^0.19.0",
"marked": "^0.7.0",
"vue": "^2.6.6",
Expand All @@ -29,6 +30,7 @@
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"monaco-editor-webpack-plugin": "^1.7.0",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.5.21"
},
Expand Down
52 changes: 42 additions & 10 deletions src/main/frontend/src/components/SchemaVersion.vue
Original file line number Diff line number Diff line change
Expand Up @@ -86,19 +86,34 @@
></v-autocomplete>
</v-col>

<v-col class="d-flex" cols="12" lg="6">
<v-textarea
<v-col cols="12">
<label class="v-label theme--light"
:class="{'primary--text':descriptionEditorActive}">Description</label>
<editor
id="description-editor"
@change="activateDescriptionEditor"
v-model="description"
label="Description"
required
></v-textarea>
theme="vs-dark"
language="markdown"
height="200"
:options="editorOptions"
></editor>
</v-col>
<v-col class="d-flex" cols="12" lg="6">
<v-textarea
<v-col cols="12">
<label class="v-label theme--light"
:class="{'primary--text':specificationEditorActive}"
>Specification</label>
<editor
id="specification-editor"
v-model="specification"
label="Specification"
required
></v-textarea>
@change="activateSpecificationEditor"
theme="vs-dark"
language="javascript"
height="500"
:options="editorOptions"
></editor>


</v-col>
</v-row>
</v-form>
Expand All @@ -116,8 +131,11 @@
<script>
import {mapFields} from 'vuex-map-fields';
import Repository from '@/api/SchemataRepository'
import editor from 'monaco-editor-vue';
export default {
components: {editor},
data: () => {
return {
schemaVersionId: '',
Expand All @@ -134,6 +152,12 @@
contexts: false,
versions: false,
schemata: false,
},
descriptionEditorActive: false,
specificationEditorActive: false,
editorOptions: {
automaticLayout: true,
}
}
},
Expand Down Expand Up @@ -233,6 +257,14 @@
let response = err.response ? err.response.data + ' - ' : ''
vm.$store.commit('raiseError', {message: response + err})
})
},
activateDescriptionEditor() {
this.descriptionEditorActive = true
this.specificationEditorActive = false
},
activateSpecificationEditor() {
this.descriptionEditorActive = false
this.specificationEditorActive = true
}
}
}
Expand Down
11 changes: 10 additions & 1 deletion src/main/frontend/vue.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
publicPath: './',
publicPath: '/app/',
devServer: {
proxy: {
'/organizations': {
Expand All @@ -13,4 +15,11 @@ module.exports = {
}
},
},
chainWebpack: config => {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
languages: ['javascript', 'markdown']
}
])
}
}
10 changes: 5 additions & 5 deletions src/test/e2e/cypress/integration/browse-schemata.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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)

Expand Down
32 changes: 6 additions & 26 deletions src/test/e2e/cypress/integration/entity-creation.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ describe('Entity Creation Tests', function () {

cy.visit('/#/unit')
cy.fieldContent('UnitID').should('be.empty')
cy.selectOption('Organization', orgName)
cy.fillField('Name', unitName)
cy.fillField('Description', faker.lorem.sentence())
cy.contains('button', 'Create').click()
Expand All @@ -51,15 +50,12 @@ describe('Entity Creation Tests', function () {
cy.contains('button', 'Create').click()

cy.visit('/#/unit')
cy.selectOption('Organization', orgName)
cy.fillField('Name', unitName)
cy.fillField('Description', 'foo')
cy.contains('button', 'Create').click()

cy.visit('/#/context')
cy.fieldContent('ContextID').should('be.empty')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.fillField('Namespace', namespace)
cy.fillField('Description', faker.lorem.sentence())
cy.contains('button', 'Create').click()
Expand All @@ -78,23 +74,17 @@ describe('Entity Creation Tests', function () {
cy.contains('button', 'Create').click()

cy.visit('/#/unit')
cy.selectOption('Organization', orgName)
cy.fillField('Name', unitName)
cy.fillField('Description', 'foo')
cy.contains('button', 'Create').click()

cy.visit('/#/context')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.fillField('Namespace', namespace)
cy.fillField('Description', 'foo')
cy.contains('button', 'Create').click()

cy.visit('/#/schema')
cy.fieldContent('SchemaID').should('be.empty')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.selectOption('Context', namespace)
cy.fillField('Name', name)
cy.selectOption('Category', faker.random.arrayElement(['Command', 'Data', 'Document', 'Envelope', 'Event', 'Unknown']))
cy.selectOption('Scope', faker.random.arrayElement(['Public', 'Private']))
Expand All @@ -121,23 +111,17 @@ describe('Entity Creation Tests', function () {
cy.contains('button', 'Create').click()

cy.visit('/#/unit')
cy.selectOption('Organization', orgName)
cy.fillField('Name', unitName)
cy.fillField('Description', 'foo')
cy.contains('button', 'Create').click()

cy.visit('/#/context')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.fillField('Namespace', namespace)
cy.fillField('Description', 'foo')
cy.contains('button', 'Create').click()

cy.visit('/#/schema')
cy.fieldContent('SchemaID').should('be.empty')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.selectOption('Context', namespace)
cy.fillField('Name', schema)
cy.selectOption('Category', faker.random.arrayElement(['Command', 'Data', 'Document', 'Envelope', 'Event', 'Unknown']))
cy.selectOption('Scope', faker.random.arrayElement(['Public', 'Private']))
Expand All @@ -147,19 +131,15 @@ describe('Entity Creation Tests', function () {

cy.visit('/#/schemaVersion')
cy.fieldContent('SchemaVersionID').should('be.empty')
cy.selectOption('Organization', orgName)
cy.selectOption('Unit', unitName)
cy.selectOption('Context', namespace)
cy.selectOption('Schema', schema)
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.fieldContent('SchemaVersionID').should('not.be.empty')
cy.fillEditor('#description-editor', faker.lorem.sentence())
cy.fillEditor('#specification-editor', 'event SalutationHappened {\n' +
' type eventType')
cy.wait(250).contains('button', 'Create').click({force: true})

cy.wait(250).fieldContent('SchemaVersionID').should('not.be.empty')
});

});
18 changes: 13 additions & 5 deletions src/test/e2e/cypress/support/commands.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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})
})
6 changes: 6 additions & 0 deletions src/test/e2e/cypress/support/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down

0 comments on commit 69c6875

Please sign in to comment.