From be6a9548eb7b76b399de383876ae5912e187261a Mon Sep 17 00:00:00 2001 From: Alexei Bazhenov Date: Wed, 14 Dec 2016 15:33:09 -0600 Subject: [PATCH 1/2] more innerHTML fixes --- src/DOM/__tests__/children.spec.tsx | 149 ++++++++++--------- src/DOM/__tests__/elements.spec.tsx | 30 ++-- src/DOM/__tests__/hooks.spec.tsx | 25 ++-- src/DOM/__tests__/mixedFormElements.spec.tsx | 15 +- src/DOM/__tests__/styles.spec.browser.ts | 3 +- src/DOM/__tests__/update.spec.browser.ts | 64 ++++---- src/DOM/__tests__/update.spec.tsx | 50 +++---- 7 files changed, 170 insertions(+), 166 deletions(-) diff --git a/src/DOM/__tests__/children.spec.tsx b/src/DOM/__tests__/children.spec.tsx index 3ce694f5e..a948ad408 100644 --- a/src/DOM/__tests__/children.spec.tsx +++ b/src/DOM/__tests__/children.spec.tsx @@ -2,6 +2,7 @@ import { expect } from 'chai'; import { assert, spy } from 'sinon'; import Component from 'inferno-component'; import Inferno, { render } from 'inferno'; +import { innerHTML } from '../../tools/utils'; Inferno; // suppress ts 'never used' error describe('Children - (JSX)', () => { @@ -64,19 +65,19 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
New 5
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -116,13 +117,13 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
New 1
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -162,13 +163,13 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Add
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Add
New 0
New 1
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
New 1
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -214,13 +215,13 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
Add
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
New 0
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
New 1
Add
New 0
New 1
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
New 0
New 1
')); }); it('Should appendx3 to correct location when it keyed list has siblings', function() { @@ -263,10 +264,10 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); }); it('Should unshiftx3 to correct location when it keyed list has siblings', function() { @@ -309,10 +310,10 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 4
New 3
New 2
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
')); }); it('Inline text element before array list', function() { @@ -343,12 +344,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); _tabs.push({ title: "New " + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal('
inlineText
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
New 0
')); }); it('Inline text element after array list', function() { @@ -379,12 +380,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); _tabs.push({ title: "New " + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal('
New 0
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
inlineText
')); }); }); @@ -436,19 +437,19 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
New 5
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
New 5
Add
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -486,13 +487,13 @@ describe('Children - (JSX)', () => { } renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
New 1
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -531,12 +532,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Add
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
')); addTab.click(); - expect(container.innerHTML).to.equal('
Add
New 0
New 1
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
New 0
New 1
')); }); it('Should append child node to correct location when its empty at the beginning ', function() { @@ -579,13 +580,13 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Add
')); let addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
Add
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
Add
New 0
')); addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 0
New 1
Add
New 0
New 1
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
New 1
Add
New 0
New 1
')); }); it('Should appendx3 to correct location when it list has siblings', function() { @@ -626,10 +627,10 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
Item A
Item B
New 2
New 3
New 4
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
New 2
New 3
New 4
Add
')); }); it('Should unshiftx3 to correct location when it list has siblings', function() { @@ -670,10 +671,10 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
Item A
Item B
Add
')); const addTab = container.querySelector('#add'); addTab.click(); - expect(container.innerHTML).to.equal('
New 4
New 3
New 2
Item A
Item B
Add
'); + expect(container.innerHTML).to.equal(innerHTML('
New 4
New 3
New 2
Item A
Item B
Add
')); }); it('Inline text element before array list', function() { @@ -703,12 +704,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); _tabs.push({ title: "New " + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal('
inlineText
New 0
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
New 0
')); }); it('Inline text element after array list', function() { @@ -738,12 +739,12 @@ describe('Children - (JSX)', () => { renderIt(); - expect(container.innerHTML).to.equal('
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
inlineText
')); _tabs.push({ title: "New " + _tabs.length }); renderIt(); - expect(container.innerHTML).to.equal('
New 0
inlineText
'); + expect(container.innerHTML).to.equal(innerHTML('
New 0
inlineText
')); }); }); @@ -782,22 +783,22 @@ describe('Children - (JSX)', () => { visible = true; activeOne = items; renderIt(); - expect(container.innerHTML).to.equal('

static

a

b

c

'); + expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); visible = false; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal('

v

a

'); + expect(container.innerHTML).to.equal(innerHTML('

v

a

')); visible = true; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal('

static

v

a

'); + expect(container.innerHTML).to.equal(innerHTML('

static

v

a

')); visible = true; activeOne = emptyArray; renderIt(); - expect(container.innerHTML).to.equal('

static

'); + expect(container.innerHTML).to.equal(innerHTML('

static

')); }); it('NONKEYED - should remove children from correct location when there is 2 dynamic static items and 2 lists', function() { @@ -844,28 +845,28 @@ describe('Children - (JSX)', () => { visibleTwo = false; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal('

static

a

b

c

'); + expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); visibleOne = true; activeOne = emptyArray; visibleTwo = true; activeTwo = items; renderIt(); - expect(container.innerHTML).to.equal('

static

static

a

b

c

'); + expect(container.innerHTML).to.equal(innerHTML('

static

static

a

b

c

')); visibleOne = false; activeOne = items3; visibleTwo = false; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal('

v

a

'); + expect(container.innerHTML).to.equal(innerHTML('

v

a

')); visibleOne = true; activeOne = items; visibleTwo = true; activeTwo = emptyArray; renderIt(); - expect(container.innerHTML).to.equal('

static

a

b

c

static

'); + expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

static

')); }); it('KEYED - should remove children from correct location when there is dynamic static item', function() { @@ -903,22 +904,22 @@ describe('Children - (JSX)', () => { visible = true; activeOne = items; renderIt(); - expect(container.innerHTML).to.equal('

static

a

b

c

'); + expect(container.innerHTML).to.equal(innerHTML('

static

a

b

c

')); visible = false; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal('

v

a

'); + expect(container.innerHTML).to.equal(innerHTML('

v

a

')); visible = true; activeOne = items3; renderIt(); - expect(container.innerHTML).to.equal('

static

v

a

'); + expect(container.innerHTML).to.equal(innerHTML('

static

v

a

')); visible = true; activeOne = emptyArray; renderIt(); - expect(container.innerHTML).to.equal('

static

'); + expect(container.innerHTML).to.equal(innerHTML('

static

')); }); }); @@ -965,15 +966,15 @@ describe('Children - (JSX)', () => { } render(, container); - expect(container.innerHTML).to.equal('

1

abc

2

def

3

'); + expect(container.innerHTML).to.equal(innerHTML('

1

abc

2

def

3

')); updaterFirst(); - expect(container.innerHTML).to.equal('

1

2

def

3

'); + expect(container.innerHTML).to.equal(innerHTML('

1

2

def

3

')); updaterSecond(); - expect(container.innerHTML).to.equal('

1

2

3

'); + expect(container.innerHTML).to.equal(innerHTML('

1

2

3

')); updaterSecond(); - expect(container.innerHTML).to.equal('

1

2

def

3

'); + expect(container.innerHTML).to.equal(innerHTML('

1

2

def

3

')); updaterFirst(); - expect(container.innerHTML).to.equal('

1

abc

2

def

3

'); + expect(container.innerHTML).to.equal(innerHTML('

1

abc

2

def

3

')); }); }); @@ -1047,9 +1048,9 @@ describe('Children - (JSX)', () => { const unmountSpy = spy(B.prototype, 'componentWillUnmount'); render(}/>, container); - expect(container.innerHTML).to.equal('

B

'); + expect(container.innerHTML).to.equal(innerHTML('

B

')); render(, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); expect(unmountSpy.callCount).to.equal(1); }); }); @@ -1065,16 +1066,16 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal('
test
123
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
321
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
321
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
987
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
987
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
end
')); }); it('Should not clear nodes when keyed inside vFragment', () => { @@ -1087,16 +1088,16 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal('
test
123
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
321
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
321
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
987
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
987
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
end
')); }); it('Should not clear nodes when keyed inside vFragment #2', () => { @@ -1109,16 +1110,16 @@ describe('Children - (JSX)', () => { ); render(, container); - expect(container.innerHTML).to.equal('
test
1
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
1
end
')); render(, container); - expect(container.innerHTML).to.equal('
test
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
end
')); render(null, container); expect(container.innerHTML).to.equal(''); render(, container); - expect(container.innerHTML).to.equal('
test
123
end
'); + expect(container.innerHTML).to.equal(innerHTML('
test
123
end
')); }); }); diff --git a/src/DOM/__tests__/elements.spec.tsx b/src/DOM/__tests__/elements.spec.tsx index e5c09d61f..e8122f8b9 100644 --- a/src/DOM/__tests__/elements.spec.tsx +++ b/src/DOM/__tests__/elements.spec.tsx @@ -711,24 +711,24 @@ describe('Elements (JSX)', () => { render((
), container); - expect(container.innerHTML).to.equal('
Hello world!
'); + expect(container.innerHTML).to.equal(innerHTML('
Hello world!
')); }); it('Should not dangerously set innerHTML when previous is same as new one', () => { render((
), container); - expect(container.innerHTML).to.equal('
same
'); + expect(container.innerHTML).to.equal(innerHTML('
same
')); render((
), container); - expect(container.innerHTML).to.equal('
same
'); + expect(container.innerHTML).to.equal(innerHTML('
same
')); render((
), container); - expect(container.innerHTML).to.equal('
change
'); + expect(container.innerHTML).to.equal(innerHTML('
change
')); }); it('Should throw error if __html property is not set', () => { @@ -766,11 +766,11 @@ describe('Elements (JSX)', () => { it('mixing JSX with non-JSX', () => { render(
{createElement('div', null)}
, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); render(
{createElement('span', null)}
, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); render({createElement('div', null)}, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); }); it('should be able to construct input with Hooks, Events, Attributes defined', (done) => { @@ -813,30 +813,30 @@ describe('Elements (JSX)', () => { it('basic example ', () => { render(a, container); - expect(container.innerHTML).to.equal('
Hello world
'); + expect(container.innerHTML).to.equal(innerHTML('
Hello world
')); render(b, container); - expect(container.innerHTML).to.equal('This works!'); + expect(container.innerHTML).to.equal(innerHTML('This works!')); }); it('basic example #2 ', () => { render(
{ [a, a, a] }
, container); - expect(container.innerHTML).to.equal('
Hello world
Hello world
Hello world
'); + expect(container.innerHTML).to.equal(innerHTML('
Hello world
Hello world
Hello world
')); render(b, container); - expect(container.innerHTML).to.equal('This works!'); + expect(container.innerHTML).to.equal(innerHTML('This works!')); }); it('basic nested example ', () => { render(
{a}{b}
, container); - expect(container.innerHTML).to.equal('
Hello world
This works!
'); + expect(container.innerHTML).to.equal(innerHTML('
Hello world
This works!
')); render(
{b}{a}
, container); - expect(container.innerHTML).to.equal('
This works!
Hello world
'); + expect(container.innerHTML).to.equal(innerHTML('
This works!
Hello world
')); }); it('basic nested component example ', () => { render({a}, container); - expect(container.innerHTML).to.equal('
Hello world
Hello world
Hello world
'); + expect(container.innerHTML).to.equal(innerHTML('
Hello world
Hello world
Hello world
')); render({b}{a}, container); - expect(container.innerHTML).to.equal('
This works!
Hello world
This works!
Hello world
This works!
Hello world
'); + expect(container.innerHTML).to.equal(innerHTML('
This works!
Hello world
This works!
Hello world
This works!
Hello world
')); }); }); }); diff --git a/src/DOM/__tests__/hooks.spec.tsx b/src/DOM/__tests__/hooks.spec.tsx index c511085b1..0a35d48a4 100644 --- a/src/DOM/__tests__/hooks.spec.tsx +++ b/src/DOM/__tests__/hooks.spec.tsx @@ -1,6 +1,7 @@ import { expect } from 'chai'; import { assert, spy } from 'sinon'; import Component from 'inferno-component'; +import { innerHTML } from '../../tools/utils'; import Inferno, { render } from 'inferno'; Inferno; // suppress ts 'never used' error @@ -92,21 +93,21 @@ describe('Component lifecycle (JSX)', () => { const notCalled = assert.notCalled; render(, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); notCalled(Aspy); notCalled(Bspy); notCalled(CSpy); notCalled(DSpy); updater(); - expect(container.innerHTML).to.equal('
Terve
'); + expect(container.innerHTML).to.equal(innerHTML('
Terve
')); notCalled(Aspy); notCalled(Bspy); notCalled(CSpy); notCalled(DSpy); updater(); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); notCalled(Aspy); const calledOnce = assert.calledOnce; calledOnce(Bspy); @@ -179,21 +180,21 @@ describe('Component lifecycle (JSX)', () => { const notCalled = assert.notCalled; render(, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); notCalled(Aspy); notCalled(Bspy); notCalled(CSpy); notCalled(DSpy); updater(); - expect(container.innerHTML).to.equal('
Terve
'); + expect(container.innerHTML).to.equal(innerHTML('
Terve
')); notCalled(Aspy); notCalled(Bspy); notCalled(CSpy); notCalled(DSpy); updater(); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); notCalled(Aspy); const calledOnce = assert.calledOnce; calledOnce(Bspy); @@ -227,25 +228,25 @@ describe('Component lifecycle (JSX)', () => { const calledOnce = assert.calledOnce; render(, container); - expect(container.innerHTML).to.equal('
B
'); + expect(container.innerHTML).to.equal(innerHTML('
B
')); notCalled(Bspy); notCalled(CSpy); notCalled(DSpy); render(, container); - expect(container.innerHTML).to.equal('
C
'); + expect(container.innerHTML).to.equal(innerHTML('
C
')); calledOnce(Bspy); notCalled(CSpy); notCalled(DSpy); render(, container); - expect(container.innerHTML).to.equal('
D
'); + expect(container.innerHTML).to.equal(innerHTML('
D
')); calledOnce(Bspy); calledOnce(CSpy); notCalled(DSpy); render(, container); - expect(container.innerHTML).to.equal('
B
'); + expect(container.innerHTML).to.equal(innerHTML('
B
')); calledOnce(Bspy); calledOnce(CSpy); calledOnce(DSpy); @@ -325,7 +326,7 @@ describe('Component lifecycle (JSX)', () => { const calledOnce = assert.calledOnce; render(, container); - expect(container.innerHTML).to.equal('

B1

B2

'); + expect(container.innerHTML).to.equal(innerHTML('

B1

B2

')); notCalled(Bspy); notCalled(B1spy); notCalled(B2spy); @@ -337,7 +338,7 @@ describe('Component lifecycle (JSX)', () => { CSpy.reset(); render(, container); - expect(container.innerHTML).to.equal('

C1

C2

'); + expect(container.innerHTML).to.equal(innerHTML('

C1

C2

')); calledOnce(Bspy); calledOnce(B1spy); calledOnce(B2spy); diff --git a/src/DOM/__tests__/mixedFormElements.spec.tsx b/src/DOM/__tests__/mixedFormElements.spec.tsx index d55d90ac6..4b5a96f81 100644 --- a/src/DOM/__tests__/mixedFormElements.spec.tsx +++ b/src/DOM/__tests__/mixedFormElements.spec.tsx @@ -1,5 +1,6 @@ import { expect } from 'chai'; import Inferno, { render } from 'inferno'; +import { innerHTML } from '../../tools/utils'; Inferno; // suppress ts 'never used' error describe('HTML Form Elements', () => { @@ -16,7 +17,7 @@ describe('HTML Form Elements', () => { describe('After external change', () => { it('Should update input check property', () => { render(, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.checked).to.equal(true); // @@ -25,7 +26,7 @@ describe('HTML Form Elements', () => { const input = container.querySelector('input'); input.checked = false; - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.checked).to.equal(false); // @@ -33,7 +34,7 @@ describe('HTML Form Elements', () => { // render(, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.checked).to.equal(true); }); @@ -75,7 +76,7 @@ describe('HTML Form Elements', () => { it('Should update text input value', () => { render(, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.value).to.equal("Hey People"); // @@ -84,7 +85,7 @@ describe('HTML Form Elements', () => { const input = container.querySelector('input'); input.value = "Inferno is cool"; - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.value).to.equal("Inferno is cool"); // @@ -92,7 +93,7 @@ describe('HTML Form Elements', () => { // render(, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.value).to.equal("Hey People"); // @@ -100,7 +101,7 @@ describe('HTML Form Elements', () => { // render(, container); - expect(container.innerHTML).to.equal(''); + expect(container.innerHTML).to.equal(innerHTML('')); expect(container.firstChild.value).to.equal("Hey People again"); }); diff --git a/src/DOM/__tests__/styles.spec.browser.ts b/src/DOM/__tests__/styles.spec.browser.ts index 068736088..390f8bbda 100644 --- a/src/DOM/__tests__/styles.spec.browser.ts +++ b/src/DOM/__tests__/styles.spec.browser.ts @@ -1,6 +1,7 @@ import { render } from 'inferno'; import { style } from '../../tools/utils'; import createElement from 'inferno-create-element'; +import { innerHTML } from '../../tools/utils'; import { expect } from 'chai'; const isPhantomJS = window && window.navigator && /PhantomJS/.test(window.navigator.userAgent); @@ -426,6 +427,6 @@ describe('CSS style properties', () => { } }); render(template(), container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); }); }); diff --git a/src/DOM/__tests__/update.spec.browser.ts b/src/DOM/__tests__/update.spec.browser.ts index 89ece41ae..bcc512548 100644 --- a/src/DOM/__tests__/update.spec.browser.ts +++ b/src/DOM/__tests__/update.spec.browser.ts @@ -46,11 +46,11 @@ describe('Update (non-jsx)', () => { const span = () => createElement('span', null); render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal(''); + expect(container.firstChild.innerHTML).to.equal(innerHTML('')); render(template(null), container); expect(container.firstChild.innerHTML).to.equal(''); render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal(''); + expect(container.firstChild.innerHTML).to.equal(innerHTML('')); }); it('should insert an additional tag node', () => { @@ -60,7 +60,7 @@ describe('Update (non-jsx)', () => { render(template(null), container); expect(container.firstChild.innerHTML).to.equal(''); render(template(div()), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); }); it('should insert an additional tag node', () => { @@ -78,7 +78,7 @@ describe('Update (non-jsx)', () => { const span = () => createElement('div', null); render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); }); it('should render a node with dynamic values', () => { @@ -661,9 +661,9 @@ describe('Update (non-jsx)', () => { }; render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World!'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World!')); render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World!'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World!')); }); @@ -674,7 +674,7 @@ describe('Update (non-jsx)', () => { }; render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World!'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World!')); }); it('should update and array of text nodes to another array of text nodes', () => { @@ -684,7 +684,7 @@ describe('Update (non-jsx)', () => { }; render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World')); }); it('should update and array of text nodes to another array of text nodes #2', () => { @@ -694,9 +694,9 @@ describe('Update (non-jsx)', () => { }; render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World!'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World!')); render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('Hello World!'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('Hello World!')); }); it('should update an node with static child', () => { @@ -705,12 +705,12 @@ describe('Update (non-jsx)', () => { }))); render(template('id#1'), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); render(template('id#2'), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); render(template('id#3'), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); }); it('should update an node with static child and dynamic custom attribute', () => { @@ -722,9 +722,9 @@ describe('Update (non-jsx)', () => { }; render(template(span('id#1')), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); render(template(span('id#1')), container); - expect(container.firstChild.innerHTML).to.equal('
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
')); }); it('should update an node with static child and dynamic custom attribute and static text', () => { @@ -736,9 +736,9 @@ describe('Update (non-jsx)', () => { }; render(template(span('id#1')), container); - expect(container.firstChild.innerHTML).to.equal('
Hello!!
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello!!
')); render(template(span('id#2')), container); - expect(container.firstChild.innerHTML).to.equal('
Hello!!
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello!!
')); }); it('should update an node with static child and dynamic custom attribute and static text #2', () => { @@ -750,7 +750,7 @@ describe('Update (non-jsx)', () => { }; render(template(span('id#1')), container); - expect(container.firstChild.innerHTML).to.equal('
Hello!!
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello!!
')); }); it('should not ignore a empty text node', () => { @@ -787,12 +787,12 @@ describe('Update (non-jsx)', () => { const template = () => createElement('div', null, createElement('div', null, 'Hello, World')); render(template(), container); - expect(container.firstChild.innerHTML).to.equal('
Hello, World
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello, World
')); render(template(), container); - expect(container.firstChild.innerHTML).to.equal('
Hello, World
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello, World
')); render(template(), container); - expect(container.firstChild.innerHTML).to.equal('
Hello, World
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello, World
')); }); it('should update an node with dynamic child', () => { @@ -801,7 +801,7 @@ describe('Update (non-jsx)', () => { return createElement('span', null, 'Hello ', 'World'); }; render(template(span()), container); - expect(container.firstChild.innerHTML).to.equal('
Hello World
'); + expect(container.firstChild.innerHTML).to.equal(innerHTML('
Hello World
')); }); it('should inject dynamic text various places', () => { @@ -930,7 +930,7 @@ describe('Update (non-jsx)', () => { describe('Github #142', () => { describe('nonKeyed updates', () => { - it('variation-1', () => { + it('variation 1', () => { function A() { return createElement('div', null, createElement('div', null, createElement('table', null, createElement('tr', null, createElement('td', null, 'Text')) @@ -955,7 +955,7 @@ describe('Update (non-jsx)', () => { expect(container.innerHTML).to.equal('
text1
'); }); - it('variation -2', () => { + it('variation 2', () => { const A = createElement('div', null, createElement('div', null, createElement('table', null, createElement('tr', null, createElement('td', null, 'text', createElement('br', null)) )))); @@ -1065,7 +1065,7 @@ describe('Update (non-jsx)', () => { }); describe('KEYED updates', () => { - it('variation-1', () => { + it('variation 1', () => { function A() { return createElement('div', null, createElement('div', null, createElement('table', null, createElement('tr', { key: 'row1' }, createElement('td', { key: 'td1' }, 'Text')) @@ -1092,7 +1092,7 @@ describe('Update (non-jsx)', () => { expect(container.innerHTML).to.equal('
text1
'); }); - it('variation -2', () => { + it('variation 2', () => { const A = createElement('div', null, createElement('div', null, createElement('table', null, createElement('tr', { key: 'row1' }, createElement('td', { key: 'td1' }, ['text', createElement('br', null)])) ))); @@ -1304,11 +1304,11 @@ describe('Update (non-jsx)', () => { A[2] = createElement('div', null, 'text 4'); render(A[0], container); - expect(container.innerHTML).to.equal('
text 1
'); + expect(container.innerHTML).to.equal(innerHTML('
text 1
')); render(A[1], container); - expect(container.innerHTML).to.equal('
text 2
text 3
'); + expect(container.innerHTML).to.equal(innerHTML('
text 2
text 3
')); render(A[2], container); - expect(container.innerHTML).to.equal('
text 4
'); + expect(container.innerHTML).to.equal(innerHTML('
text 4
')); }); }); @@ -1331,11 +1331,11 @@ describe('Update (non-jsx)', () => { ); render(A[0], container); - expect(container.innerHTML).to.equal('
text 1
'); + expect(container.innerHTML).to.equal(innerHTML('
text 1
')); render(A[1], container); - expect(container.innerHTML).to.equal('
text 2
'); + expect(container.innerHTML).to.equal(innerHTML('
text 2
')); render(A[2], container); - expect(container.innerHTML).to.equal('

text 4
'); + expect(container.innerHTML).to.equal(innerHTML('

text 4
')); }); }); }); diff --git a/src/DOM/__tests__/update.spec.tsx b/src/DOM/__tests__/update.spec.tsx index 38b6c4839..18e3a2194 100644 --- a/src/DOM/__tests__/update.spec.tsx +++ b/src/DOM/__tests__/update.spec.tsx @@ -57,16 +57,16 @@ describe('Stateful Component updates', () => { // Render A const sinonSpy = spy(A.prototype, 'componentWillUnmount'); render(, container); - expect(container.innerHTML).to.equal('
A Component A
'); + expect(container.innerHTML).to.equal(innerHTML('
A Component A
')); // Render B render(, container); - expect(container.innerHTML).to.equal('
B Component B
'); + expect(container.innerHTML).to.equal(innerHTML('
B Component B
')); assert.calledOnce(sinonSpy); // componentUnMount should have been called sinonSpy.restore(); // delayed update triggers for A updatesAfromOutside(); - expect(container.innerHTML).to.equal('
B Component B
'); + expect(container.innerHTML).to.equal(innerHTML('
B Component B
')); done(); }); @@ -165,7 +165,7 @@ describe('Stateful Component updates', () => { } render(, container); - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); let firstChild = container.firstChild; expect(firstChild.childNodes[0].checked).to.equal(false); expect(firstChild.childNodes[1].checked).to.equal(false); @@ -176,7 +176,7 @@ describe('Stateful Component updates', () => { expect(firstChild.childNodes[0].checked).to.equal(true, 'USER SHOULD BE ABLE TO TICK CHECKBOX'); updateCaller(); // New render - expect(container.innerHTML).to.equal('
'); + expect(container.innerHTML).to.equal(innerHTML('
')); expect(firstChild.childNodes[0].checked).to.equal(false, 'AFTER NEW RENDER IT SHOULD RENDER INPUT AS UNCHECKED'); expect(firstChild.childNodes[1].checked).to.equal(false); @@ -278,20 +278,20 @@ describe('Stateful Component updates', () => { render(, container); - expect(container.innerHTML).to.equal('
truefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
truefalse
')); updateCaller(); - expect(container.innerHTML).to.equal('
falsefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
falsefalse
')); updateCaller(); - expect(container.innerHTML).to.equal('
truefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
truefalse
')); updateCaller(); - expect(container.innerHTML).to.equal('
falsefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
falsefalse
')); StuckChild(); - expect(container.innerHTML).to.equal('
falsetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
falsetrue
')); StuckChild(); - expect(container.innerHTML).to.equal('
falsefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
falsefalse
')); StuckChild(); - expect(container.innerHTML).to.equal('
falsetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
falsetrue
')); }); it('Should Not get stuck in UNMOUNTED state - variation2', () => { @@ -390,24 +390,24 @@ describe('Stateful Component updates', () => { render(, container); - expect(container.innerHTML).to.equal('
truefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
truefalse
')); StuckChild(); - expect(container.innerHTML).to.equal('
truetrue
', 'failed here?'); + expect(container.innerHTML).to.equal(innerHTML('
truetrue
'), 'failed here?'); StuckChild(); - expect(container.innerHTML).to.equal('
truefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
truefalse
')); StuckChild(); - expect(container.innerHTML).to.equal('
truetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
truetrue
')); updateCaller(); - expect(container.innerHTML).to.equal('
falsetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
falsetrue
')); updateCaller(); - expect(container.innerHTML).to.equal('
truetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
truetrue
')); updateCaller(); - expect(container.innerHTML).to.equal('
falsetrue
'); + expect(container.innerHTML).to.equal(innerHTML('
falsetrue
')); StuckChild(); - expect(container.innerHTML).to.equal('
falsefalse
'); + expect(container.innerHTML).to.equal(innerHTML('
falsefalse
')); }); it('Should keep order of nodes', () => { @@ -479,7 +479,7 @@ describe('Stateful Component updates', () => { } render(, container); - expect(container.innerHTML).to.equal('
    '); + expect(container.innerHTML).to.equal(innerHTML('
      ')); setItems([ { value: 'val1', text: 'key1' }, { value: 'val2', text: 'key2' }, @@ -487,13 +487,13 @@ describe('Stateful Component updates', () => { { value: 'val4', text: 'key4' } ]); - expect(container.innerHTML).to.equal('
      • DIVval1
        key1
      • SPANval2
        key2
      • DIVval3
        key3
      • SPANval4
        key4
      '); + expect(container.innerHTML).to.equal(innerHTML('
      • DIVval1
        key1
      • SPANval2
        key2
      • DIVval3
        key3
      • SPANval4
        key4
      ')); setItems([ { value: 'val2', text: 'key2' }, { value: 'val3', text: 'key3' } ]); - expect(container.innerHTML).to.equal('
      • DIVval2
        key2
      • SPANval3
        key3
      '); + expect(container.innerHTML).to.equal(innerHTML('
      • DIVval2
        key2
      • SPANval3
        key3
      ')); setItems([ { value: 'val1', text: 'key1' }, @@ -501,7 +501,7 @@ describe('Stateful Component updates', () => { { value: 'val3', text: 'key3' }, { value: 'val4', text: 'key4' } ]); - expect(container.innerHTML).to.equal('
      • DIVval1
        key1
      • SPANval2
        key2
      • DIVval3
        key3
      • SPANval4
        key4
      '); + expect(container.innerHTML).to.equal(innerHTML('
      • DIVval1
        key1
      • SPANval2
        key2
      • DIVval3
        key3
      • SPANval4
        key4
      ')); }); it('Should not crash when patching array to array with hooks', () => { @@ -534,7 +534,7 @@ describe('Stateful Component updates', () => { render(, container); updater(orig); - expect(container.innerHTML).to.equal('
      1
      '); + expect(container.innerHTML).to.equal(innerHTML('
      1
      ')); }); From a53aa470b6eeedc87d645bb8aa10c7c20b7bdc51 Mon Sep 17 00:00:00 2001 From: Alexei Bazhenov Date: Sun, 18 Dec 2016 09:06:23 -0600 Subject: [PATCH 2/2] fixed typos and duplicate docs --- docs/api/inferno-redux.md | 2 +- docs/api/inferno.md | 16 ---------------- docs/guides/get-started.md | 13 +++++++++---- 3 files changed, 10 insertions(+), 21 deletions(-) diff --git a/docs/api/inferno-redux.md b/docs/api/inferno-redux.md index f85f0c008..ef698b251 100644 --- a/docs/api/inferno-redux.md +++ b/docs/api/inferno-redux.md @@ -2,7 +2,7 @@ title: Inferno Redux --- -We understand that a lot of application in the React ecosystem use [Redux](//reduxjs.org) to manage data. Thus we have a created a port of React-Redux for Inferno to ease the process of porting an application over. +We understand that a lot of applications in the React ecosystem use [Redux](//reduxjs.org) to manage data. Thus we have created a port of React-Redux for Inferno to ease the process of porting an application over. ## `Provider` diff --git a/docs/api/inferno.md b/docs/api/inferno.md index 2408976b0..98913a08e 100644 --- a/docs/api/inferno.md +++ b/docs/api/inferno.md @@ -110,22 +110,6 @@ If a component has been mounted into the DOM, this returns the corresponding nat **Note**: we recommend using a `ref` callback on a component to find its instance, rather than using `findDOMNode`. `findDOMNode` cannot be used on functional components. -## createRenderer - -`createRenderer` allows for functional composition when rendering content to the DOM. An example of this is shown below: - -```javascript -import Inferno from 'inferno'; -import { scan, map } from 'most'; - -... -const model$ = scan(update, 0, actions$); -const vNodes$ = map(view(actions$), model$); -const renderer = Inferno.createRenderer(); -const runApp = () => scan(renderer, container, vNodes$).drain(); - -runApp(); -``` ## disableRecycling As an application changes components will be reused as they are mounted and unmounted from the DOM. By default Inferno enables *recycling* to have a pool of components which can be reused when components are mounted into the DOM. However if you wish to disable this feature you can. diff --git a/docs/guides/get-started.md b/docs/guides/get-started.md index cfe8cbb01..c14b67198 100644 --- a/docs/guides/get-started.md +++ b/docs/guides/get-started.md @@ -2,11 +2,11 @@ title: Get Started --- -There are three ways to get setup with Inferno, the simple `create-inferno-app`, installation via NPM, or using the Cloudfare CDN. +There are three ways to get setup with Inferno: using the simple `create-inferno-app`, installing via NPM, or by using the Cloudfare CDN. ## Create Inferno App -Similarly to React you can get started by using `create-inferno-app`. Make sure that you have Node installed +Similar to React's `create-react-app`, you can get started by using `create-inferno-app`. Make sure that you have Node installed ``` (sudo) npm install -g create-inferno-app @@ -18,13 +18,18 @@ npm start Then navigate to [`http://localhost:8080/`](http://localhost:8080) to view the application. ## NPM Installation -The core Inferno is packaged on NPM as `inferno`. +Inferno is packaged on NPM as `inferno`.
      `npm install inferno --save`
      -Which will set you up with the core package and everything you need to start creating components and rendering them, but you'll probably want to take a look at our [other packages]({{site.url}}/guides/architecture) for convenience. +This will set you up with the core package and everything you need to start creating components and rendering them, but you'll probably want to take a look at our [other packages]({{site.url}}/guides/architecture) for convenience. ## Cloudfare +Pre-bundled files for browser consumption can be found on [our cdnjs](https://cdnjs.com/libraries/inferno): + +``` +https://cdnjs.cloudflare.com/ajax/libs/inferno/1.0.0-beta36/inferno.min.js +``` \ No newline at end of file