Merge plans

README.md

@@ -1,3 +1,14 @@
 # react-streams
 
-![react-streams logo](./logo.svg)
+```bash
+npm i react-streams rxjs
+```
+
+<p align="center">
+
+<img src="https://rawgit.com/johnlindquist/react-streams/master/logo.svg" alt="react-streams logo" width="300px;"/>
+</p>
+
+## Play with Examples at [codesandbox.io](https://codesandbox.io/s/github/johnlindquist/react-streams/tree/master/examples?module=%2Fhello%2Findex.js)
+
+## Docs in Progress 😬

cypress/fixtures/db.js

@@ -0,0 +1,6 @@
+const todos = require("./todos")
+const people = require("./10000people")
+module.exports = () => ({
+  todos,
+  people
+})

cypress/fixtures/todos.json

@@ -0,0 +1,16 @@
+[{
+    "text": "Eat",
+    "done": false,
+    "id": 1
+  },
+  {
+    "text": "Sleep",
+    "done": false,
+    "id": 2
+  },
+  {
+    "text": "Code",
+    "done": false,
+    "id": 3
+  }
+]

cypress/integration/ajax_spec.js

@@ -3,7 +3,8 @@ describe("Ajax", () => {
     cy.command("launch", "ajax")
   })
 
-  it("should load and display the third Todo", () => {
+  it("should load and display the second and third Todo", () => {
+    cy.contains("2. Sleep")
     cy.contains("3. Code")
   })
 })

cypress/integration/context_spec.js

@@ -6,13 +6,13 @@ describe("Context", () => {
     cy.get("#message").should("have.text", "Hello")
   })
 
-  it("should change to 'Bye' when clicking bye", () => {
-    cy.get('[aria-label="show bye message"]').click()
-    cy.get("#message").should("have.text", "Bye")
+  it("should change to 'On' when clicking on", () => {
+    cy.get('[aria-label="change message to on"]').click()
+    cy.get("#message").should("have.text", "On")
   })
 
-  it("should change to the 'Yo' when clicking yo", () => {
-    cy.get('[aria-label="show yo message"]').click()
-    cy.get("#message").should("have.text", "Yo")
+  it("should change to the 'Off' when clicking off", () => {
+    cy.get('[aria-label="change message to off"]').click()
+    cy.get("#message").should("have.text", "Off")
   })
 })

cypress/integration/generic_spec.js

@@ -0,0 +1,14 @@
+describe("generic", () => {
+  it("should stream in 0, 1, 2", () => {
+    cy.clock()
+    cy.visit("http://localhost:4321/generic")
+    cy.contains("Wait...")
+    cy.contains("Wait longer...")
+    cy.tick(500)
+    cy.contains("Hello")
+    cy.tick(2500)
+    cy
+      .get('[style="padding: 2rem;"] > :nth-child(1) > :nth-child(3)')
+      .contains("Hello")
+  })
+})

cypress/integration/mergePlans_spec.js

@@ -0,0 +1,22 @@
+describe("mergePlans", () => {
+  beforeEach(() => {
+    cy.command("launch", "mergePlans")
+    cy.get("input").clear()
+  })
+  it("should have an empty list", () => {
+    cy.get("ul").should("be.empty")
+  })
+
+  it("should still be empty with 1 char", () => {
+    cy.get("input").type("a")
+    cy.get("ul").should("be.empty")
+  })
+
+  it("should receive results with 2 chars then clear after delete", () => {
+    cy.get("input").type("ab")
+    cy.get("ul").should("not.be.empty")
+
+    cy.get("input").type("{backspace}")
+    cy.get("ul").should("be.empty")
+  })
+})

cypress/integration/mergeSources_spec.js

@@ -0,0 +1,54 @@
+describe("Assign", () => {
+  beforeEach(() => {
+    cy.command("launch", "mergeSources")
+    cy.get(".count > button:first").as("countButton")
+    cy.get(".count > h3").as("countText")
+    cy.get(".name > h3").as("nameText")
+    cy.get(".nameAndCount > h3").as("nameAndCountText")
+  })
+
+  it("should start with 5 in both 'count' and 'nameAndCount'", () => {
+    cy.get("@countText").should("have.text", "5 apples")
+    cy.get("@nameAndCountText").should("have.text", "John has 5 apples")
+  })
+
+  it("should have 'John' in both 'name' and 'nameAndCount'", () => {
+    cy.get("@nameText").should("have.text", "John")
+    cy.get("@nameAndCountText").should("have.text", "John has 5 apples")
+  })
+
+  it("should change both 'count' and 'nameAndCount' when clicking buttons", () => {
+    cy.get("@countButton").click()
+    cy.get("@countText").should("have.text", "6 apples")
+    cy.get("@nameAndCountText").should("have.text", "John has 6 apples")
+
+    cy.get(".nameAndCount > button:first").click()
+    cy.get("@countText").should("have.text", "7 apples")
+    cy.get("@nameAndCountText").should("have.text", "John has 7 apples")
+
+    cy.get(".nameAndCount > button:last").click()
+    cy.get("@countText").should("have.text", "6 apples")
+    cy.get("@nameAndCountText").should("have.text", "John has 6 apples")
+
+    cy.get(".count > button:last").click()
+    cy.get("@countText").should("have.text", "5 apples")
+    cy.get("@nameAndCountText").should("have.text", "John has 5 apples")
+  })
+
+  it("should change both 'name' and 'nameAndCount' when entering text", () => {
+    cy
+      .get(".name > input")
+      .clear()
+      .type("Mindy")
+    cy.get("@nameText").should("have.text", "Mindy")
+    cy.get("@nameAndCountText").should("have.text", "Mindy has 5 apples")
+
+    cy
+      .get(".nameAndCount > input")
+      .first()
+      .clear()
+      .type("Ben")
+    cy.get("@nameText").should("have.text", "Ben")
+    cy.get("@nameAndCountText").should("have.text", "Ben has 5 apples")
+  })
+})

cypress/integration/nested_spec.js

@@ -0,0 +1,17 @@
+describe("Ajax", () => {
+  beforeEach(() => {
+    cy.clock()
+    cy.command("launch", "nested")
+  })
+
+  it("should load and display the second and third Todo", () => {
+    cy.tick(1000)
+    cy.contains("0")
+    cy.tick(1000)
+    cy.contains("1")
+    cy.contains("0")
+    cy.tick(1000)
+    cy.contains("2")
+    cy.contains("1")
+  })
+})

cypress/integration/hello_spec.js → cypress/integration/pipe_spec.js

@@ -1,7 +1,6 @@
-describe("Hello, world!", () => {
+describe("Basic", () => {
   it("should display 'Wait...' then 'Hello'", () => {
-    cy.clock()
-    cy.visit("http://localhost:4321/hello")
+    cy.visit("http://localhost:4321/pipe")
     cy.contains("Hello, world!")
   })
 })

cypress/integration/text_spec.js → cypress/integration/plans_spec.js

@@ -1,6 +1,6 @@
 describe("Text", () => {
   beforeEach(() => {
-    cy.visit("http://localhost:4321/text")
+    cy.visit("http://localhost:4321/plans")
   })
 
   it("should start with 'Hello'", () => {

cypress/integration/stepper_spec.js

@@ -0,0 +1,56 @@
+describe("Stepper", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:4321/stepper")
+    cy.get(":nth-child(1) > input").as("min")
+    cy.get(":nth-child(2) > input").as("max")
+    cy.get(":nth-child(3) > input").as("step")
+    cy.get('[aria-label="Increment value"]').as("inc")
+    cy.get('[aria-label="Decrement value"]').as("dec")
+    cy.get('[type="text"]').as("value")
+  })
+
+  it("should increase and decrease by the step amount", () => {
+    cy.get("@value").should("have.value", "10")
+    cy.get("@inc").click()
+    cy.get("@value").should("have.value", "11")
+    cy.get("@dec").click()
+    cy.get("@value").should("have.value", "10")
+
+    cy
+      .get("@step")
+      .clear()
+      .type("2")
+
+    cy.get("@value").should("have.value", "10")
+    cy.get("@inc").click()
+    cy.get("@value").should("have.value", "12")
+    cy.get("@dec").click()
+    cy.get("@value").should("have.value", "10")
+  })
+
+  it("should stop at max and min", () => {
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+    cy.get("@inc").click()
+
+    cy.get("@value").should("have.value", "15")
+
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+    cy.get("@dec").click()
+
+    cy.get("@value").should("have.value", "10")
+  })
+})

cypress/integration/streamProps_spec.js

@@ -0,0 +1,7 @@
+describe("stream", () => {
+  it("should stream in 0, 1, 2", () => {
+    cy.visit("http://localhost:4321/streamProps")
+    cy.contains("Hello, world!")
+    cy.contains("Bonjour, John!")
+  })
+})

cypress/integration/stream_spec.js

@@ -0,0 +1,16 @@
+describe("stream", () => {
+  it("should stream in 0, 1, 2", () => {
+    cy.clock()
+    cy.visit("http://localhost:4321/stream")
+    cy.tick(250)
+    cy.contains("0")
+    cy.tick(250)
+    cy.contains("1")
+    cy.tick(250)
+    cy.contains("2")
+    cy.tick(250)
+    cy.contains("3")
+    cy.tick(250)
+    cy.contains("4")
+  })
+})