💚 : test, a lot of test

Author: NOPROD

README.md

@@ -278,6 +278,14 @@ See `/examples` for some simple examples.
 
 ---
 
+## Test
+
+Test look goods, feel free to open an issue !
+
+![](https://i.ibb.co/17mtk34/testsPNG.png)
+
+---
+
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nopr3d/rx-vue-next",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "RxJs for Vue 3",
   "author": "Boucham Amine",
   "license": "MIT",

test/test.js

@@ -5,11 +5,20 @@
 const { mount, config } = require("@vue/test-utils");
 const VueNextRx = require("../dist/rx-vue-next.js");
 const { Observable } = require("rxjs");
-const { startWith } = require("rxjs/operators");
+const {
+  startWith,
+  map,
+  tap,
+  scan,
+  merge,
+  filter,
+  pluck,
+} = require("rxjs/operators");
 
 config.global.plugins.push(VueNextRx);
 
 const defaultTemplate = "<div id='test'>Hello world</div>";
+const varTemplate = (val) => `<div id='test'>{{${val}}}</div>`;
 
 function mock() {
   let observer;
@@ -22,7 +31,17 @@ function mock() {
   };
 }
 
-test("Subscriptions Basic", () => {
+function trigger(target, event) {
+  var e = document.createEvent("HTMLEvents");
+  e.initEvent(event, true, true);
+  target.dispatchEvent(e);
+}
+
+function click(target) {
+  trigger(target, "click");
+}
+
+test("Expose observable", () => {
   const { ob, next } = mock();
   const component = {
     template: defaultTemplate,
@@ -44,3 +63,265 @@ test("Subscriptions Basic", () => {
   // Assert the rendered text of the component
   expect(wrapper.text()).toContain("Hello world");
 });
+
+test("Bind subscriptions to render", (done) => {
+  const { ob, next } = mock();
+  const component = {
+    template: varTemplate("hello"),
+    subscriptions() {
+      return { hello: ob.pipe(startWith("foo")) };
+    },
+  };
+  const wrapper = mount(component);
+
+  expect(wrapper.text()).toBe("foo");
+
+  next("bar");
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.text()).toBe("bar");
+  });
+  done();
+});
+
+test("subscriptions() has access to component inject", () => {
+  const { ob } = mock();
+
+  const component = {
+    template: varTemplate("hello"),
+    data() {
+      return { foo: "FOO" };
+    },
+    inject: { bar: { default: "BAR" } },
+    subscriptions() {
+      return {
+        hello: ob.pipe(startWith(this.foo + this.bar)),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  expect(wrapper.text()).toBe("FOOBAR");
+});
+
+test("subscriptions() can throw error properly", (done) => {
+  const { ob, next } = mock();
+  let thrownError;
+
+  const component = {
+    template: varTemplate("num"),
+    subscriptions() {
+      return {
+        num: ob.pipe(
+          startWith(1),
+          map((n) => n.toFixed()),
+          tap({
+            error(err) {
+              thrownError = err;
+            },
+          })
+        ),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  wrapper.componentVM.$nextTick(() => {
+    next(null);
+
+    wrapper.componentVM.$nextTick(() => {
+      expect(thrownError).toBeDefined();
+      expect(wrapper.text()).toBe("1");
+      done();
+    });
+  });
+});
+
+test("v-stream directive (basic)", (done) => {
+  const component = {
+    template: `
+      <div>
+        <span class="count">{{ count }}</span>
+        <button v-stream:click="click$">+</button>
+      </div>
+    `,
+    domStreams: ["click$"],
+    subscriptions() {
+      return {
+        count: this.click$.pipe(
+          map(() => 1),
+          startWith(0),
+          scan((total, change) => total + change)
+        ),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  expect(wrapper.element.querySelector("span").textContent).toBe("0");
+  click(wrapper.element.querySelector("button"));
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.element.querySelector("span").textContent).toBe("1");
+    done();
+  });
+});
+
+test("v-stream directive (with .native modify)", (done) => {
+  const component = {
+    template: `
+      <div>
+        <span class="count">{{ count }}</span>
+        <my-button id="btn-native" v-stream:click.native="clickNative$">+</my-button>
+        <my-button id="btn" v-stream:click="click$">-</my-button>
+      </div>
+    `,
+    components: {
+      myButton: {
+        template: "<button>MyButton</button>",
+      },
+    },
+    domStreams: ["clickNative$", "click$"],
+    subscriptions() {
+      return {
+        count: this.clickNative$.pipe(
+          merge(this.click$),
+          filter((e) => e.event.target && e.event.target.id === "btn-native"),
+          map(() => 1),
+          startWith(0),
+          scan((total, change) => total + change)
+        ),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  expect(wrapper.element.querySelector("span").textContent).toBe("0");
+  click(wrapper.element.querySelector("#btn"));
+  click(wrapper.element.querySelector("#btn"));
+  click(wrapper.element.querySelector("#btn-native"));
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.element.querySelector("span").textContent).toBe("1");
+    done();
+  });
+});
+
+test("v-stream directive (with .stop, .prevent modify)", (done) => {
+  const component = {
+    template: `
+      <form>
+        <span>{{stoped}} {{prevented}}</span>
+        <button id="btn-stop" v-stream:click.stop="clickStop$">Stop</button>
+        <button id="btn-prevent" type="submit" v-stream:click.prevent="clickPrevent$">Submit</button>
+      </form>
+    `,
+    domStreams: ["clickStop$", "clickPrevent$"],
+    subscriptions() {
+      return {
+        stoped: this.clickStop$.pipe(map((x) => x.event.cancelBubble)),
+        prevented: this.clickPrevent$.pipe(
+          map((x) => x.event.defaultPrevented)
+        ),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  click(wrapper.element.querySelector("#btn-stop"));
+  click(wrapper.element.querySelector("#btn-prevent"));
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.element.querySelector("span").textContent).toBe("true true");
+    done();
+  });
+});
+
+test("v-stream directive (multiple bindings on same node)", (done) => {
+  const component = {
+    template: `
+      <div>
+        <span class="count">{{ count }}</span>
+        <button
+          v-stream:click="{ subject: plus$, data: 1 }"
+          v-stream:keyup="{ subject: plus$, data: -1 }">+</button>
+      </div>
+    `,
+    domStreams: ["plus$"],
+    subscriptions() {
+      return {
+        count: this.plus$.pipe(
+          pluck("data"),
+          startWith(0),
+          scan((total, change) => total + change)
+        ),
+      };
+    },
+  };
+
+  const wrapper = mount(component);
+
+  expect(wrapper.element.querySelector("span").textContent).toBe("0");
+  click(wrapper.element.querySelector("button"));
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.element.querySelector("span").textContent).toBe("1");
+    trigger(wrapper.element.querySelector("button"), "keyup");
+    wrapper.componentVM.$nextTick(() => {
+      expect(wrapper.element.querySelector("span").textContent).toBe("0");
+      done();
+    });
+  });
+});
+
+test("$fromDOMEvent()", (done) => {
+  const component = {
+    template: `
+      <div>
+        <span class="count">{{ count }}</span>
+        <button>+</button>
+      </div>
+    `,
+    subscriptions() {
+      const click$ = this.$fromDOMEvent("button", "click");
+      return {
+        count: click$.pipe(
+          map(() => 1),
+          startWith(0),
+          scan((total, change) => total + change)
+        ),
+      };
+    },
+  };
+  const wrapper = mount(component);
+
+  document.body.appendChild(wrapper.element);
+  expect(wrapper.element.querySelector("span").textContent).toBe("0");
+  click(wrapper.element.querySelector("button"));
+  wrapper.componentVM.$nextTick(() => {
+    expect(wrapper.element.querySelector("span").textContent).toBe("1");
+    done();
+  });
+});
+
+test("$subscribeTo()", () => {
+  const { ob, next } = mock();
+  const results = [];
+  const component = {
+    template: defaultTemplate,
+    created() {
+      this.$subscribeTo(ob, (count) => {
+        results.push(count);
+      });
+    },
+  };
+
+  const wrapper = mount(component);
+
+  next(1);
+  expect(results).toEqual([1]);
+
+  wrapper.unmount();
+  next(2);
+  expect(results).toEqual([1]); // should not trigger anymore
+});