This repository has been archived by the owner on Dec 31, 2020. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add support of es6 and refactor tests
- Loading branch information
Showing
13 changed files
with
1,465 additions
and
1,712 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -8,4 +8,6 @@ custom.d.ts | |
| index.js | ||
| index.d.ts | ||
| index.min.js | ||
| .vscode | ||
| .vscode | ||
| .idea | ||
| test/browser/test_bundle.js | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Tape</title> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| </head> | ||
| <body> | ||
| <script src="./test_bundle.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,199 +1,146 @@ | ||
| var React = require('react'); | ||
| var enzyme = require('enzyme'); | ||
| var mount = enzyme.mount; | ||
| var mobx = require('mobx'); | ||
| var observer = require('../').observer; | ||
| var inject = require('../').inject; | ||
| var Provider = require('../').Provider; | ||
| var test = require('tape'); | ||
| var e = React.createElement; | ||
| import { createClass, createElement } from 'react' | ||
| import { mount } from 'enzyme' | ||
| import test from 'tape' | ||
| import mobx from 'mobx' | ||
| import { observer, inject, Provider } from '../' | ||
|
|
||
| test('observer based context', t => { | ||
| test('using observer to inject throws warning', t => { | ||
| // This test is here because it is the first test file being run, and mobx-react warns only once | ||
| const w = console.warn | ||
| const warns = [] | ||
| console.warn = msg => warns.push(msg) | ||
|
|
||
| observer(["test"], React.createClass({ | ||
| render: () => null | ||
| })) | ||
|
|
||
| t.equal(warns.length, 1) | ||
| t.equal(warns[0], 'Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`') | ||
|
|
||
| console.warn = w | ||
| t.end() | ||
| }) | ||
|
|
||
| test('basic context', t => { | ||
| var C = observer(["foo"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo); | ||
| } | ||
| })); | ||
|
|
||
| var B = React.createClass({ | ||
| render: function() { | ||
| return e(C, {}); | ||
| } | ||
| }); | ||
|
|
||
| var A = React.createClass({ | ||
| render: function() { | ||
| return e(Provider, { foo: "bar" }, e(B, {})) | ||
| } | ||
| }) | ||
|
|
||
| const wrapper = mount(e(A)); | ||
| t.equal(wrapper.find("div").text(), "context:bar"); | ||
| t.end(); | ||
| }) | ||
|
|
||
| test('props override context', t => { | ||
| var C = observer(["foo"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo); | ||
| } | ||
| })); | ||
|
|
||
| var B = React.createClass({ | ||
| render: function() { | ||
| return e(C, { foo: 42 }); | ||
| } | ||
| }); | ||
|
|
||
| var A = React.createClass({ | ||
| render: function() { | ||
| return e(Provider, { foo: "bar" }, e(B, {})) | ||
| } | ||
| }) | ||
|
|
||
| const wrapper = mount(e(A)); | ||
| t.equal(wrapper.find("div").text(), "context:42"); | ||
| t.end(); | ||
| }) | ||
|
|
||
|
|
||
| test('overriding stores is supported', t => { | ||
| var C = observer(["foo", "bar"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo + this.props.bar); | ||
| } | ||
| })); | ||
|
|
||
| var B = React.createClass({ | ||
| render: function() { | ||
| return e(C, {}); | ||
| } | ||
| }); | ||
|
|
||
| var A = React.createClass({ | ||
| render: function() { | ||
| return e(Provider, { foo: "bar", bar: 1337 }, | ||
| e("div", {}, | ||
| e("span", {}, | ||
| e(B, {}) | ||
| ), | ||
| e("section", {}, | ||
| e(Provider, { foo: 42}, e(B, {})) | ||
| ) | ||
| ) | ||
| ); | ||
| } | ||
| }) | ||
|
|
||
| const wrapper = mount(e(A)); | ||
| t.equal(wrapper.find("span").text(), "context:bar1337"); | ||
| t.equal(wrapper.find("section").text(), "context:421337"); | ||
| t.end(); | ||
| }) | ||
|
|
||
| test('store should be available', t => { | ||
| var C = observer(["foo"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo); | ||
| } | ||
| })); | ||
|
|
||
| var B = React.createClass({ | ||
| render: function() { | ||
| return e(C, {}); | ||
| } | ||
| }); | ||
|
|
||
| var A = React.createClass({ | ||
| render: function() { | ||
| return e(Provider, { baz: 42 }, e(B, {})); | ||
| } | ||
| }) | ||
|
|
||
| t.throws(() => mount(e(A)), /Store 'foo' is not available! Make sure it is provided by some Provider/); | ||
| t.end(); | ||
| }) | ||
|
|
||
| test('store is not required if prop is available', t => { | ||
| var C = observer(["foo"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo); | ||
| } | ||
| })); | ||
|
|
||
| var B = React.createClass({ | ||
| render: function() { | ||
| return e(C, { foo: "bar" }); | ||
| } | ||
| }); | ||
|
|
||
| const wrapper = mount(e(B)); | ||
| t.equal(wrapper.find("div").text(), "context:bar"); | ||
| t.end(); | ||
| }) | ||
|
|
||
| test('warning is printed when changing stores', t => { | ||
| var msg; | ||
| var baseWarn = console.warn; | ||
| console.warn = (m) => msg = m; | ||
|
|
||
| var a = mobx.observable(3); | ||
|
|
||
| var C = observer(["foo"], React.createClass({ | ||
| render: function() { | ||
| return e("div", {}, "context:" + this.props.foo); | ||
| } | ||
| })); | ||
|
|
||
| var B = observer(React.createClass({ | ||
| render: function() { | ||
| return e(C, {}); | ||
| } | ||
| })); | ||
|
|
||
| var A = observer(React.createClass({ | ||
| render: function() { | ||
| return e("section", {}, | ||
| e("span", {}, a.get()), | ||
| e(Provider, { foo: a.get() }, e(B, {})) | ||
| ); | ||
| } | ||
| })) | ||
|
|
||
| const wrapper = mount(e(A)); | ||
| t.equal(wrapper.find("span").text(), "3"); | ||
| t.equal(wrapper.find("div").text(), "context:3"); | ||
|
|
||
| a.set(42); | ||
|
|
||
| t.equal(wrapper.find("span").text(), "42"); | ||
| t.equal(wrapper.find("div").text(), "context:3"); | ||
|
|
||
| t.equal(msg, "MobX Provider: Provided store \'foo\' has changed. Please avoid replacing stores as the change might not propagate to all children"); | ||
|
|
||
| console.warn = baseWarn; | ||
| t.end(); | ||
| }) | ||
| test('using observer to inject throws warning', t => { | ||
| const w = console.warn | ||
| const warns = [] | ||
| console.warn = msg => warns.push(msg) | ||
|
|
||
| observer(['test'], createClass({ | ||
| render: () => null | ||
| })) | ||
|
|
||
| t.equal(warns.length, 1) | ||
| t.equal(warns[0], 'Mobx observer: Using observer to inject stores is deprecated since 4.0. Use `@inject("store1", "store2") @observer ComponentClass` or `inject("store1", "store2")(observer(componentClass))` instead of `@observer(["store1", "store2"]) ComponentClass`') | ||
|
|
||
| console.warn = w | ||
| t.end() | ||
| }) | ||
| }) | ||
|
|
||
| test('basic context', t => { | ||
| const C = observer(['foo'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo); | ||
| } | ||
| })); | ||
| const B = createClass({ | ||
| render:() => createElement(C, {}) | ||
| }); | ||
| const A = createClass({ | ||
| render: () => createElement(Provider, { foo: 'bar' }, createElement(B, {})) | ||
| }); | ||
| const wrapper = mount(createElement(A)); | ||
| t.equal(wrapper.find('div').text(), 'context:bar'); | ||
| t.end(); | ||
| }); | ||
|
|
||
| test('props override context', t => { | ||
| const C = observer(['foo'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo); | ||
| } | ||
| })); | ||
| const B = createClass({ | ||
| render: () => createElement(C, { foo: 42 }) | ||
| }); | ||
| const A = createClass({ | ||
| render: () => createElement(Provider, { foo: 'bar' }, createElement(B, {})) | ||
| }); | ||
| const wrapper = mount(createElement(A)); | ||
| t.equal(wrapper.find('div').text(), 'context:42'); | ||
| t.end(); | ||
| }); | ||
|
|
||
| test('overriding stores is supported', t => { | ||
| const C = observer(['foo', 'bar'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo + this.props.bar); | ||
| } | ||
| })); | ||
| const B = createClass({ | ||
| render: () => createElement(C, {}) | ||
| }); | ||
| const A = createClass({ | ||
| render: () => createElement(Provider, { foo: 'bar', bar: 1337 }, | ||
| createElement('div', {}, | ||
| createElement('span', {}, | ||
| createElement(B, {}) | ||
| ), | ||
| createElement('section', {}, | ||
| createElement(Provider, { foo: 42}, createElement(B, {})) | ||
| ) | ||
| ) | ||
| ) | ||
| }); | ||
| const wrapper = mount(createElement(A)); | ||
| t.equal(wrapper.find('span').text(), 'context:bar1337'); | ||
| t.equal(wrapper.find('section').text(), 'context:421337'); | ||
| t.end(); | ||
| }); | ||
|
|
||
| test('store should be available', t => { | ||
| const C = observer(['foo'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo); | ||
| } | ||
| })); | ||
| const B = createClass({ | ||
| render: () => createElement(C, {}) | ||
| }); | ||
| const A = createClass({ | ||
| render: () => createElement(Provider, { baz: 42 }, createElement(B, {})) | ||
| }); | ||
| t.throws(() => mount(createElement(A)), /Store 'foo' is not available! Make sure it is provided by some Provider/); | ||
| t.end(); | ||
| }); | ||
|
|
||
| test('store is not required if prop is available', t => { | ||
| const C = observer(['foo'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo) | ||
| } | ||
| })); | ||
| const B = createClass({ | ||
| render: () => createElement(C, { foo: 'bar' }) | ||
| }); | ||
| const wrapper = mount(createElement(B)); | ||
| t.equal(wrapper.find('div').text(), 'context:bar'); | ||
| t.end(); | ||
| }); | ||
|
|
||
| test('warning is printed when changing stores', t => { | ||
| let msg = null; | ||
| const baseWarn = console.warn; | ||
| console.warn = m => msg = m; | ||
| const a = mobx.observable(3); | ||
| const C = observer(['foo'], createClass({ | ||
| render() { | ||
| return createElement('div', {}, 'context:' + this.props.foo); | ||
| } | ||
| })); | ||
| const B = observer(createClass({ | ||
| render: () => createElement(C, {}) | ||
| })); | ||
| const A = observer(createClass({ | ||
| render: () => createElement('section', {}, | ||
| createElement('span', {}, a.get()), | ||
| createElement(Provider, { foo: a.get() }, createElement(B, {})) | ||
| ) | ||
| })); | ||
| const wrapper = mount(createElement(A)); | ||
| t.equal(wrapper.find('span').text(), '3'); | ||
| t.equal(wrapper.find('div').text(), 'context:3'); | ||
| a.set(42); | ||
| t.equal(wrapper.find('span').text(), '42'); | ||
| t.equal(wrapper.find('div').text(), 'context:3'); | ||
| t.equal(msg, 'MobX Provider: Provided store \'foo\' has changed. Please avoid replacing stores as the change might not propagate to all children'); | ||
| console.warn = baseWarn; | ||
| t.end(); | ||
| }); | ||
|
|
||
| t.end(); | ||
| }); |
Oops, something went wrong.