Add getting started Vue.js

.gitignore

@@ -16,4 +16,6 @@ examples/node_modules/
 coverage/
 
 doc/framework
-dead_links.json
+dead_links.json
+doc/6/getting-started/.vuejs/cypress/screenshots/
+doc/6/getting-started/.vuejs/cypress/videos/

doc/6/getting-started/.vuejs/cypress.json

@@ -0,0 +1,16 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "projectId": "ce9wca",
+  "videoUploadOnPasses": false,
+  "viewportWidth": 1400,
+  "viewportHeight": 900,
+  "defaultCommandTimeout": 5000,
+  "env": {
+    "kuzzle": {
+      "host": "localhost",
+      "port": "7512",
+      "index": "chat",
+      "collection": "messages"
+    }
+  }
+}

doc/6/getting-started/.vuejs/cypress/fixtures/Elrond.json

@@ -0,0 +1,3 @@
+{
+    "username": "Elrond"
+}

doc/6/getting-started/.vuejs/cypress/fixtures/Legolas.json

@@ -0,0 +1,23 @@
+{
+    "username": "Legolas",
+    "messages": [
+        {
+            "body": {
+                "value": "It still only counts as one!",
+                "username": "Gimli"
+            }
+        },
+        {
+            "body": {
+                "value": "What do your elf eyes see?",
+                "username": "Aragorn"
+            }
+        },
+        {
+            "body": {
+                "value": "What about side by side with a friend?",
+                "username": "Legolas"
+            }
+        }
+    ]
+}

doc/6/getting-started/.vuejs/cypress/fixtures/Sam.json

@@ -0,0 +1,7 @@
+{
+    "username": "Sam",
+    "body": {
+        "username": "Sam",
+        "value": "I can't carry it for you, But I can carry you!"
+    }
+}

doc/6/getting-started/.vuejs/cypress/fixtures/Sauron.json

@@ -0,0 +1,7 @@
+{
+    "username": "Sauron",
+    "body": {
+        "username": "Eowyn",
+        "value": "I am no man"
+    }
+}

doc/6/getting-started/.vuejs/cypress/integration/chat.spec.js

@@ -0,0 +1,86 @@
+describe('test realtime chat', () => {
+
+  it('should enter a nickname', function () {
+    cy.fixture(`Elrond.json`).as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => cy.wait(2000))
+      .then(() => {
+        cy.visit('/');
+        cy.get('[placeholder="Enter your message"]')
+          .should('not.exist');
+
+        cy.get('[placeholder="Enter your nickname"]')
+          .type(this.fixt.username);
+
+        cy.contains('Valid')
+          .click();
+
+        cy.get('[placeholder="Enter your message"]')
+          .should('exist');
+        cy.get('[placeholder="Enter your nickname"]')
+          .should('not.exist');
+      });
+  });
+
+  it('should fetch and display some messages', function () {
+    cy.fixture(`Legolas.json`).as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => cy.wait(2000))
+      .then(() => {
+        cy.visit('/');
+        cy.get('[placeholder="Enter your nickname"]')
+          .type(this.fixt.username);
+        cy.contains('Valid')
+          .click();
+        for (const message of this.fixt.messages) {
+          cy.get(message.body.username === this.fixt.username ? '.fromMe' : '.fromOthers')
+            .within(() => {
+              cy.contains(message.body.username);
+              cy.contains(message.body.value);
+            });
+        }
+      });
+  });
+
+  it('should send a message', function () {
+    cy.fixture(`Sam.json`).as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => cy.wait(2000))
+      .then(() => {
+        cy.visit('/');
+        cy.get('[placeholder="Enter your nickname"]')
+          .type(this.fixt.username);
+        cy.contains('Valid')
+          .click();
+        cy.get('[placeholder="Enter your message"]')
+          .type(this.fixt.body.value);
+        cy.contains('Send')
+          .click();
+        cy.get('.fromMe')
+          .within(() => {
+            cy.contains(this.fixt.body.value);
+            cy.contains(this.fixt.body.username);
+          });
+      });
+  });
+
+  it('should receive a message', function () {
+    cy.fixture(`Sauron.json`).as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .then(() => cy.wait(2000))
+      .then(() => {
+        cy.visit('/');
+        cy.get('[placeholder="Enter your nickname"]')
+          .type(this.fixt.username);
+        cy.contains('Valid')
+          .click();
+        cy.wait(2000)
+        cy.createMessage(this.fixt.body);
+        cy.get('.fromOthers')
+          .within(() => {
+            cy.contains(this.fixt.body.value);
+            cy.contains(this.fixt.body.username);
+          });
+      });
+  });
+});

doc/6/getting-started/.vuejs/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

doc/6/getting-started/.vuejs/cypress/support/commands.js

@@ -0,0 +1,96 @@
+function reinitialisation() {
+  const kuzzle = Cypress.env('kuzzle');
+  // Clear collection
+  return cy
+    .request({
+      url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
+      method: 'DELETE',
+      failOnStatusCode: false
+    })
+    .then(deleteResponse => {
+      cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
+      cy.wait(2000);
+      // Create index
+    });
+}
+
+Cypress.Commands.add('createMessage', (body) => {
+  const kuzzle = Cypress.env('kuzzle');
+  return cy
+    .request({
+      url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_create`,
+      method: 'POST',
+      body: body,
+    })
+    .its('body')
+    .then(response => {
+      cy.log(`Create status : ${response.status} {${body.username} / ${body.value}}`);
+      cy.wait(500);
+    });
+});
+
+Cypress.Commands.add('initialisation', () => {
+  const kuzzle = Cypress.env('kuzzle');
+  // Delete index if exists
+  return cy
+    .request({
+      url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
+      method: 'DELETE',
+      failOnStatusCode: false
+    })
+    .then(deleteResponse => {
+      cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
+      // Create index
+      return cy
+        .request({
+          url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_create`,
+          method: 'POST',
+        })
+    })
+    .then(createIndexResponse => {
+      cy.log(`Request : create ${kuzzle.index} status : ${createIndexResponse.status}`);
+      cy.wait(500);
+      // Create collection
+      return cy
+        .request({
+          url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}`,
+          method: 'PUT',
+          body: {}
+        })
+    })
+    .then(createCollectionResponse => {
+      cy.log(`Request : create ${kuzzle.collection} status : ${createCollectionResponse.status}`);
+      cy.wait(500);
+    });
+});
+
+Cypress.Commands.add('loadEnvironment', (env) => {
+  const kuzzle = Cypress.env('kuzzle');
+  if (!env.messages) {
+    return reinitialisation();
+  } else {
+    return cy
+      .initialisation()
+      .then(() => {
+        return cy
+          .request({
+            url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_mCreate`,
+            method: 'POST',
+            body: { "documents": env.messages },
+          })
+      })
+      .then(response => {
+        cy.log(`mCreate status : ${response.status}`);
+        cy.wait(500);
+        return cy
+          .request({
+            url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
+            method: 'POST',
+          })
+      })
+      .then((response) => {
+        cy.log(`refresh status : ${response.status}`);
+        cy.wait(500);
+      });
+  }
+});

doc/6/getting-started/.vuejs/cypress/support/index.js

@@ -0,0 +1 @@
+import './commands'