Last active
October 1, 2021 08:46
-
-
Save simonihmig/1b1e72fba5a5e5dbffd1147d59c01f16 to your computer and use it in GitHub Desktop.
Test moving content around with in-element without recreating it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
test('switching the target moves existing content without new invocation - modifier', async function (assert) { | |
this.set('show', false); | |
let count = 0; | |
this.trackRender = () => count++; | |
await render(hbs` | |
<div id="p1"></div> | |
<div id="p2"></div> | |
{{#if this.show}} | |
{{#in-element this.dest insertBefore=null}} | |
<div id="content" {{did-insert this.trackRender}}>foo</div> | |
{{/in-element}} | |
{{/if}} | |
`); | |
this.set('dest', this.element.querySelector('#p1')); | |
this.set('show', true); | |
await settled(); | |
assert.dom('#p1 #content').exists(); | |
assert.dom('#p2 #content').doesNotExist(); | |
assert.equal(count, 1, 'has rendered'); | |
this.set('dest', this.element.querySelector('#p2')); | |
await settled(); | |
assert.dom('#p1 #content').doesNotExist(); | |
assert.dom('#p2 #content').exists(); | |
assert.equal(count, 1, 'should not rerender existing content'); | |
}); | |
test('switching the target moves existing content without new invocation - component', async function (assert) { | |
let count = 0; | |
class CountComponent extends Component { | |
constructor() { | |
super(...arguments); | |
count++; | |
} | |
} | |
this.owner.register('component:count', CountComponent); | |
this.set('show', false); | |
this.trackRender = () => count++; | |
await render(hbs` | |
<div id="p1"></div> | |
<div id="p2"></div> | |
{{#if this.show}} | |
{{#in-element this.dest insertBefore=null}} | |
<Count>foo</Count> | |
{{/in-element}} | |
{{/if}} | |
`); | |
this.set('dest', this.element.querySelector('#p1')); | |
this.set('show', true); | |
await settled(); | |
assert.dom('#p1').hasText('foo'); | |
assert.dom('#p2').hasNoText(); | |
assert.equal(count, 1, 'has rendered'); | |
this.set('dest', this.element.querySelector('#p2')); | |
await settled(); | |
assert.dom('#p1').hasNoText(); | |
assert.dom('#p2').hasText('foo'); | |
assert.equal(count, 1, 'should not rerender existing content'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment