aboutsummaryrefslogtreecommitdiff
path: root/thirdparty/preact/test/browser/devtools.js
diff options
context:
space:
mode:
Diffstat (limited to 'thirdparty/preact/test/browser/devtools.js')
-rw-r--r--thirdparty/preact/test/browser/devtools.js234
1 files changed, 0 insertions, 234 deletions
diff --git a/thirdparty/preact/test/browser/devtools.js b/thirdparty/preact/test/browser/devtools.js
deleted file mode 100644
index 12c0e3369..000000000
--- a/thirdparty/preact/test/browser/devtools.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { h, Component, render } from '../../src/preact';
-import { initDevTools } from '../../devtools/devtools';
-import { unmountComponent } from '../../src/vdom/component';
-
-class StatefulComponent extends Component {
- constructor(props) {
- super(props);
-
- this.state = {count: 0};
- }
-
- render() {
- return h('span', {}, String(this.state.count));
- }
-}
-
-function FunctionalComponent() {
- return h('span', {class: 'functional'}, 'Functional');
-}
-
-function Label({label}) {
- return label;
-}
-
-class MultiChild extends Component {
- constructor(props) {
- super(props);
- this.state = {count: props.initialCount};
- }
-
- render() {
- return h('div', {}, Array(this.state.count).fill('child'));
- }
-}
-
-let describe_ = describe;
-if (!('name' in Function.prototype)) {
- // Skip these tests under Internet Explorer
- describe_ = describe.skip;
-}
-
-describe_('React Developer Tools integration', () => {
- let cleanup;
- let container;
- let renderer;
-
- // Maps of DOM node to React*Component-like objects.
- // For composite components, there will be two instances for each node, one
- // for the composite component (instanceMap) and one for the root child DOM
- // component rendered by that component (domInstanceMap)
- let instanceMap = new Map();
- let domInstanceMap = new Map();
-
- beforeEach(() => {
- container = document.createElement('div');
- document.body.appendChild(container);
-
- const onMount = instance => {
- if (instance._renderedChildren) {
- domInstanceMap.set(instance.node, instance);
- } else {
- instanceMap.set(instance.node, instance);
- }
- };
-
- const onUnmount = instance => {
- instanceMap.delete(instance.node);
- domInstanceMap.delete(instance.node);
- };
-
- global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
- inject: sinon.spy(_renderer => {
- renderer = _renderer;
- renderer.Mount._renderNewRootComponent = sinon.stub();
- renderer.Reconciler.mountComponent = sinon.spy(onMount);
- renderer.Reconciler.unmountComponent = sinon.spy(onUnmount);
- renderer.Reconciler.receiveComponent = sinon.stub();
- })
- };
- cleanup = initDevTools();
- });
-
- afterEach(() => {
- container.remove();
- cleanup();
- });
-
- it('registers preact as a renderer with the React DevTools hook', () => {
- expect(global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject).to.be.called;
- });
-
- // Basic component addition/update/removal tests
- it('notifies dev tools about new components', () => {
- render(h(StatefulComponent), container);
- expect(renderer.Reconciler.mountComponent).to.be.called;
- });
-
- it('notifies dev tools about component updates', () => {
- const node = render(h(StatefulComponent), container);
- node._component.forceUpdate();
- expect(renderer.Reconciler.receiveComponent).to.be.called;
- });
-
- it('notifies dev tools when components are removed', () => {
- const node = render(h(StatefulComponent), container);
- unmountComponent(node._component, true);
- expect(renderer.Reconciler.unmountComponent).to.be.called;
- });
-
- // Test properties of DOM components exposed to devtools via
- // ReactDOMComponent-like instances
- it('exposes the tag name of DOM components', () => {
- const node = render(h(StatefulComponent), container);
- const domInstance = domInstanceMap.get(node);
- expect(domInstance._currentElement.type).to.equal('span');
- });
-
- it('exposes DOM component props', () => {
- const node = render(h(FunctionalComponent), container);
- const domInstance = domInstanceMap.get(node);
- expect(domInstance._currentElement.props.class).to.equal('functional');
- });
-
- it('exposes text component contents', () => {
- const node = render(h(Label, {label: 'Text content'}), container);
- const textInstance = domInstanceMap.get(node);
- expect(textInstance._stringText).to.equal('Text content');
- });
-
- // Test properties of composite components exposed to devtools via
- // ReactCompositeComponent-like instances
- it('exposes the name of composite component classes', () => {
- const node = render(h(StatefulComponent), container);
- expect(instanceMap.get(node).getName()).to.equal('StatefulComponent');
- });
-
- it('exposes composite component props', () => {
- const node = render(h(Label, {label: 'Text content'}), container);
- const instance = instanceMap.get(node);
- expect(instance._currentElement.props.label).to.equal('Text content');
- });
-
- it('exposes composite component state', () => {
- const node = render(h(StatefulComponent), container);
-
- node._component.setState({count: 42});
- node._component.forceUpdate();
-
- expect(instanceMap.get(node).state).to.deep.equal({count: 42});
- });
-
- // Test setting state via devtools
- it('updates component when setting state from devtools', () => {
- const node = render(h(StatefulComponent), container);
-
- instanceMap.get(node).setState({count: 10});
- instanceMap.get(node).forceUpdate();
-
- expect(node.textContent).to.equal('10');
- });
-
- // Test that the original instance is exposed via `_instance` so it can
- // be accessed conveniently via `$r` in devtools
-
- // Functional component handling tests
- it('wraps functional components with stateful ones', () => {
- const vnode = h(FunctionalComponent);
- expect(vnode.nodeName.prototype).to.have.property('render');
- });
-
- it('exposes the name of functional components', () => {
- const node = render(h(FunctionalComponent), container);
- const instance = instanceMap.get(node);
- expect(instance.getName()).to.equal('FunctionalComponent');
- });
-
- it('exposes a fallback name if the component has no useful name', () => {
- const node = render(h(() => h('div')), container);
- const instance = instanceMap.get(node);
- expect(instance.getName()).to.equal('(Function.name missing)');
- });
-
- // Test handling of DOM children
- it('notifies dev tools about DOM children', () => {
- const node = render(h(StatefulComponent), container);
- const domInstance = domInstanceMap.get(node);
- expect(renderer.Reconciler.mountComponent).to.have.been.calledWith(domInstance);
- });
-
- it('notifies dev tools when a component update adds DOM children', () => {
- const node = render(h(MultiChild, {initialCount: 2}), container);
-
- node._component.setState({count: 4});
- node._component.forceUpdate();
-
- expect(renderer.Reconciler.mountComponent).to.have.been.called.twice;
- });
-
- it('notifies dev tools when a component update modifies DOM children', () => {
- const node = render(h(StatefulComponent), container);
-
- instanceMap.get(node).setState({count: 10});
- instanceMap.get(node).forceUpdate();
-
- const textInstance = domInstanceMap.get(node.childNodes[0]);
- expect(textInstance._stringText).to.equal('10');
- });
-
- it('notifies dev tools when a component update removes DOM children', () => {
- const node = render(h(MultiChild, {initialCount: 1}), container);
-
- node._component.setState({count: 0});
- node._component.forceUpdate();
-
- expect(renderer.Reconciler.unmountComponent).to.be.called;
- });
-
- // Root component info
- it('exposes root components on the _instancesByReactRootID map', () => {
- render(h(StatefulComponent), container);
- expect(Object.keys(renderer.Mount._instancesByReactRootID).length).to.equal(1);
- });
-
- it('notifies dev tools when new root components are mounted', () => {
- render(h(StatefulComponent), container);
- expect(renderer.Mount._renderNewRootComponent).to.be.called;
- });
-
- it('removes root components when they are unmounted', () => {
- const node = render(h(StatefulComponent), container);
- unmountComponent(node._component, true);
- expect(Object.keys(renderer.Mount._instancesByReactRootID).length).to.equal(0);
- });
-});