Add-getting-started-vuejs

.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', () => {
+
+  before(() => {
+    cy.initialisation();
+  });
+
+  it('should enter a nickname', function () {
+    cy.fixture(`Elrond.json`).as('fixt')
+      .then(() => cy.loadEnvironment(this.fixt))
+      .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.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.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.visit('/');
+        cy.get('[placeholder="Enter your nickname"]')
+          .type(this.fixt.username);
+        cy.contains('Valid')
+          .click();
+        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,115 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+function reinitialisation() {
+  const kuzzle = Cypress.env('kuzzle');
+
+  // Clear collection
+  return cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_truncate`,
+    method: 'DELETE',
+  })
+    .then(searchResponse => {
+      cy.log(`Request : truncate ${kuzzle.collection} status : ${searchResponse.status}`);
+      cy.wait(500);
+    });
+}
+
+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
+  cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_exists`,
+    method: 'GET',
+  })
+    .then(existsResponse => {
+      cy.log(`Request : exists ${kuzzle.index} status : ${existsResponse.status}`);
+      if (existsResponse.body.result) {
+        cy.request({
+          url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
+          method: 'DELETE',
+        })
+          .then(deleteResponse => {
+            cy.log(`Request : delete ${kuzzle.index} status : ${deleteResponse.status}`);
+          });
+      }
+    }).then(() => {
+      // Create index
+      cy.request({
+        url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_create`,
+        method: 'POST',
+      })
+        .then(createResponse => {
+          cy.log(`Request : create ${kuzzle.index} status : ${createResponse.status}`);
+          cy.wait(500);
+        });
+    })
+    .then(() => {
+      // Create collection
+      cy.request({
+        url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}`,
+        method: 'PUT',
+        body: {}
+      })
+        .then(createResponse => {
+          cy.log(`Request : create ${kuzzle.collection} status : ${createResponse.status}`);
+          cy.wait(500);
+        });
+    });
+});
+
+Cypress.Commands.add('loadEnvironment', (env) => {
+  const kuzzle = Cypress.env('kuzzle');
+
+  reinitialisation();
+  if (!env.messages) {return;}
+  cy.request({
+    url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_mCreate`,
+    method: 'POST',
+    body: {"documents": env.messages},
+  })
+    .its('body')
+    .then(response => {
+      cy.log(`mCreate status : ${response.status}`);
+      cy.wait(500);
+    });
+});

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

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.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')