Add getting started React

.gitignore

@@ -17,5 +17,9 @@ coverage/
 
 doc/framework
 dead_links.json
-doc/6/getting-started/.vuejs/cypress/screenshots/
-doc/6/getting-started/.vuejs/cypress/videos/
+
+# Cypress debug
+doc/6/getting-started/.react/cypress/screenshots
+doc/6/getting-started/.react/cypress/videos
+doc/6/getting-started/.vuejs/cypress/screenshots
+doc/6/getting-started/.vuejs/cypress/videos

doc/6/getting-started/.react/.eslintrc.json

@@ -0,0 +1,57 @@
+{
+  "rules": {
+    "consistent-return": 0,
+    "curly": 2,
+    "dot-notation": 2,
+    "eqeqeq": 2,
+    "guard-for-in": 2,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "linebreak-style": [2, "unix"],
+    "new-cap": 1,
+    "no-caller": 2,
+    "no-catch-shadow": 2,
+    "no-else-return": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-eval": 2,
+    "no-implicit-coercion": 2,
+    "no-implied-eval": 2,
+    "no-invalid-this": 2,
+    "no-irregular-whitespace": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-lonely-if": 1,
+    "no-loop-func": 2,
+    "no-multi-spaces": 1,
+    "no-multiple-empty-lines": 1,
+    "no-native-reassign": 2,
+    "no-nested-ternary": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-require": 2,
+    "no-new-wrappers": 2,
+    "no-return-assign": 2,
+    "no-self-compare": 2,
+    "no-sequences": 2,
+    "no-shadow": 2,
+    "no-shadow-restricted-names": 2,
+    "no-throw-literal": 2,
+    "no-undef": 0,
+    "no-undef-init": 1,
+    "no-unreachable": 2,
+    "no-unused-expressions": [2, {"allowShortCircuit": true}],
+    "no-useless-call": 2,
+    "no-with": 2,
+    "quotes": [2, "single"],
+    "semi": [2, "always"],
+    "keyword-spacing": 2,
+    "space-before-blocks": 2,
+    "space-in-parens": [2, "never"],
+    "vars-on-top": 2,
+    "yoda": [2, "never"]
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018
+  },
+  "extends": "eslint:recommended"
+}

doc/6/getting-started/.react/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

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

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

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

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

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

@@ -0,0 +1,5 @@
+{
+    "body": {
+        "text": "I can't carry it for you, But I can carry you!"
+    }
+}

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

@@ -0,0 +1,5 @@
+{
+    "body": {
+        "text": "I am no man"
+    }
+}

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

@@ -0,0 +1,47 @@
+describe('test realtime chat', () => {
+
+  // beforeEach(() => {
+  //   cy.initialisation();
+  // });
+
+  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.log(this.fixt);
+        cy.visit('/');
+        for (const message of this.fixt.messages) {
+          cy.contains(message.body.text);
+        }
+      });
+  });
+
+  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.wait(2000);
+        cy.get('#message')
+          .type(this.fixt.body.text);
+        cy.contains('Envoyer')
+          .click();
+        cy.contains(this.fixt.body.text);
+      });
+  });
+
+  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.wait(2000);
+        cy.createMessage(this.fixt.body);
+        cy.wait(2000)
+        cy.contains(this.fixt.body.text);
+      });
+  });
+});

doc/6/getting-started/.react/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/.react/cypress/support/commands.js

@@ -0,0 +1,127 @@
+// ***********************************************
+// 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) => { ... })
+
+async function reinitialisation() {
+  const kuzzle = Cypress.env('kuzzle');
+
+  return cy
+    .request({
+      url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}`,
+      method: 'DELETE',
+      failOnStatusCode: false
+    })
+    .then(createIndexResponse => {
+      cy.log(`Request : create ${kuzzle.index} status : ${createIndexResponse.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.text}}`);
+      cy.wait(500);
+      return cy
+        .request({
+          url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_refresh`,
+          method: 'POST',
+        });
+    })
+    .then(refreshResponse => {
+      cy.log(`Request : refresh ; status : ${refreshResponse.status}`);
+      cy.wait(1000);
+    });
+});
+
+
+Cypress.Commands.add('initialisation', () => {
+  const kuzzle = Cypress.env('kuzzle');
+  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
+      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) {
+    reinitialisation();
+  } else {
+    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/.react/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')