From 5459959408d863c919b7b8dbdd7a66e5b03f5ac3 Mon Sep 17 00:00:00 2001 From: Tom Jacques Date: Wed, 30 Dec 2015 22:40:14 -0500 Subject: [PATCH] Mostly eslint fixes. Also using the compareInnerHTML helper in some places --- .../acceptance/no-jsx/dom-components-tests.js | 1600 ++++++++--------- 1 file changed, 782 insertions(+), 818 deletions(-) diff --git a/test/browser/acceptance/no-jsx/dom-components-tests.js b/test/browser/acceptance/no-jsx/dom-components-tests.js index 53d074948..bb4b4ff67 100644 --- a/test/browser/acceptance/no-jsx/dom-components-tests.js +++ b/test/browser/acceptance/no-jsx/dom-components-tests.js @@ -1,48 +1,49 @@ import Inferno from '../../../../src'; import waits from '../../../tools/waits'; -import Observable from "zen-observable"; +import Observable from 'zen-observable'; +import compareInnerHTML from '../../../tools/compareInnerHTML'; global.Observable = Observable; -describe('DOM component tests (no-jsx)', () => { +describe( 'DOM component tests (no-jsx)', () => { - let container; + let container; - beforeEach(() => { - container = document.createElement('div'); - }); + beforeEach( () => { + container = document.createElement( 'div' ); + } ); - afterEach(() => { - Inferno.render(null, container); - }); - + afterEach( () => { + Inferno.render( null, container ); + } ); - const { createElement } = Inferno.TemplateFactory; + const { createElement } = Inferno.TemplateFactory; class BasicComponent1 extends Inferno.Component { render() { - const template = Inferno.createTemplate((name, title) => - createElement("div", {className: "basic"}, - createElement("span", {className: name}, "The title is ", title) + const template = Inferno.createTemplate( ( name, title ) => + createElement( 'div', { className: 'basic' }, + createElement( 'span', { className: name }, 'The title is ', title ) ) ); - return template(this.props.name, this.props.title); + + return template( this.props.name, this.props.title ); } } - describe('should render a basic component', () => { + describe( 'should render a basic component', () => { let template; - beforeEach(() => { - template = Inferno.createTemplate((Component, title) => - createElement('div', null, - createElement(Component, {title: title, name: "basic-render"}) + beforeEach( () => { + template = Inferno.createTemplate( ( Component, title ) => + createElement( 'div', null, + createElement( Component, { title: title, name: 'basic-render' } ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent1, 'abc'), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent1, 'abc' ), container); expect( container.innerHTML @@ -50,14 +51,14 @@ describe('DOM component tests (no-jsx)', () => { '
The title is abc
' ); - Inferno.render(template(BasicComponent1, 'abc'), container); + Inferno.render( template( BasicComponent1, 'abc' ), container); expect( container.innerHTML ).to.equal( '
The title is abc
' ); - Inferno.render(template(BasicComponent1, null), container); + Inferno.render( template( BasicComponent1, null ), container); expect( container.innerHTML @@ -65,7 +66,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is
' ); - Inferno.render(template(null, null), container); + Inferno.render( template( null, null ), container ); expect( container.innerHTML @@ -73,369 +74,352 @@ describe('DOM component tests (no-jsx)', () => { '
' ); - }); + } ); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1, '123'), container); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1, '123' ), container); expect( container.innerHTML ).to.equal( '
The title is 123
' ); - ; - Inferno.render(template(BasicComponent1, '1234'), container); + + Inferno.render( template( BasicComponent1, '1234' ), container); expect( container.innerHTML ).to.equal( '
The title is 1234
' ); - Inferno.render(template(BasicComponent1, 1234), container); + Inferno.render( template( BasicComponent1, 1234), container); expect( container.innerHTML ).to.equal( '
The title is 1234
' ); - Inferno.render(template(null, '1234'), container); + Inferno.render( template( null, '1234' ), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(null, null), container); + Inferno.render( template( null, null), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(null, undefined), container); + Inferno.render( template( null, undefined), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(undefined, undefined), container); + Inferno.render( template( undefined, undefined), container); expect( container.innerHTML ).to.equal( '
' ); - - Inferno.render(template(undefined), container); + + Inferno.render( template( undefined), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(), container); + Inferno.render( template( ), container); expect( container.innerHTML ).to.equal( '
' ); - }); - }); + } ); + } ); - function BasicStatelessComponent1({name, title}) { - const template = Inferno.createTemplate((name, title) => - createElement("div", {className: "basic"}, - createElement("span", {className: name}, "The title is ", title) - ) - ); - return template(name, title); - } + function BasicStatelessComponent1( { name, title } ) { + const template = Inferno.createTemplate( ( name, title ) => + createElement( 'div', { className: 'basic' }, + createElement( 'span', { className: name }, 'The title is ', title) + ) + ); - describe('should render a basic stateless component', () => { - let template; + return template( name, title ); + } - beforeEach(() => { - template = Inferno.createTemplate((Component, title) => - createElement('div', null, - createElement(Component, {title: title, name: "basic-render"}) - ) - ); - }); + describe( 'should render a basic stateless component', () => { + let template; - it('Initial render (creation)', () => { - - Inferno.render(template(BasicStatelessComponent1, 'abc'), container); + beforeEach(() => { + template = Inferno.createTemplate((Component, title) => + createElement( 'div', null, + createElement(Component, { title: title, name: 'basic-render' } ) + ) + ); + } ); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); + it( 'Initial render (creation)', () => { + + Inferno.render( template( BasicStatelessComponent1, 'abc' ), container); - // Render from stateless to normal component - Inferno.render(template(BasicComponent1, 'abc'), container); expect( container.innerHTML ).to.equal( '
The title is abc
' ); - Inferno.render(template(BasicStatelessComponent1, 'abcd'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abcd
' - ); - - const text = Inferno.createTemplate( function() { - return { text: '123abc' } - }); - const text1 = Inferno.createTemplate( function() { - return { tag:'span', children: { text: '123abc'} } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text), container) - ).to.throw; - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - - Inferno.render(template(BasicStatelessComponent1), container); - expect( - container.innerHTML - ).to.equal( - '
The title is
' - ); - - Inferno.render(template(undefined), container); - expect( - container.innerHTML - ).to.equal( - '
' - ); - - Inferno.render(template(BasicStatelessComponent1), container); - expect( - container.innerHTML - ).to.equal( - '
The title is
' - ); - - Inferno.render(template('123', null), container); - expect( - container.innerHTML - ).to.equal( - '
The title is
' - ); - - Inferno.render(template(null, null), container); - expect( - container.innerHTML - ).to.equal( - '
' - ); - - Inferno.render(template(), container); - expect( - container.innerHTML - ).to.equal( - '
' - ); - - }); - - it('Second render (update)', () => { - Inferno.render(template(BasicStatelessComponent1, '123'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - - expect( - () => Inferno.createTemplate(() => { - return { - tag: 'span', - children: { - text: null - } - } - }) - ).to.throw; - - Inferno.render(template(BasicStatelessComponent1, 123), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - - const text1 = Inferno.createTemplate( function() { - return { tag:'span', children: { text: '123abc'} } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - Inferno.render(template(null, '123'), container); - expect( - container.innerHTML - ).to.equal( - '
' - ); - }); - it('Third render (update)', () => { - expect( - () => Inferno.createTemplate(() => { - return { - tag: 'span', - children: { - text: null - } - } - }) - ).to.throw; - - expect( - () => Inferno.createTemplate(() => { - return { - tag: 'span', - children: { - text: null - } - } - }) - ).to.throw; - }); - it('Fourth render (update)', () => { - const text1 = Inferno.createTemplate(() => { - return { - tag: 'span', - text: null - } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - }); - it('Fifth render (update)', () => { - const text1 = Inferno.createTemplate(() => { - return { - tag: 'span' - } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - }); - }); - - //describe('should render a basic stateless component with a render stream', () => { + // Render from stateless to normal component + Inferno.render( template( BasicComponent1, 'abc' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( BasicStatelessComponent1, 'abcd' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abcd
' + ); + + const text = Inferno.createTemplate( function () { + return { text: '123abc' }; + } ); + const text1 = Inferno.createTemplate( function () { + return { tag: 'span', children: { text: '123abc' } }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text), container) + ).to.throw; + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1), container) + ).to.throw; + + Inferno.render( template( BasicStatelessComponent1), container); + expect( + container.innerHTML + ).to.equal( + '
The title is
' + ); + + Inferno.render( template( undefined), container); + expect( + container.innerHTML + ).to.equal( + '
' + ); + + Inferno.render( template( BasicStatelessComponent1), container); + expect( + container.innerHTML + ).to.equal( + '
The title is
' + ); + + Inferno.render( template( '123', null), container); + expect( + container.innerHTML + ).to.equal( + '
The title is
' + ); + + Inferno.render( template( null, null), container); + expect( + container.innerHTML + ).to.equal( + '
' + ); + + Inferno.render( template( ), container); + expect( + container.innerHTML + ).to.equal( + '
' + ); + + } ); + + it( 'Second render (update)', () => { + Inferno.render( template( BasicStatelessComponent1, '123' ), container ); + expect( + container.innerHTML + ).to.equal( + '
The title is 123
' + ); + + expect( + () => Inferno.createTemplate( () => ( { tag: 'span', children: { text: null } } ) ) + ).to.throw; + + Inferno.render( template( BasicStatelessComponent1, 123 ), container ); + expect( + container.innerHTML + ).to.equal( + '
The title is 123
' + ); + + const text1 = Inferno.createTemplate( function () { + return { tag: 'span', children: { text: '123abc' } }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1 ), container ) + ).to.throw; + Inferno.render( template( null, '123' ), container); + expect( + container.innerHTML + ).to.equal( + '
' + ); + } ); + it( 'Third render (update)', () => { + expect( + () => Inferno.createTemplate(() => { return { tag: 'span', children: { text: null } }; + } ) + ).to.throw; + + expect( + () => Inferno.createTemplate(() => { return { tag: 'span', children: { text: null } }; + } ) + ).to.throw; + } ); + it( 'Fourth render (update)', () => { + const text1 = Inferno.createTemplate(() => { + return { + tag: 'span', + text: null + }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1), container) + ).to.throw; + } ); + it( 'Fifth render (update)', () => { + const text1 = Inferno.createTemplate(() => { + return { + tag: 'span' + }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1), container) + ).to.throw; + } ); + } ); + + //describe( 'should render a basic stateless component with a render stream', () => { // let template; // const listeners = []; - // + // // function addEventListener(callback) { - // listeners.push(callback); + // listeners.push(callback); // } // function removeEventListener(callback) { - // const index = listeners.indexOf(callback); - // - // if (index > -1) { - // listeners.splice(index, 1); - // } + // const index = listeners.indexOf(callback); + // + // if (index > -1) { + // listeners.splice(index, 1); + // } // } // function trigger(data) { - // listeners.forEach(listener => listener(data)); + // listeners.forEach(listener => listener(data)); // } - // - // function BasicStatelessComponentWithStreamingRender({name}) { - // const template = Inferno.createTemplate((name, title) => - // createElement("div", {className: "basic"}, - // createElement("span", {className: name}, "The title is ", title) - // ) - // ); - // - // return new Observable(observer => { - // const handler = title => observer.next(template(name, title)); - // - // addEventListener(handler); - // return () => { - // removeEventListener(handler); - // }; - // }); + // + // function BasicStatelessComponentWithStreamingRender( {name} ) { + // const template = Inferno.createTemplate((name, title) => + // createElement("div", {className: "basic"}, + // createElement("span", {className: name}, "The title is ", title) + // ) + // ); + // + // return new Observable(observer => { + // const handler = title => observer.next( template( name, title)); + // + // addEventListener(handler); + // return () => { + // removeEventListener(handler); + // }; + // } ); // } - // - // it('Initial render and update', () => { - // const template = Inferno.createTemplate((Component) => - // createElement('div', null, - // createElement(Component, {name: "basic-render"}) - // ) - // ); - // Inferno.render(template(BasicStatelessComponentWithStreamingRender), container); - // - // expect( - // container.innerHTML - // ).to.equal( - // '
' - // ); - // - // trigger('streaming data!'); - // expect( - // container.innerHTML - // ).to.equal( - // '
The title is streaming data!
' - // ); - // - // trigger('streaming data #2!'); - // expect( - // container.innerHTML - // ).to.equal( - // '
The title is streaming data #2!
' - // ); - // - // Inferno.render(template(BasicStatelessComponentWithStreamingRender), container); - // - // expect( - // container.innerHTML - // ).to.equal( - // '
' - // ); - // - // }); - //}); + // + // it( 'Initial render and update', () => { + // const template = Inferno.createTemplate((Component) => + // createElement( 'div', null, + // createElement(Component, {name: "basic-render"} ) + // ) + // ); + // Inferno.render( template( BasicStatelessComponentWithStreamingRender), container); + // + // expect( + // container.innerHTML + // ).to.equal( + // '
' + // ); + // + // trigger( 'streaming data!' ); + // expect( + // container.innerHTML + // ).to.equal( + // '
The title is streaming data!
' + // ); + // + // trigger( 'streaming data #2!' ); + // expect( + // container.innerHTML + // ).to.equal( + // '
The title is streaming data #2!
' + // ); + // + // Inferno.render( template( BasicStatelessComponentWithStreamingRender), container); + // + // expect( + // container.innerHTML + // ).to.equal( + // '
' + // ); + // + // } ); + //} ); class BasicComponent1b extends Inferno.Component { render() { - const template = Inferno.createTemplate((isChecked, title) => - createElement("div", {className: "basic"}, - createElement('label', {}, - createElement("input", {type: 'checkbox', checked: isChecked}), - "The title is ", + const template = Inferno.createTemplate( ( isChecked, title ) => + createElement( 'div', { className: 'basic' }, + createElement( 'label', {}, + createElement( 'input', { type: 'checkbox', checked: isChecked } ), + 'The title is ', title ) ) ); - return template(this.props.isChecked, this.props.title); + + return template( this.props.isChecked, this.props.title ); } } - describe('should render a basic component with inputs', () => { + describe( 'should render a basic component with inputs', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, isChecked) => - createElement('div', null, - createElement(Component, {title, isChecked}) + createElement( 'div', null, + createElement(Component, { title, isChecked } ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent1b, "abc", true), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent1b, 'abc', true), container); expect( container.innerHTML @@ -443,13 +427,13 @@ describe('DOM component tests (no-jsx)', () => { '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( true ); - Inferno.render(template(BasicComponent1b, "abc", true), container); + Inferno.render( template( BasicComponent1b, 'abc', true), container); expect( container.innerHTML @@ -457,12 +441,12 @@ describe('DOM component tests (no-jsx)', () => { '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( true ); - Inferno.render(template(BasicComponent1b, "abc", 'true'), container); + Inferno.render( template( BasicComponent1b, 'abc', 'true' ), container); expect( container.innerHTML @@ -470,12 +454,12 @@ describe('DOM component tests (no-jsx)', () => { '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( true ); - Inferno.render(template(BasicComponent1b, "abc", 'false'), container); + Inferno.render( template( BasicComponent1b, 'abc', 'false' ), container); expect( container.innerHTML @@ -483,73 +467,73 @@ describe('DOM component tests (no-jsx)', () => { '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( false ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1b, "123", false), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1b, '123', false), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( false ); - Inferno.render(template(BasicComponent1b, null, false), container); + Inferno.render( template( BasicComponent1b, null, false), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( false ); - Inferno.render(template(BasicComponent1b, null, null), container); + Inferno.render( template( BasicComponent1b, null, null), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( false ); - }); - it('Third render (update)', () => { - Inferno.render(template(BasicComponent1b, "123", true), container); + } ); + it( 'Third render (update)', () => { + Inferno.render( template( BasicComponent1b, '123', true), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( true ); - }); - }); + } ); + } ); class BasicComponent1c extends Inferno.Component { render() { const template = Inferno.createTemplate((isEnabled, title, type) => - createElement("div", {className: "basic"}, - createElement('label', {}, - createElement("input", {type, enabled: isEnabled}), - "The title is ", + createElement( 'div', { className: 'basic' }, + createElement( 'label', {}, + createElement( 'input', { type, enabled: isEnabled } ), + 'The title is ', title ) ) @@ -558,26 +542,26 @@ describe('DOM component tests (no-jsx)', () => { } } - describe('should render a basic component with inputs #2', () => { + describe( 'should render a basic component with inputs #2', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, isEnabled) => - createElement('div', null, - createElement(Component, {title, isEnabled, type: 'password'}) + createElement( 'div', null, + createElement(Component, { title, isEnabled, type: 'password' } ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent1c, 'abc', true), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent1c, 'abc', true), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, null, true), container); + Inferno.render( template( BasicComponent1c, null, true), container); expect( container.innerHTML @@ -586,7 +570,7 @@ describe('DOM component tests (no-jsx)', () => { ); // Render into a different component - Inferno.render(template(BasicComponent1b, "abc", true), container); + Inferno.render( template( BasicComponent1b, 'abc', true), container); expect( container.innerHTML ).to.equal( @@ -594,27 +578,27 @@ describe('DOM component tests (no-jsx)', () => { ); //will never be true is we aren't setting isChecked on props as the template we're using isn't for this component expect( - container.querySelector("input").checked + container.querySelector( 'input' ).checked ).to.equal( false ); - Inferno.render(template(null, null, true), container); + Inferno.render( template( null, null, true), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(null, null, null), container); + Inferno.render( template( null, null, null), container); expect( container.innerHTML ).to.equal( '
' ); - - Inferno.render(template(undefined, undefined, undefined), container); + + Inferno.render( template( undefined, undefined, undefined), container); expect( container.innerHTML @@ -623,91 +607,91 @@ describe('DOM component tests (no-jsx)', () => { ); template = Inferno.createTemplate((child1, child2, child3) => - createElement('div', null, + createElement( 'div', null, child1, child2, child3 ) ); - Inferno.render(template(' ', '', ''), container); + Inferno.render( template( ' ', '', '' ), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(' ', ' ', ''), container); + Inferno.render( template( ' ', ' ', '' ), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(' ', ' ', ' '), container); + Inferno.render( template( ' ', ' ', ' ' ), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(' ', 'abc', ' '), container); + Inferno.render( template( ' ', 'abc', ' ' ), container); expect( container.innerHTML ).to.equal( '
abc
' ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1c, '123', false), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1c, '123', false), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, '123', false), container); + Inferno.render( template( BasicComponent1c, '123', false), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, '123 ', false), container); + Inferno.render( template( BasicComponent1c, '123 ', false), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, ' 123 ', false), container); + Inferno.render( template( BasicComponent1c, ' 123 ', false), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, 123, false), container); + Inferno.render( template( BasicComponent1c, 123, false), container); expect( container.innerHTML ).to.equal( '
' ); - Inferno.render(template(BasicComponent1c, ' ', false), container); + Inferno.render( template( BasicComponent1c, ' ', false), container); expect( container.innerHTML ).to.equal( '
' ); - }); - }); - + } ); + } ); + class BasicComponent1d extends Inferno.Component { render() { const template = Inferno.createTemplate((isDisabled, title) => - createElement("div", {className: "basic"}, - createElement('label', {}, - createElement("input", {type: 'password', disabled: isDisabled}), - "The title is ", + createElement( 'div', { className: 'basic' }, + createElement( 'label', {}, + createElement( 'input', { type: 'password', disabled: isDisabled } ), + 'The title is ', title ) ) @@ -716,111 +700,100 @@ describe('DOM component tests (no-jsx)', () => { } } - describe('should render a basic component with inputs #3', () => { + describe( 'should render a basic component with inputs #3', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, isDisabled) => - createElement('div', null, - createElement(Component, {title, isDisabled}) + createElement( 'div', null, + createElement(Component, { title, isDisabled } ) ) ); - }); + } ); - it('Initial render (creation)', () => { + it( 'Initial render (creation)', () => { - Inferno.render(template(BasicComponent1d, 'abc', true), container); + Inferno.render( template( BasicComponent1d, 'abc', true), container); + compareInnerHTML( '
', container ); expect( - container.innerHTML - ).to.equal( - '
' - ); - expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( true ); - Inferno.render(template(BasicComponent1d, 'abc', 'abc'), container); + Inferno.render( template( BasicComponent1d, 'abc', 'abc' ), container); + + compareInnerHTML( '
', container ); expect( - container.innerHTML - ).to.equal( - '
' - ); - expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( true ); - Inferno.render(template(BasicComponent1d, 'abc', true), container); - expect( - container.innerHTML - ).to.equal( - '
' - ); + Inferno.render( template( BasicComponent1d, 'abc', true), container); + compareInnerHTML( '
', container ); expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( true ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1d, '123', false), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1d, '123', false), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( false ); - Inferno.render(template(BasicComponent1d, '123', true), container); + Inferno.render( template( BasicComponent1d, '123', true), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( true ); - Inferno.render(template(BasicComponent1d, ' ', false), container); + Inferno.render( template( BasicComponent1d, ' ', false), container); expect( container.innerHTML ).to.equal( '
' ); expect( - container.querySelector("input").disabled + container.querySelector( 'input' ).disabled ).to.equal( false ); - }); - }); + } ); + } ); - describe('should render a basic component and remove property if null #1', () => { + describe( 'should render a basic component and remove property if null #1', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, name) => - createElement('div', null, - createElement(Component, {title, name}) + createElement( 'div', null, + createElement(Component, { title, name } ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent1, 'abc', 'basic-render'), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent1, 'abc', 'basic-render' ), container); expect( container.innerHTML @@ -828,7 +801,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is abc
' ); - Inferno.render(template(BasicComponent1, null, null), container); + Inferno.render( template( BasicComponent1, null, null), container); expect( container.innerHTML @@ -836,7 +809,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is
' ); - Inferno.render(template(null, null, null), container); + Inferno.render( template( null, null, null), container); expect( container.innerHTML @@ -844,7 +817,7 @@ describe('DOM component tests (no-jsx)', () => { '
' ); - Inferno.render(template(undefined, undefined, undefined), container); + Inferno.render( template( undefined, undefined, undefined), container); expect( container.innerHTML @@ -852,7 +825,7 @@ describe('DOM component tests (no-jsx)', () => { '
' ); - Inferno.render(template(undefined, null, undefined), container); + Inferno.render( template( undefined, null, undefined), container); expect( container.innerHTML @@ -860,7 +833,7 @@ describe('DOM component tests (no-jsx)', () => { '
' ); - Inferno.render(template(null, undefined, null), container); + Inferno.render( template( null, undefined, null), container); expect( container.innerHTML @@ -868,102 +841,96 @@ describe('DOM component tests (no-jsx)', () => { '
' ); - Inferno.render(template(BasicComponent1, '你好，世界！', null), container); + Inferno.render( template( BasicComponent1, '你好，世界！', null), container); expect( container.innerHTML - ).to.equal( - '
The title is 你好，世界！
' + ).to.equal( '
The title is 你好，世界！
' ); - Inferno.render(template(BasicComponent1, '123', null), container); + Inferno.render( template( BasicComponent1, '123', null), container); expect( container.innerHTML - ).to.equal( - '
The title is 123
' + ).to.equal( '
The title is 123
' ); - Inferno.render(template(BasicComponent1, 123, null), container); + Inferno.render( template( BasicComponent1, 123, null), container); expect( container.innerHTML - ).to.equal( - '
The title is 123
' + ).to.equal( '
The title is 123
' ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1, '你好，世界！', null), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1, '你好，世界！', null), container); expect( container.innerHTML - ).to.equal( - '
The title is 你好，世界！
' + ).to.equal( '
The title is 你好，世界！
' ); - Inferno.render(template(BasicComponent1, '123', null), container); + Inferno.render( template( BasicComponent1, '123', null), container); expect( container.innerHTML - ).to.equal( - '
The title is 123
' + ).to.equal( '
The title is 123
' ); - Inferno.render(template(BasicComponent1, 123, null), container); + Inferno.render( template( BasicComponent1, 123, null), container); expect( container.innerHTML - ).to.equal( - '
The title is 123
' + ).to.equal( '
The title is 123
' ); - }); - }); + } ); + } ); - describe('should render a basic component and remove property if null #2', () => { + describe( 'should render a basic component and remove property if null #2', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, name) => - createElement('div', null, - createElement(Component, {title, name}) + createElement( 'div', null, + createElement(Component, { title, name } ) ) ); - Inferno.render(template(BasicComponent1, 'abc', null), container); - }); + Inferno.render( template( BasicComponent1, 'abc', null), container); + } ); - it('Initial render (creation)', () => { + it( 'Initial render (creation)', () => { expect( container.innerHTML ).to.equal( '
The title is abc
' ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1, '123', 'basic-update'), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1, '123', 'basic-update' ), container); expect( container.innerHTML ).to.equal( '
The title is 123
' ); - Inferno.render(template(BasicComponent1, null, null), container); + Inferno.render( template( BasicComponent1, null, null), container); expect( container.innerHTML ).to.equal( '
The title is
' ); - }); - }); + } ); + } ); - describe('should render a basic root component', () => { + describe( 'should render a basic root component', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, name) => - createElement(Component, {title, name}) + createElement(Component, { title, name } ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent1, 'abc', 'basic-render'), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent1, 'abc', 'basic-render' ), container); expect( container.innerHTML ).to.equal( '
The title is abc
' ); - Inferno.render(template(BasicComponent1, 'abc', 'basic-render'), container); + Inferno.render( template( BasicComponent1, 'abc', 'basic-render' ), container); expect( container.innerHTML @@ -971,7 +938,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is abc
' ); - Inferno.render(template(BasicComponent1, 'abc', 3333), container); + Inferno.render( template( BasicComponent1, 'abc', 3333), container); expect( container.innerHTML @@ -979,7 +946,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is abc
' ); - Inferno.render(template(BasicComponent1, 'abc', {}), container); + Inferno.render( template( BasicComponent1, 'abc', {} ), container); expect( container.innerHTML @@ -987,7 +954,7 @@ describe('DOM component tests (no-jsx)', () => { '
The title is abc
' ); - Inferno.render(template(null, 'abc', 'basic-render'), container); + Inferno.render( template( null, 'abc', 'basic-render' ), container); expect( container.innerHTML @@ -995,7 +962,7 @@ describe('DOM component tests (no-jsx)', () => { '' ); - Inferno.render(template(null, null, null), container); + Inferno.render( template( null, null, null), container); expect( container.innerHTML @@ -1003,214 +970,214 @@ describe('DOM component tests (no-jsx)', () => { '' ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1, '123', 'basic-update'), container); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1, '123', 'basic-update' ), container); expect( container.innerHTML ).to.equal( '
The title is 123
' ); - Inferno.render(template(BasicComponent1, '1234', 'basic-update'), container); + Inferno.render( template( BasicComponent1, '1234', 'basic-update' ), container); expect( container.innerHTML ).to.equal( '
The title is 1234
' ); - }); - }); - - describe('should render a basic root stateless component', () => { - let template; - - beforeEach(() => { - template = Inferno.createTemplate((Component, title, name) => - createElement(Component, {title, name}) - ); - }); - - it('Initial render (creation)', () => { - Inferno.render(template(BasicStatelessComponent1, 'abc', 'basic-render'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - - Inferno.render(template(null, 'abc', 'basic-render'), container); - expect( - container.innerHTML - ).to.equal( - '' - ); - - Inferno.render(template(BasicStatelessComponent1, 'abc', 'basic-render '), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - - Inferno.render(template(BasicStatelessComponent1, 'abc', ' basic-render'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - - Inferno.render(template(BasicStatelessComponent1, 'abc', ' basic-render '), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - - Inferno.render(template(BasicStatelessComponent1, ' abc ', ' basic-render '), container); - expect( - container.innerHTML - ).to.equal( - '
The title is abc
' - ); - - Inferno.render(template(BasicStatelessComponent1, '123', 'basic-update'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - - Inferno.render(template(BasicStatelessComponent1, '123', 'basic-update'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - }); - it('Second render (update)', () => { - Inferno.render(template(BasicStatelessComponent1, '123', 'basic-update'), container); - expect( - container.innerHTML - ).to.equal( - '
The title is 123
' - ); - - Inferno.render(template(BasicStatelessComponent1, null, null), container); - expect( - container.innerHTML - ).to.equal( - '
The title is
' - ); - - }); - - it('Third render (update)', () => { - - const text1 = Inferno.createTemplate(() => { - return { - tag: 'span', - text: null - } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - }); - - it('Fourth render (update)', () => { - - const text1 = Inferno.createTemplate(() => { - return { - tag: 'span' - } - }); - - expect( - () => Inferno.render(template(BasicStatelessComponent1, text1), container) - ).to.throw; - }); - - - }); + } ); + } ); + + describe( 'should render a basic root stateless component', () => { + let template; + + beforeEach(() => { + template = Inferno.createTemplate((Component, title, name) => + createElement(Component, { title, name } ) + ); + } ); + + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicStatelessComponent1, 'abc', 'basic-render' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( null, 'abc', 'basic-render' ), container); + expect( + container.innerHTML + ).to.equal( + '' + ); + + Inferno.render( template( BasicStatelessComponent1, 'abc', 'basic-render ' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( BasicStatelessComponent1, 'abc', ' basic-render' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( BasicStatelessComponent1, 'abc', ' basic-render ' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( BasicStatelessComponent1, ' abc ', ' basic-render ' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is abc
' + ); + + Inferno.render( template( BasicStatelessComponent1, '123', 'basic-update' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is 123
' + ); + + Inferno.render( template( BasicStatelessComponent1, '123', 'basic-update' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is 123
' + ); + } ); + it( 'Second render (update)', () => { + Inferno.render( template( BasicStatelessComponent1, '123', 'basic-update' ), container); + expect( + container.innerHTML + ).to.equal( + '
The title is 123
' + ); + + Inferno.render( template( BasicStatelessComponent1, null, null), container); + expect( + container.innerHTML + ).to.equal( + '
The title is
' + ); + + } ); + + it( 'Third render (update)', () => { + + const text1 = Inferno.createTemplate(() => { + return { + tag: 'span', + text: null + }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1), container) + ).to.throw; + } ); + + it( 'Fourth render (update)', () => { + const text1 = Inferno.createTemplate(() => { + return { + tag: 'span' + }; + } ); + + expect( + () => Inferno.render( template( BasicStatelessComponent1, text1), container) + ).to.throw; + } ); + + + } ); class BasicComponent2 extends Inferno.Component { render() { const template = Inferno.createTemplate((name, title, children) => - createElement("div", {className: "basic"}, - createElement("span", {className: name}, "The title is ", title), + createElement( 'div', { className: 'basic' }, + createElement( 'span', { className: name }, 'The title is ', title), children ) ); + return template(this.props.name, this.props.title, this.props.children); } } - describe('should render a basic component with children', () => { + describe( 'should render a basic component with children', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title, name) => - createElement('div', null, - createElement(Component, {title, name}, - createElement('span', null, 'I\'m a child') + createElement( 'div', null, + createElement(Component, { title, name }, + createElement( 'span', null, 'I\'m a child' ) ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent2, "abc", "basic-render"), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent2, 'abc', 'basic-render' ), container); expect( container.innerHTML ).to.equal( '
The title is abcI\'m a child
' ); - Inferno.render(template(BasicComponent2, "abc", "basic-render"), container); + Inferno.render( template( BasicComponent2, 'abc', 'basic-render' ), container); expect( container.innerHTML ).to.equal( '
The title is abcI\'m a child
' ); - }); - it('Second render (update)', () => { + } ); + it( 'Second render (update)', () => { Inferno.render( - template(BasicComponent2, "123", "basic-update"), container + template(BasicComponent2, '123', 'basic-update' ), container ); expect( container.innerHTML ).to.equal( '
The title is 123I\'m a child
' ); - }); - it('Third render (update)', () => { + } ); + it( 'Third render (update)', () => { template = Inferno.createTemplate((Component, title, name) => - createElement('div', null, - createElement(Component, {title, name}, - createElement('span', null, 'The title is definitely ', title) + createElement( 'div', null, + createElement(Component, { title, name }, + createElement( 'span', null, 'The title is definitely ', title) ) ) ); Inferno.render( - template(BasicComponent2, "12345", "basic-update"), container + template(BasicComponent2, '12345', 'basic-update' ), container ); expect( container.innerHTML ).to.equal( '
The title is 12345The title is definitely 12345
' ); - }); - }); + } ); + } ); class BasicComponent2b extends Inferno.Component { render() { const template = Inferno.createTemplate((children) => - createElement('div', null, - createElement('span', null, 'component!'), - createElement('div', null, children) + createElement( 'div', null, + createElement( 'span', null, 'component!' ), + createElement( 'div', null, children) ) ); return template(this.props.children); @@ -1220,16 +1187,16 @@ describe('DOM component tests (no-jsx)', () => { class BasicComponent2c extends Inferno.Component { render() { const template = Inferno.createTemplate((children) => - createElement('div', null, - createElement('span', null, 'other component!'), - createElement('div', null, children) + createElement( 'div', null, + createElement( 'span', null, 'other component!' ), + createElement( 'div', null, children) ) ); return template(this.props.children); } } - describe('should render a basic component with component children', () => { + describe( 'should render a basic component with component children', () => { let template; beforeEach(() => { @@ -1240,10 +1207,10 @@ describe('DOM component tests (no-jsx)', () => { ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent2b, BasicComponent2b, BasicComponent2b), container); expect( container.innerHTML @@ -1251,9 +1218,9 @@ describe('DOM component tests (no-jsx)', () => { '
component!
component!
component!
' ); - // Should only remove the on in the middle, or I'm wrong? + // Should only remove the on in the middle, or I'm wrong? // -- You're wrong, the 3rd component is a child of the 2nd component, so if the 2nd is null, the 3rd will never be rendered - Inferno.render(template(BasicComponent2b, null, BasicComponent2b), container); + Inferno.render( template( BasicComponent2b, null, BasicComponent2b), container); expect( container.innerHTML @@ -1261,14 +1228,14 @@ describe('DOM component tests (no-jsx)', () => { '
component!
' ); - Inferno.render(template(BasicComponent2b, null, null), container); + Inferno.render( template( BasicComponent2b, null, null), container); expect( container.innerHTML ).to.equal( '
component!
' ); - Inferno.render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); + Inferno.render( template( BasicComponent2b, BasicComponent2b, BasicComponent2b), container); expect( container.innerHTML @@ -1276,7 +1243,7 @@ describe('DOM component tests (no-jsx)', () => { '
component!
component!
component!
' ); - Inferno.render(template(null, null, null), container); + Inferno.render( template( null, null, null), container); expect( container.innerHTML ).to.equal( @@ -1284,87 +1251,87 @@ describe('DOM component tests (no-jsx)', () => { ); //it doesn't pass in the correct props, so this is a bad test really as 123 and basic-update will never pass through - Inferno.render(template(BasicStatelessComponent1, '123', 'basic-update'), container); + Inferno.render( template( BasicStatelessComponent1, '123', 'basic-update' ), container); expect( container.innerHTML ).to.equal( '
The title is
' ); - }); - it('Second render (update) - should be the same', () => { - Inferno.render(template(BasicComponent2b, BasicComponent2b, BasicComponent2b), container); + } ); + it( 'Second render (update) - should be the same', () => { + Inferno.render( template( BasicComponent2b, BasicComponent2b, BasicComponent2b), container); expect( container.innerHTML ).to.equal( '
component!
component!
component!
' ); - }); - it('Third render (update) - should be a bit different', () => { - Inferno.render(template(BasicComponent2b, BasicComponent2b, BasicComponent2c), container); + } ); + it( 'Third render (update) - should be a bit different', () => { + Inferno.render( template( BasicComponent2b, BasicComponent2b, BasicComponent2c), container); expect( container.innerHTML ).to.equal( '
component!
component!
other component!
' ); - Inferno.render(template(BasicComponent2b, BasicComponent2c, BasicComponent2b), container); + Inferno.render( template( BasicComponent2b, BasicComponent2c, BasicComponent2b), container); expect( container.innerHTML ).to.equal( '
component!
other component!
component!
' ); - }); - it('Forth render (update) - should be a lot different', () => { - Inferno.render(template(BasicComponent2b, BasicComponent2c, BasicComponent2c), container); + } ); + it( 'Forth render (update) - should be a lot different', () => { + Inferno.render( template( BasicComponent2b, BasicComponent2c, BasicComponent2c), container); expect( container.innerHTML ).to.equal( '
component!
other component!
other component!
' ); - Inferno.render(template(BasicComponent2b, null, BasicComponent2c), container); + Inferno.render( template( BasicComponent2b, null, BasicComponent2c), container); expect( container.innerHTML ).to.equal( '
component!
' ); - // Fix me! Should be only one component left - Inferno.render(template(null, null, BasicComponent2c), container); + // Fix me! Should be only one component left + Inferno.render( template( null, null, BasicComponent2c), container); expect( container.innerHTML ).to.equal( '' ); - Inferno.render(template(null, null, null), container); + Inferno.render( template( null, null, null), container); expect( container.innerHTML ).to.equal( '' ); - }); - it('Fifth render (update) - should be completely different', () => { - Inferno.render(template(BasicComponent2c, BasicComponent2c, BasicComponent2c), container); + } ); + it( 'Fifth render (update) - should be completely different', () => { + Inferno.render( template( BasicComponent2c, BasicComponent2c, BasicComponent2c), container); expect( container.innerHTML ).to.equal( '
other component!
other component!
other component!
' ); - }); - }); + } ); + } ); - describe('should render a basic component and correctly mount', () => { + describe( 'should render a basic component and correctly mount', () => { let template; let componentWillMountCount; class ComponentLifecycleCheck extends Inferno.Component { render() { const template = Inferno.createTemplate((children) => - createElement('div', null, - createElement('span', null, 'component!'), - createElement('div', null, children) + createElement( 'div', null, + createElement( 'span', null, 'component!' ), + createElement( 'div', null, children) ) ); return template(this.props.children); @@ -1383,129 +1350,125 @@ describe('DOM component tests (no-jsx)', () => { ) ) ); - }); + } ); - it('Initial render (creation)', () => { - Inferno.render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); + it( 'Initial render (creation)', () => { + Inferno.render( template( ComponentLifecycleCheck, ComponentLifecycleCheck, ComponentLifecycleCheck), container); expect( componentWillMountCount ).to.equal( 3 ); - }); - it('Initial render (update)', () => { - Inferno.render(template(ComponentLifecycleCheck, ComponentLifecycleCheck, null), container); + } ); + it( 'Initial render (update)', () => { + Inferno.render( template( ComponentLifecycleCheck, ComponentLifecycleCheck, null), container); expect( componentWillMountCount ).to.equal( 2 ); - }); - }); + } ); + } ); - describe('should render multiple components', () => { + describe( 'should render multiple components', () => { let template; beforeEach(() => { template = Inferno.createTemplate((Component, title1, name1, Component2, title2, name2) => - createElement('div', null, - createElement(Component, {title: title1, name: name1}), - createElement(Component2, {title: title2, name: name2}) + createElement( 'div', null, + createElement(Component, { title: title1, name: name1 } ), + createElement(Component2, { title: title2, name: name2 } ) ) ); - Inferno.render(template(BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render'), container); - }); + Inferno.render( template( BasicComponent1, 'component 1', 'basic-render', BasicComponent1, 'component 2', 'basic-render' ), container); + } ); - it('Initial render (creation)', () => { + it( 'Initial render (creation)', () => { expect( container.innerHTML ).to.equal( '
The title is component 1
' + '
The title is component 2
' ); - }); + } ); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent1, 'component 1', 'basic-render'), container); + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent1, 'component 1', 'basic-render' ), container); expect( container.innerHTML ).to.equal( '
The title is component 1
' ); - }); - }); - + } ); + } ); + class BasicComponent3 extends Inferno.Component { - render() { - const template = Inferno.createTemplate((styles, title) => - createElement("div", { - style: styles - }, - createElement("span", { - style: styles - }, "The title is ", title) - ) - ); - - return template(this.props.styles, this.props.title); - } - } - - describe('should render a basic component with styling', () => { - let template; - - beforeEach(() => { - template = Inferno.createTemplate((Component, props) => - createElement(Component, props) - ); - }); - - it('Initial render (creation)', () => { - Inferno.render(template(BasicComponent3, { - title: "styled!", - styles: { - color: "red", - paddingLeft: 10 - } - }), container); - - expect( - container.innerHTML - ).to.equal( - '
The title is styled!
' - ); - Inferno.render(template(BasicComponent3, { - title: "styled!", - styles: { - color: "red", - paddingTop: 10 - } - }), container); - - expect( - container.innerHTML - ).to.equal( - '
The title is styled!
' - ); - - }); - it('Second render (update)', () => { - Inferno.render(template(BasicComponent3, { - title: "styled (again)!", - styles: { - color: "blue", - paddingBottom: 20 - } - }), container); - expect( - container.innerHTML - ).to.equal( - '
The title is styled (again)!
' - ); - }); - }); - - //describe('should render a basic component and remove styling #1', () => { + render() { + const template = Inferno.createTemplate((styles, title) => + createElement( 'div', { + style: styles + }, + createElement( 'span', { + style: styles + }, 'The title is ', title)) + ); + + return template(this.props.styles, this.props.title); + } + } + + describe( 'should render a basic component with styling', () => { + let template; + + beforeEach(() => { + template = Inferno.createTemplate((Component, props) => + createElement(Component, props) + ); + } ); + + it( 'Initial render (creation)', () => { + Inferno.render( template( BasicComponent3, { + title: 'styled!', + styles: { + color: 'red', + paddingLeft: 10 + } + } ), container); + + expect( + container.innerHTML + ).to.equal( '
The title is styled!
' ); + + Inferno.render( template( BasicComponent3, { + title: 'styled!', + styles: { + color: 'red', + paddingTop: 10 + } + } ), container); + + expect( + container.innerHTML + ).to.equal( '
The title is styled!
' ); + + } ); + + it( 'Second render (update)', () => { + Inferno.render( template( BasicComponent3, { + title: 'styled (again)!', + styles: { + color: 'blue', + paddingBottom: 20 + } + } ), container); + + expect( + container.innerHTML + ).to.equal( '
The title is styled (again)!
' ); + } ); + } ); + + //describe( 'should render a basic component and remove styling #1', () => { // let template; // // beforeEach(() => { @@ -1515,16 +1478,16 @@ describe('DOM component tests (no-jsx)', () => { // Inferno.render(Inferno.createFragment([ // {component: BasicComponent3, props: {title: "styled!", styles: { color: "red", padding: 10}}} // ], template), container); - // }); + // } ); // - // it('Initial render (creation)', () => { + // it( 'Initial render (creation)', () => { // expect( // container.innerHTML // ).to.equal( // '
The title is styled!
' // ); - // }); - // it('Second render (update)', () => { + // } ); + // it( 'Second render (update)', () => { // Inferno.render(Inferno.createFragment([ // {component: BasicComponent3, props: {title: "styles are removed!", styles: null}} // ], template), container); @@ -1533,10 +1496,10 @@ describe('DOM component tests (no-jsx)', () => { // ).to.equal( // '
The title is styles are removed!
' // ); - // }); - //}); + // } ); + //} ); // - //describe('should render a basic component and remove styling #2', () => { + //describe( 'should render a basic component and remove styling #2', () => { // let template; // // beforeEach(() => { @@ -1546,16 +1509,16 @@ describe('DOM component tests (no-jsx)', () => { // Inferno.render(Inferno.createFragment([ // {component: BasicComponent3, props: {title: "NOT styled!", styles: null}} // ], template), container); - // }); + // } ); // - // it('Initial render (creation)', () => { + // it( 'Initial render (creation)', () => { // expect( // container.innerHTML // ).to.equal( // '
The title is NOT styled!
' // ); - // }); - // it('Second render (update)', () => { + // } ); + // it( 'Second render (update)', () => { // Inferno.render(Inferno.createFragment([ // {component: BasicComponent3, props: {title: "styled (again)!", styles: { color: "blue", margin: 20}}} // ], template), container); @@ -1564,31 +1527,31 @@ describe('DOM component tests (no-jsx)', () => { // ).to.equal( // '
The title is styled (again)!
' // ); - // }); - //}); + // } ); + //} ); // //class TestComponent extends Inferno.Component { // template(createElement, c, value, styles) { - // return createElement('select', { + // return createElement( 'select', { // multiple: true, // value: value, // style: styles - // }, createElement('optgroup', { + // }, createElement( 'optgroup', { // label: 'foo-group' // }, - // createElement('option', { + // createElement( 'option', { // value: 'foo' - // }, 'Im a li-tag')), - // createElement('optgroup', { + // }, 'Im a li-tag' )), + // createElement( 'optgroup', { // label: 'bar-group' - // }, createElement('option', { + // }, createElement( 'option', { // value: 'bar' - // }, 'Im a li-tag')), - // createElement('optgroup', { + // }, 'Im a li-tag' )), + // createElement( 'optgroup', { // label: 'dominic-group' - // }, createElement('option', { + // }, createElement( 'option', { // value: 'dominic' - // }, 'Im a li-tag')) + // }, 'Im a li-tag' )) // ); // } // render() { @@ -1596,12 +1559,12 @@ describe('DOM component tests (no-jsx)', () => { // } //} // - //describe('should render a basic test component', () => { + //describe( 'should render a basic test component', () => { // let template; // // beforeEach(() => { // template = Inferno.createTemplate((createElement, createComponent, Component) => - // createElement('div', null, + // createElement( 'div', null, // createComponent(Component) // ) // ); @@ -1612,9 +1575,9 @@ describe('DOM component tests (no-jsx)', () => { // style: { background: 'red' } // } // }], template), container); - // }); + // } ); // - // it('Initial render (creation)', () => { + // it( 'Initial render (creation)', () => { // expect( // container.innerHTML // ).to.equal( @@ -1623,8 +1586,8 @@ describe('DOM component tests (no-jsx)', () => { // + '' // + '' // ); - // }); - // it('Second render (update)', () => { + // } ); + // it( 'Second render (update)', () => { // Inferno.render(Inferno.createFragment([{ // component: TestComponent, // props: { @@ -1640,10 +1603,10 @@ describe('DOM component tests (no-jsx)', () => { // + '' // + '' // ); - // }); - //}); + // } ); + //} ); - describe('should mount and unmount a basic component', () => { + describe( 'should mount and unmount a basic component', () => { let mountCount; let unmountCount; let template; @@ -1651,8 +1614,8 @@ describe('DOM component tests (no-jsx)', () => { class ComponentLifecycleCheck extends Inferno.Component { render() { const template = Inferno.createTemplate(() => - createElement('div', null, - createElement('span', null) + createElement( 'div', null, + createElement( 'span', null) ) ); return template(); @@ -1671,19 +1634,19 @@ describe('DOM component tests (no-jsx)', () => { template = Inferno.createTemplate((Component) => createElement(Component) ); - Inferno.render(template(ComponentLifecycleCheck), container); - }); + Inferno.render( template( ComponentLifecycleCheck), container); + } ); - it("should have mounted the component", () => { + it( 'should have mounted the component', () => { expect(mountCount).to.equal(1); - }); - it("should have unmounted the component", () => { + } ); + it( 'should have unmounted the component', () => { Inferno.render(null, container); expect(unmountCount).to.equal(1); - }); - }); + } ); + } ); - describe('should mount and unmount a basic component #2', () => { + describe( 'should mount and unmount a basic component #2', () => { let mountCount; let unmountCount; let template; @@ -1691,10 +1654,11 @@ describe('DOM component tests (no-jsx)', () => { class ComponentLifecycleCheck extends Inferno.Component { render() { const template = Inferno.createTemplate(() => - createElement('div', null, - createElement('span', null) - ) + createElement( 'div', null, + createElement( 'span', null) + ) ); + return template(); } componentDidMount() { @@ -1711,19 +1675,19 @@ describe('DOM component tests (no-jsx)', () => { template = Inferno.createTemplate((Component) => createElement(Component) ); - Inferno.render(template(ComponentLifecycleCheck), container); - }); + Inferno.render( template( ComponentLifecycleCheck), container); + } ); - it("should have mounted the component", () => { + it( 'should have mounted the component', () => { expect(mountCount).to.equal(1); - }); - it("should have unmounted the component", () => { - Inferno.render(template(null), container); + } ); + it( 'should have unmounted the component', () => { + Inferno.render( template( null), container); expect(unmountCount).to.equal(1); - }); - }); + } ); + } ); - describe('state changes should trigger all lifecycle events for an update', () => { + describe( 'state changes should trigger all lifecycle events for an update', () => { let componentWillMountCount; let shouldComponentUpdateCount; let componentDidUpdateCount; @@ -1740,17 +1704,17 @@ describe('DOM component tests (no-jsx)', () => { } render() { const template = Inferno.createTemplate((counter) => - createElement('div', null, - createElement('span', null, counter) + createElement( 'div', null, + createElement( 'span', null, counter) ) ); return template(this.state.counter); } componentWillMount() { componentWillMountCount++; - this.setState({ + this.setState( { counter: this.state.counter + 1 - }); + } ); } shouldComponentUpdate() { shouldComponentUpdateCount++; @@ -1776,57 +1740,57 @@ describe('DOM component tests (no-jsx)', () => { template = Inferno.createTemplate((Component) => createElement(Component) ); - Inferno.render(template(ComponentLifecycleCheck), container); - waits(30, done) - }); + Inferno.render( template( ComponentLifecycleCheck), container); + waits(30, done); + } ); - it("componentWillMountCount to have fired once", () => { + it( 'componentWillMountCount to have fired once', () => { expect(componentWillMountCount).to.equal(1); - }); - it("shouldComponentUpdateCount to have fired once", () => { + } ); + it( 'shouldComponentUpdateCount to have fired once', () => { expect(shouldComponentUpdateCount).to.equal(1); - }); - it("componentWillUpdateCount to have fired once", () => { + } ); + it( 'componentWillUpdateCount to have fired once', () => { expect(componentWillUpdateCount).to.equal(1); - }); - it("componentDidUpdateCount to have fired once", () => { + } ); + it( 'componentDidUpdateCount to have fired once', () => { expect(componentDidUpdateCount).to.equal(1); - }); - it("componentWillReceivePropsCount not to have fired", () => { + } ); + it( 'componentWillReceivePropsCount not to have fired', () => { expect(componentWillReceivePropsCount).to.equal(0); - }); - it("the element in the component should show the new state", () => { + } ); + it( 'the element in the component should show the new state', () => { expect(container.innerHTML).to.equal( '
1
' ); - }); - }); + } ); + } ); - describe('should render a basic component with conditional fragment', () => { + describe( 'should render a basic component with conditional fragment', () => { const tpl4282471407 = Inferno.createTemplate(function (v0) { return { tag: 'div', - children: ['', v0, '', { + children: [ '', v0, '', { tag: 'p', children: 'test' - }, ''] + }, '' ] }; - }); + } ); const tpl3625453295 = Inferno.createTemplate(function () { return { tag: 'h1', children: 'BIG' }; - }); + } ); const tpl4021787591 = Inferno.createTemplate(function () { return { tag: 'h2', children: 'small' }; - }); + } ); const tpl1546018623 = Inferno.createTemplate(function (v0) { - return {tag: v0}; - }); + return { tag: v0 }; + } ); class Component extends Inferno.Component { render() { @@ -1835,60 +1799,60 @@ describe('DOM component tests (no-jsx)', () => { } } - it('Initial render (creation)', () => { + it( 'Initial render (creation)', () => { Inferno.render(tpl1546018623(Component), container); expect(container.innerHTML).to.equal( '

BIG

test

' ); - }); - }); + } ); + } ); - describe('should render a basic component with a list of values from state', () => { + describe( 'should render a basic component with a list of values from state', () => { const tpl2026545261 = Inferno.createTemplate(function (v0) { return { tag: 'ul', attrs: { class: 'login-organizationlist' }, - children: ['', v0, ''] + children: [ '', v0, '' ] }; - }); + } ); const tpl3192647933 = Inferno.createTemplate(function (v0) { return { tag: 'li', children: v0 }; - }); + } ); const tpl1546018623 = Inferno.createTemplate(function (v0) { - return {tag: v0}; - }); + return { tag: v0 }; + } ); class Component extends Inferno.Component { constructor(props) { super(props); this.state = { organizations: [ - {name: 'test1', key: '1'}, - {name: 'test2', key: '2'}, - {name: 'test3', key: '3'}, - {name: 'test4', key: '4'}, - {name: 'test5', key: '5'}, - {name: 'test6', key: '6'} + { name: 'test1', key: '1' }, + { name: 'test2', key: '2' }, + { name: 'test3', key: '3' }, + { name: 'test4', key: '4' }, + { name: 'test5', key: '5' }, + { name: 'test6', key: '6' } ] }; } render() { return tpl2026545261(this.state.organizations.map(function (result) { return tpl3192647933(result.name); - })); + } )); } } - it('Initial render (creation)', () => { + it( 'Initial render (creation)', () => { Inferno.render(tpl1546018623(Component), container); expect(container.innerHTML).to.equal( '' ); - }); - }); -}); \ No newline at end of file + } ); + } ); +} ); \ No newline at end of file