FIX(react-example) and add to CI

pubkey · Sep 22, 2020 · 28481c8 · 28481c8
1 parent 75a50d9
commit 28481c8
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 132 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -96,6 +96,9 @@ jobs:
     - stage: examples
       script: npm run build && (cd ./examples/electron-remote && npm install > "/dev/null" 2>&1 && travis_retry npm run test)
       env: LABEL=electron-remote
+    - stage: examples
+      script: npm run build && (cd ./examples/react && npm install > "/dev/null" 2>&1 && npm run lint && npm run build && travis_retry npm run test:build)
+      env: LABEL=react
     - stage: examples
       script: npm run build && (cd ./examples/react-native && npx [email protected] install > "/dev/null" 2>&1 && travis_retry npm run test && echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p && npm run test:bundle)
       env: LABEL=react-native

diff --git a/examples/react/.gitignore b/examples/react/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
 npm-debug.log
 firefox_root/
+build/
+rxdb-local.tgz
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -9,20 +9,27 @@
     "pouchdb-replication": "7.2.2",
     "pouchdb-server": "4.2.0",
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "rxdb": "file:rxdb-local.tgz"
   },
   "devDependencies": {
     "react-scripts": "3.4.3",
-    "rimraf": "3.0.2"
+    "rimraf": "3.0.2",
+    "testcafe": "1.9.3"
   },
   "scripts": {
-    "preinstall": "echo \"PREINSTALL\" && npm install --production --prefix ../../",
+    "preinstall": "npm run preinstall:rxdb && npm run preinstall:versions",
+    "preinstall:rxdb": "(cd ../../ && npx [email protected] pack ../../ --filename ./examples/react/rxdb-local.tgz)",
+    "preinstall:versions": "node ./scripts/ensure-equal-versions.js",
     "dev": "PORT=8888 react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
+    "build:serve": "ws -p 8888 -d build/",
     "eject": "react-scripts eject",
     "start": "concurrently \"npm run server\" \"npm run dev\"",
-    "server": "pouchdb-server --host 0.0.0.0 -p 10102 -m -d /tmp/pouchdb-server/ -n true"
+    "server": "pouchdb-server --host 0.0.0.0 -p 10102 -m -d /tmp/pouchdb-server/ -n true",
+    "test:react": "react-scripts test --env=jsdom",
+    "test": "testcafe chromium test/ --selector-timeout 30000",
+    "test:build": "concurrently \"npm run build:serve\" \"npm run test\" --kill-others --success first"
   },
   "browserslist": {
     "production": [
@@ -36,4 +43,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/examples/react/public/index.html b/examples/react/public/index.html
@@ -17,8 +17,6 @@
     <title>React App</title>
 
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/examples/react/scripts/ensure-equal-versions.js b/examples/react/scripts/ensure-equal-versions.js
@@ -0,0 +1,23 @@
+/**
+ * @preinstall
+ * this script ensures all pouchdb-dependencies
+ *  have the same version as pouchdb ins the root-folder
+ */
+const fs = require('fs');
+const path = require('path');
+const parentPackage = require('../../../package.json');
+const pouchVersion = parentPackage.dependencies['pouchdb-core'];
+const ownPath = path.join(__dirname, '../package.json');
+const ownPackage = require(ownPath);
+console.log('pouchdb version: ' + pouchVersion);
+Object.keys(ownPackage.dependencies)
+    .filter(dep => dep.startsWith('pouchdb-adapter-'))
+    .forEach(dep => {
+        ownPackage.dependencies[dep] = pouchVersion;
+    });
+const newJson = JSON.stringify(ownPackage, null, 2);
+fs.writeFileSync(ownPath, newJson, {
+    encoding: 'utf8',
+    flag: 'w'
+});
+console.log('ensure-equal-version.js: done');
diff --git a/examples/react/src/App.css b/examples/react/src/App.css
@@ -1,86 +1,100 @@
-body, html{
-    margin: 0;
-    padding: 0;
+body,
+html {
+    margin     : 0;
+    padding    : 0;
     font-family: Roboto;
-    background: #ebeff1;
+    background : #ebeff1;
 }
 
-#insert-box, #list-box, h1{
-    width: 86%;
-    padding: 3%;
-    margin-left: auto;
+#insert-box,
+#list-box,
+h1 {
+    width       : 86%;
+    padding     : 3%;
+    margin-left : auto;
     margin-right: auto;
 }
-.box{
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+
+.box {
+    box-shadow   : 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
     margin-bottom: 20px;
-    background: white;
+    background   : white;
 }
+
 #insert-box h3,
 #insert-box input,
-#insert-box button{
+#insert-box button {
     width: 100%;
 }
-.box h3{
+
+.box h3 {
     margin-top: 0;
 }
-input{
-    font-size: 16px;
-    font-weight: lighter;
-    border: 0;
-    border-bottom: 1px solid #999;
-    margin-bottom: 20px;
+
+input {
+    font-size     : 16px;
+    font-weight   : lighter;
+    border        : 0;
+    border-bottom : 1px solid #999;
+    margin-bottom : 20px;
     padding-bottom: 7px;
 }
-input:focus{
+
+input:focus {
     outline: none;
 }
-button{
+
+button {
     background-color: #009688;
-    outline: none;
-    border: none;
-    color: white;
-    font-size: 16px;
-    border-radius: 4px;
-    padding: 1.5%;
-    cursor: pointer;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    outline         : none;
+    border          : none;
+    color           : white;
+    font-size       : 16px;
+    border-radius   : 4px;
+    padding         : 1.5%;
+    cursor          : pointer;
+    box-shadow      : 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
-h1{
-    display: block;
-    font-size: 1.17em;
+
+h1 {
+    display              : block;
+    font-size            : 1.17em;
     -webkit-margin-before: 1em;
-    -webkit-margin-after: 1em;
-    -webkit-margin-start: 0px;
-    -webkit-margin-end: 0px;
-    font-weight: bold;
-    margin: 0 auto;
-    padding: 3%;
-    width: 92%;
+    -webkit-margin-after : 1em;
+    -webkit-margin-start : 0px;
+    -webkit-margin-end   : 0px;
+    font-weight          : bold;
+    margin               : 0 auto;
+    padding              : 3%;
+    width                : 92%;
 }
-h3{
+
+h3 {
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.54);
+    color    : rgba(0, 0, 0, 0.54);
 }
-ul{
+
+ul {
     list-style: none;
-    padding: 0 16px;
-    display: inline-block;
-    position: relative;
+    padding   : 0 16px;
+    display   : inline-block;
+    position  : relative;
 }
-ul#heroes-list li{
-    width: 100%;
-    float: left;
-    margin-top: 6px;
+
+ul#heroes-list li {
+    width        : 100%;
+    float        : left;
+    margin-top   : 6px;
     margin-bottom: 6px;
 }
-.color-box{
-    width: 20px;
-    height: 20px;
-    float: left;
-    margin-right: 11px;
+
+.color-box {
+    width        : 20px;
+    height       : 20px;
+    float        : left;
+    margin-right : 11px;
     border-radius: 2px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: grey;
-}
+    border-width : 1px;
+    border-style : solid;
+    border-color : grey;
+}
diff --git a/examples/react/src/Database.jsx b/examples/react/src/Database.jsx
@@ -1,12 +1,18 @@
-import * as RxDB from '../../../';
+import {
+    createRxDatabase,
+    addRxPlugin
+} from 'rxdb';
+import {
+    heroSchema
+} from './Schema';
 
-RxDB.plugin(require('pouchdb-adapter-idb'));
-RxDB.plugin(require('pouchdb-adapter-http')); //enable syncing over http
+addRxPlugin(require('pouchdb-adapter-idb'));
+addRxPlugin(require('pouchdb-adapter-http')); // enable syncing over http
 
 const collections = [
     {
         name: 'heroes',
-        schema: require('./Schema.js').default,
+        schema: heroSchema,
         methods: {
             hpPercent() {
                 return this.hp / this.maxHP * 100;
@@ -23,7 +29,12 @@ let dbPromise = null;
 
 const _create = async () => {
     console.log('DatabaseService: creating database..');
-    const db = await RxDB.create({name: 'heroesreactdb', adapter: 'idb', password: 'myLongAndStupidPassword'});
+    const db = await createRxDatabase({
+        name: 'heroesreactdb',
+        adapter: 'idb',
+        password: 'myLongAndStupidPassword'
+    }
+    );
     console.log('DatabaseService: created database');
     window['db'] = db; // write to window for debugging
 
@@ -41,7 +52,9 @@ const _create = async () => {
     console.log('DatabaseService: add hooks');
     db.collections.heroes.preInsert(docObj => {
         const { color } = docObj;
-        return db.collections.heroes.findOne({color}).exec().then(has => {
+        return db.collections.heroes.findOne({
+            selector: { color }
+        }).exec().then(has => {
             if (has != null) {
                 alert('another hero already has the color ' + color);
                 throw new Error('color already there');
@@ -63,4 +76,4 @@ export const get = () => {
     if (!dbPromise)
         dbPromise = _create();
     return dbPromise;
-}
+};
diff --git a/examples/react/src/Schema.js b/examples/react/src/Schema.js
@@ -1,18 +1,16 @@
-const heroSchema = {
-    'title': 'hero schema',
-    'description': 'describes a simple hero',
-    'version': 0,
-    'type': 'object',
-    'properties': {
-        'name': {
-            'type': 'string',
-            'primary': true
+export const heroSchema = {
+    title: 'hero schema',
+    description: 'describes a simple hero',
+    version: 0,
+    type: 'object',
+    properties: {
+        name: {
+            type: 'string',
+            primary: true
         },
-        'color': {
-            'type': 'string'
+        color: {
+            type: 'string'
         }
     },
-    'required': ['color']
-};
-
-export default heroSchema;
+    required: ['color']
+};
diff --git a/examples/react/src/hero-insert/hero-insert.jsx b/examples/react/src/hero-insert/hero-insert.jsx
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import * as Database from '../Database';
 
 class HeroInsert extends Component {
@@ -10,25 +10,27 @@ class HeroInsert extends Component {
 
     addHero = async (event) => {
         event.preventDefault()
-        const {name, color} = this.state;
+        const { name, color } = this.state;
         const db = await Database.get();
-        db.heroes.insert({name, color});
-        this.setState({name: '', color: ''});
+
+        const addData = { name, color };
+        await db.heroes.insert(addData);
+        this.setState({ name: '', color: '' });
     }
     handleNameChange = (event) => {
-        this.setState({name: event.target.value});
+        this.setState({ name: event.target.value });
     }
     handleColorChange = (event) => {
-        this.setState({color: event.target.value});
+        this.setState({ color: event.target.value });
     }
 
     render() {
         return (
             <div id="insert-box" className="box">
                 <h3>Add Hero</h3>
                 <form onSubmit={this.addHero}>
-                    <input type="text" placeholder="Name" value={this.state.name} onChange={this.handleNameChange} />
-                    <input type="text" placeholder="Color" value={this.state.color} onChange={this.handleColorChange}/>
+                    <input name="name" type="text" placeholder="Name" value={this.state.name} onChange={this.handleNameChange} />
+                    <input name="color" type="text" placeholder="Color" value={this.state.color} onChange={this.handleColorChange} />
                     <button type="submit">Insert a Hero</button>
                 </form>
             </div>

diff --git a/examples/react/src/hero-list/hero-list.css b/examples/react/src/hero-list/hero-list.css
@@ -1,6 +1,11 @@
-.actions{
-  float: right;
+#heroes-list {
+  width: 100%;
 }
-i{
-  cursor:pointer;
+
+.actions {
+  float: right;
 }
+
+i {
+  cursor: pointer;
+}