Merge 29c76c6 into 69c0014

.gitignore

@@ -8,3 +8,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+cypress/videos

.travis.yml

@@ -1,6 +1,17 @@
 language: node_js
 node_js:
-  - "8"
+- '10'
+cache:
+  directories:
+  - "~/.npm"
+  - "~/.cache"
+install:
+- npm ci
 script:
-  - npm test
-after_success: 'npm run test:coveralls'
+- npm test
+- npm run test:e2e
+after_success: npm run test:coveralls
+env:
+  matrix:
+    # CYPRESS_RECORD_KEY
+    secure: smwk4eAp5BRa5YqfPgHpW4ED3juyu3KlLtnxJ7a+I1p8Z0GMtT9bxmMrnm5OiW4YZqwSxQ+uVKgoPUBWWmoqTFOqk0pIVWM8nM66usW53MBTuaSCb5L5LmqdTELZYPPWmHLarnssoWkafVDZrqHWp1tjEvWe91iK7ey35Fns/xvdrYAcEs780uzv1ta0mjTuyLNm3+h/juvOyqm8xJss3reFYPKg/s/QBAwygF6lmXK7BxgW9SetF+4kZVez6+LuLsyP1yMcGBqle6kz5uCxRrBhqpc3xfUDcoxR9OPNw/iS84/+a3d9p/IG8KG/VJLIXXoY9hh0BZcmsj4Ie4yy0DITwGlfKR8cn/inewil6ZJzFOsSRWvSjKohagTxkayZlA0WxnFxLLwT6uZrICpEoQnCSR9XyaJR2dPuyKxLtLdtyNwFxhfCgcZtCQncQpdC1/O6tXHPOJpQuw2uqq3LPB5GGVsPzkoRb0xOOEXKuGsbqe45uSwB2hMOgaw1IWqBdSQ3fXnEpdj5uMFqhLtVeGppthJusZYFpTBFmowMxv1mTGGGEkzjzQtC4DY4IBVfQQSK+0FzznMHzXdQMbxUeb9jL5S0oKhyywaGV869QaF+0cTpwJMNEr1gmNJd+c1f6uPb70xTtt+5oObH4AcrLIjE7DJt5CVZLI37Fv1qDv8=

cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:8082",
+  "projectId": "dmnv1v"
+}

cypress/integration/examples/ts.spec.ts

@@ -0,0 +1,92 @@
+/// <reference types="cypress" />
+/// <reference types="chai" />
+
+describe('TypeScript', () => {
+  it('works', () => {
+    cy.visit('/');
+    cy.get('h1').should('contain', 'react-with-observable — examples');
+  });
+
+  it('should display hello, world', () => {
+    cy.visit('/');
+    cy.get('#example-1').contains('Hello, world!');
+  });
+
+  it('should display new number every second', () => {
+    cy.visit('/');
+    cy.get('#example-2').contains('1');
+    cy.wait(1000);
+    cy.get('#example-2').contains('2');
+    cy.wait(1000);
+    cy.get('#example-2').contains('3');
+  });
+
+  it('should have input with a new value every second', () => {
+    cy.visit('/');
+    cy.get('#example-3 input').should('have.value', '0');
+    cy.wait(1000);
+    cy.get('#example-3 input').should('have.value', '10');
+    cy.wait(1000);
+    cy.get('#example-3 input').should('have.value', '30');
+    cy.wait(1000);
+    cy.get('#example-3 input').should('have.value', '60');
+  });
+
+  it('should fetch and display contacts', () => {
+    let totalContacts = 0;
+
+    cy.server();
+    cy.route({
+      url: 'api/**',
+      method: 'GET',
+    }).as('getContacts');
+
+    function countContacts(xhr: Cypress.WaitXHR): number {
+      const pattern = /\/\?results=(\d+)/;
+      const res = xhr.url.match(pattern);
+
+      const usersCount = Number(res && res[1]);
+      return usersCount;
+    }
+
+    function assertContacts(xhr: Cypress.WaitXHR) {
+      const usersCount = countContacts(xhr);
+      totalContacts += usersCount;
+
+      expect(usersCount)
+        .to.be.at.least(3)
+        .and.at.most(5);
+
+      cy.get('.current-contacts ul li').should('have.length', usersCount);
+      cy.get('.all-contacts ul li').should('have.length', totalContacts);
+    }
+
+    cy.visit('/');
+
+    cy.get('.current-contacts').contains('Loading…');
+    cy.get('.all-contacts').contains('Loading…');
+
+    cy.wait(1000);
+    // setTimeout
+    cy.get('.current-contacts').contains('No contacts.');
+    cy.get('.all-contacts').contains('No contacts.');
+
+    // trigger first fetch
+    cy.get('#example-contacts button').click({ force: true });
+    cy.get('.current-contacts').contains('Loading…');
+    cy.get('.all-contacts').contains('No contacts.');
+
+    cy.wait('@getContacts').then(xhr => {
+      assertContacts(xhr);
+
+      // trigger second fetch
+      cy.get('#example-contacts button').click({ force: true });
+      cy.get('.current-contacts').contains('Loading…');
+      cy.get('.all-contacts ul li').should('have.length', totalContacts);
+
+      cy.wait('@getContacts').then(xhr => {
+        assertContacts(xhr);
+      });
+    });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,27 @@
+// ***********************************************************
+// 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)
+const webpack = require('@cypress/webpack-preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  const options = {
+    // send in the options from your webpack.config.js, so it works the same
+    // as your app's code
+    webpackOptions: require('../../examples/webpack.config'),
+    watchOptions: {},
+  };
+
+  on('file:preprocessor', webpack(options));
+};

examples/contactsList.tsx

@@ -40,7 +40,9 @@ recentContacts$ = myContacts$.pipe(startWith(null as Contact[] | null));
 `.trim()}
           </code>
         </pre>
-        <Subscribe>{this.recentContacts$.pipe(map(this.renderList))}</Subscribe>
+        <div className="current-contacts">
+          <Subscribe>{this.recentContacts$.pipe(map(this.renderList))}</Subscribe>
+        </div>
 
         <h4>All contacts</h4>
         <pre className="language-jsx">
@@ -55,18 +57,20 @@ allContacts$ = myContacts$.pipe(
 `.trim()}
           </code>
         </pre>
-        <Subscribe>{this.allContacts$.pipe(map(this.renderList))}</Subscribe>
+        <div className="all-contacts">
+          <Subscribe>{this.allContacts$.pipe(map(this.renderList))}</Subscribe>
+        </div>
       </div>
     );
   }
 
   renderList = (contacts: Contact[] | null) => {
     if (!contacts) {
-      return 'Loading…';
+      return <span className="loading">Loading…</span>;
     }
 
     if (!contacts.length) {
-      return 'No contacts.';
+      return <span className="no-contacts">No contacts.</span>;
     }
 
     return (

examples/index.html

@@ -50,15 +50,13 @@
       list-style-type: none;
     }
 
-    li:before {
-      content: "👉";
+    li::before {
+      content: "👉 ";
     }
   </style>
 </head>
 
 <body>
-  <!-- <div id="root"></div> -->
-
   <div class="examples-container">
     <h1>
       <code>react-with-observable</code> — examples

examples/webpack.config.js

@@ -10,11 +10,12 @@ module.exports = {
   },
   devServer: {
     contentBase: path.resolve(__dirname),
+    port: 8082
   },
   module: {
     rules: [
       {
-        test: /\.tsx$/,
+        test: /\.tsx?$/,
         exclude: /(node_modules)/,
         use: [
           {