Add React Native getting started

.ci/test-docs.sh

@@ -18,7 +18,7 @@ until $(curl --output /dev/null --silent --head --fail http://localhost:7512); d
 done
 
 cd ${here}/../doc/7/getting-started/.react
-npm install
+npm ci
 SKIP_PREFLIGHT_CHECK=true npm run start &
 until $(curl --output /dev/null --silent --head --fail http://localhost:3000); do
   printf '.'
@@ -35,6 +35,16 @@ until $(curl --output /dev/null --silent --head --fail http://localhost:8080); d
 done
 npm run test
 
+cd ${here}/../doc/7/getting-started/.react-native
+# Here we use install instead of ci because expo-cli cannot be installed with ci
+npm install
+npm run web &
+until $(curl --output /dev/null --silent --head --fail http://localhost:19006); do
+  printf '.'
+  sleep 5
+done
+npm run test
+
 cd ${here}
 docker-compose -f ./doc/docker-compose.yml down
 

doc/7/getting-started/.react-native/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "f9155ac790fd02fadcdeca367b02581c04a353aa6d5aa84409a59f6804c87acd": true,
+  "89ed26367cdb9b771858e026f2eb95bfdb90e5ae943e716575327ec325f39c44": true
+}

doc/7/getting-started/.react-native/.gitignore

@@ -0,0 +1,19 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# macOS
+.DS_Store
+
+
+#tests
+cypress/videos
+cypress/screenshots

doc/7/getting-started/.react-native/App.js

@@ -0,0 +1,34 @@
+/* snippet:start:1 */
+import React from "react";
+import Login from "./screens/Login/Login";
+import ChatClient from "./screens/Chat/ChatClient";
+/* snippet:end */
+
+/* snippet:start:2 */
+export default class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasName: false
+    };
+  }
+  /* snippet:end */
+  /* snippet:start:3 */
+  handleSubmitName(e) {
+    const name = e.nativeEvent.text;
+    this.setState({
+      name,
+      hasName: true
+    });
+  }
+  /* snippet:end */
+  /* snippet:start:4 */
+  render() {
+    if (this.state.hasName) {
+      return <ChatClient name={this.state.name} />;
+    } else {
+      return <Login onHandleSubmitName={(e) => this.handleSubmitName(e)} />;
+    }
+  }
+}
+/* snippet:end */

doc/7/getting-started/.react-native/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "Kuzzle",
+    "slug": "getting-started-kuzzle",
+    "privacy": "public",
+    "sdkVersion": "35.0.0",
+    "platforms": [
+      "ios",
+      "android",
+      "web"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

doc/7/getting-started/.react-native/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

doc/7/getting-started/.react-native/cypress.json

@@ -0,0 +1,15 @@
+{
+    "baseUrl": "http://localhost:19006",
+    "projectId": "ce9wca",
+    "videoUploadOnPasses": false,
+    "viewport": "iphone-6",
+    "defaultCommandTimeout": 5000,
+    "env": {
+      "kuzzle": {
+        "host": "localhost",
+        "port": "7512",
+        "index": "chat",
+        "collection": "messages"
+      }
+    }
+  }

doc/7/getting-started/.react-native/cypress/fixtures/Elrond.json

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

doc/7/getting-started/.react-native/cypress/fixtures/Legolas.json

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

doc/7/getting-started/.react-native/cypress/fixtures/Sam.json

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

doc/7/getting-started/.react-native/cypress/fixtures/Sauron.json

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

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

@@ -0,0 +1,84 @@
+describe('test realtime chat', () => {
+
+  beforeEach(() => {
+    cy.viewport('iphone-6')
+  })
+
+  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="Send message..."]')
+          .should('not.exist');
+
+        cy.get('[placeholder="Username"]')
+          .type(this.fixt.username)
+          .type('{enter}');
+
+        cy.get('[placeholder="Send message..."]')
+          .should('exist');
+        cy.get('[placeholder="Username"]')
+          .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="Username"]')
+          .type(this.fixt.username)
+          .type('{enter}');
+        for (const message of this.fixt.messages) {
+          cy.get(`[data-testid="${message.body.author === this.fixt.username ? 'fromMe' : 'fromOthers'}"]`)
+            .within(() => {
+              cy.contains(message.body.author);
+              cy.contains(message.body.message);
+            });
+        }
+      });
+  });
+
+  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="Username"]')
+          .type(this.fixt.username)
+          .type('{enter}');
+        cy.get('[placeholder="Send message..."]')
+          .type(this.fixt.body.message)
+          .type('{enter}');
+        cy.get('[data-testid="fromMe"]')
+          .within(() => {
+            cy.contains(this.fixt.body.message);
+            cy.contains(this.fixt.body.author);
+          });
+      });
+  });
+
+  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="Username"]')
+          .type(this.fixt.username)
+          .type('{enter}');
+        cy.wait(2000)
+        cy.createMessage(this.fixt.body);
+        cy.get('[data-testid="fromOthers"]')
+          .within(() => {
+            cy.contains(this.fixt.body.message);
+            cy.contains(this.fixt.body.author);
+          });
+      });
+  });
+});

doc/7/getting-started/.react-native/cypress/plugins/index.js

@@ -0,0 +1 @@
+module.exports = (on, config) => {}

doc/7/getting-started/.react-native/cypress/support/commands.js

@@ -0,0 +1,82 @@
+function reinitialisation() {
+  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);
+    });
+}
+
+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.author} / ${body.message}}`);
+      cy.wait(500);
+    });
+});
+
+Cypress.Commands.add('initialisation', () => {
+  const kuzzle = Cypress.env('kuzzle');
+  // check if index exists
+  return cy
+    .request({
+      url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/_exists`,
+      method: 'GET'
+    })
+    .then(existsResponse => {
+      cy.wait(1000)
+      cy.log(`Request : exists ${kuzzle.index} status : ${existsResponse.status}`);
+      // Reset collection if exists
+      if (existsResponse.result) {
+        return cy
+          .request({
+            url: `http://${kuzzle.host}:${kuzzle.port}/${kuzzle.index}/${kuzzle.collection}/_truncate`,
+            method: 'DELETE'
+          })
+      }
+      return;
+    });
+});
+
+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}/${kuzzle.collection}/_refresh`,
+            method: 'POST',
+          })
+      })
+      .then((response) => {
+        cy.log(`refresh status : ${response.status}`);
+        cy.wait(500);
+      });
+  }
+});

doc/7/getting-started/.react-native/cypress/support/index.js

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