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)', () => {
'
'
);
- Inferno.render(template(BasicComponent1, 'abc'), container);
+ Inferno.render( template( BasicComponent1, 'abc' ), container);
expect(
container.innerHTML
).to.equal(
''
);
- 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)', () => {
''
);
- 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(
''
);
- ;
- Inferno.render(template(BasicComponent1, '1234'), container);
+
+ Inferno.render( template( BasicComponent1, '1234' ), container);
expect(
container.innerHTML
).to.equal(
''
);
- Inferno.render(template(BasicComponent1, 1234), container);
+ Inferno.render( template( BasicComponent1, 1234), container);
expect(
container.innerHTML
).to.equal(
''
);
- 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(
- ''
- );
+ 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(
''
);
- Inferno.render(template(BasicStatelessComponent1, 'abcd'), container);
- expect(
- container.innerHTML
- ).to.equal(
- ''
- );
-
- 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(
- ''
- );
-
- Inferno.render(template(undefined), container);
- expect(
- container.innerHTML
- ).to.equal(
- '
'
- );
-
- Inferno.render(template(BasicStatelessComponent1), container);
- expect(
- container.innerHTML
- ).to.equal(
- ''
- );
-
- Inferno.render(template('123', null), container);
- expect(
- container.innerHTML
- ).to.equal(
- ''
- );
-
- 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(
- ''
- );
-
- expect(
- () => Inferno.createTemplate(() => {
- return {
- tag: 'span',
- children: {
- text: null
- }
- }
- })
- ).to.throw;
-
- Inferno.render(template(BasicStatelessComponent1, 123), container);
- expect(
- container.innerHTML
- ).to.equal(
- ''
- );
-
- 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(
+ ''
+ );
+
+ Inferno.render( template( BasicStatelessComponent1, 'abcd' ), container);
+ expect(
+ container.innerHTML
+ ).to.equal(
+ ''
+ );
+
+ 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(
+ ''
+ );
+
+ Inferno.render( template( undefined), container);
+ expect(
+ container.innerHTML
+ ).to.equal(
+ '
'
+ );
+
+ Inferno.render( template( BasicStatelessComponent1), container);
+ expect(
+ container.innerHTML
+ ).to.equal(
+ ''
+ );
+
+ Inferno.render( template( '123', null), container);
+ expect(
+ container.innerHTML
+ ).to.equal(
+ ''
+ );
+
+ 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(
+ ''
+ );
+
+ expect(
+ () => Inferno.createTemplate( () => ( { tag: 'span', children: { text: null } } ) )
+ ).to.throw;
+
+ Inferno.render( template( BasicStatelessComponent1, 123 ), container );
+ expect(
+ container.innerHTML
+ ).to.equal(
+ ''
+ );
+
+ 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)', () => {
''
);
- 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)', () => {
''
);
- 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(
- ''
+ ).to.equal( ''
);
- Inferno.render(template(BasicComponent1, '123', null), container);
+ Inferno.render( template( BasicComponent1, '123', null), container);
expect(
container.innerHTML
- ).to.equal(
- ''
+ ).to.equal( ''
);
- Inferno.render(template(BasicComponent1, 123, null), container);
+ Inferno.render( template( BasicComponent1, 123, null), container);
expect(
container.innerHTML
- ).to.equal(
- ''
+ ).to.equal( ''
);
- });
- 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(
- ''
+ ).to.equal( ''
);
- Inferno.render(template(BasicComponent1, '123', null), container);
+ Inferno.render( template( BasicComponent1, '123', null), container);
expect(
container.innerHTML
- ).to.equal(
- ''
+ ).to.equal( ''
);
- Inferno.render(template(BasicComponent1, 123, null), container);
+ Inferno.render( template( BasicComponent1, 123, null), container);
expect(
container.innerHTML
- ).to.equal(
- ''
+ ).to.equal( ''
);
- });
- });
+ } );
+ } );
- 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(
''
);
- });
- 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(
''
);
- Inferno.render(template(BasicComponent1, null, null), container);
+ Inferno.render( template( BasicComponent1, null, null), container);
expect(
container.innerHTML
).to.equal(
''
);
- });
- });
+ } );
+ } );
- 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 abc I\'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 abc I\'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 123 I\'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 12345 The 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)', () => {
''
);
- // 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)', () => {
''
);
- Inferno.render(template(BasicComponent2b, null, null), container);
+ Inferno.render( template( BasicComponent2b, null, null), container);
expect(
container.innerHTML
).to.equal(
''
);
- 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)', () => {
''
);
- 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(
''
);
- });
- 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(
''
);
- Inferno.render(template(BasicComponent2b, BasicComponent2c, BasicComponent2b), container);
+ Inferno.render( template( BasicComponent2b, BasicComponent2c, BasicComponent2b), container);
expect(
container.innerHTML
).to.equal(
''
);
- });
- 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(
''
);
- Inferno.render(template(BasicComponent2b, null, BasicComponent2c), container);
+ Inferno.render( template( BasicComponent2b, null, BasicComponent2c), container);
expect(
container.innerHTML
).to.equal(
''
);
- // 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(
''
);
- });
- });
+ } );
+ } );
- 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(
''
);
- });
- });
-
+ } );
+ } );
+
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)', () => {
// + 'Im a li-tag '
// + 'Im a li-tag '
// );
- // });
- // 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)', () => {
// + 'Im a li-tag '
// + 'Im a li-tag '
// );
- // });
- //});
+ // } );
+ //} );
- 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(
''
);
- });
- });
+ } );
+ } );
- 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(
'test1 test2 test3 test4 test5 test6 '
);
- });
- });
-});
\ No newline at end of file
+ } );
+ } );
+} );
\ No newline at end of file