From 14dc2fe2287292874f771113c4a35ca803ad67f7 Mon Sep 17 00:00:00 2001 From: Robert Jackson Date: Thu, 27 Feb 2020 20:49:26 -0500 Subject: [PATCH] Fix tests failing when enabling template-only-glimmer-components. These tests were attempting to modify the `ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS` value at runtime, but load different code when it is and isn't set. So now that the test suite is setting `template-only-glimmer-components` when the Ember code loads we can no longer "fake" these tests. However, the changes to the test runner mean that we still test this both on and off so we are not loosing coverage. --- .../template-only-components-test.js | 356 +++++++++--------- 1 file changed, 168 insertions(+), 188 deletions(-) diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/template-only-components-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/template-only-components-test.js index aa9afc0b2d2..0c08240dbd7 100644 --- a/packages/@ember/-internals/glimmer/tests/integration/components/template-only-components-test.js +++ b/packages/@ember/-internals/glimmer/tests/integration/components/template-only-components-test.js @@ -15,276 +15,256 @@ class TemplateOnlyComponentsTest extends RenderingTestCase { } } -moduleFor( - 'Components test: template-only components (glimmer components)', - class extends TemplateOnlyComponentsTest { - constructor() { - super(...arguments); - this._TEMPLATE_ONLY_GLIMMER_COMPONENTS = ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS; - ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = true; - } +if (ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS) { + moduleFor( + 'Components test: template-only components (glimmer components)', + class extends TemplateOnlyComponentsTest { + ['@test it can render a template-only component']() { + this.registerTemplateOnlyComponent('foo-bar', 'hello'); - teardown() { - super.teardown(); - ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = this._TEMPLATE_ONLY_GLIMMER_COMPONENTS; - } + this.render('{{foo-bar}}'); - ['@test it can render a template-only component']() { - this.registerTemplateOnlyComponent('foo-bar', 'hello'); + this.assertInnerHTML('hello'); - this.render('{{foo-bar}}'); + this.assertStableRerender(); + } - this.assertInnerHTML('hello'); + ['@test it can render named arguments']() { + this.registerTemplateOnlyComponent('foo-bar', '|{{@foo}}|{{@bar}}|'); - this.assertStableRerender(); - } + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', + bar: 'bar', + }); - ['@test it can render named arguments']() { - this.registerTemplateOnlyComponent('foo-bar', '|{{@foo}}|{{@bar}}|'); + this.assertInnerHTML('|foo|bar|'); - this.render('{{foo-bar foo=foo bar=bar}}', { - foo: 'foo', - bar: 'bar', - }); + this.assertStableRerender(); - this.assertInnerHTML('|foo|bar|'); + runTask(() => this.context.set('foo', 'FOO')); - this.assertStableRerender(); + this.assertInnerHTML('|FOO|bar|'); - runTask(() => this.context.set('foo', 'FOO')); + runTask(() => this.context.set('bar', 'BAR')); - this.assertInnerHTML('|FOO|bar|'); + this.assertInnerHTML('|FOO|BAR|'); - runTask(() => this.context.set('bar', 'BAR')); + runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); - this.assertInnerHTML('|FOO|BAR|'); + this.assertInnerHTML('|foo|bar|'); + } - runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + ['@test it does not reflected arguments as properties']() { + this.registerTemplateOnlyComponent('foo-bar', '|{{foo}}|{{this.bar}}|'); - this.assertInnerHTML('|foo|bar|'); - } + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', + bar: 'bar', + }); - ['@test it does not reflected arguments as properties']() { - this.registerTemplateOnlyComponent('foo-bar', '|{{foo}}|{{this.bar}}|'); + this.assertInnerHTML('|||'); - this.render('{{foo-bar foo=foo bar=bar}}', { - foo: 'foo', - bar: 'bar', - }); + this.assertStableRerender(); - this.assertInnerHTML('|||'); + runTask(() => this.context.set('foo', 'FOO')); - this.assertStableRerender(); + this.assertInnerHTML('|||'); - runTask(() => this.context.set('foo', 'FOO')); + runTask(() => this.context.set('bar', null)); - this.assertInnerHTML('|||'); + this.assertInnerHTML('|||'); - runTask(() => this.context.set('bar', null)); + runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); - this.assertInnerHTML('|||'); + this.assertInnerHTML('|||'); + } - runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + ['@test it does not have curly component features']() { + this.registerTemplateOnlyComponent('foo-bar', 'hello'); - this.assertInnerHTML('|||'); - } + this.render('{{foo-bar tagName="p" class=class}}', { + class: 'foo bar', + }); - ['@test it does not have curly component features']() { - this.registerTemplateOnlyComponent('foo-bar', 'hello'); + this.assertInnerHTML('hello'); - this.render('{{foo-bar tagName="p" class=class}}', { - class: 'foo bar', - }); + this.assertStableRerender(); - this.assertInnerHTML('hello'); + runTask(() => this.context.set('class', 'foo')); - this.assertStableRerender(); + this.assertInnerHTML('hello'); - runTask(() => this.context.set('class', 'foo')); + runTask(() => this.context.set('class', null)); - this.assertInnerHTML('hello'); + this.assertInnerHTML('hello'); - runTask(() => this.context.set('class', null)); + runTask(() => this.context.set('class', 'foo bar')); - this.assertInnerHTML('hello'); + this.assertInnerHTML('hello'); + } - runTask(() => this.context.set('class', 'foo bar')); + ['@test it has the correct bounds']() { + this.registerTemplateOnlyComponent('foo-bar', 'hello'); - this.assertInnerHTML('hello'); - } + this.render('outside {{#if this.isShowing}}before {{foo-bar}} after{{/if}} outside', { + isShowing: true, + }); - ['@test it has the correct bounds']() { - this.registerTemplateOnlyComponent('foo-bar', 'hello'); + this.assertInnerHTML('outside before hello after outside'); - this.render('outside {{#if this.isShowing}}before {{foo-bar}} after{{/if}} outside', { - isShowing: true, - }); + this.assertStableRerender(); - this.assertInnerHTML('outside before hello after outside'); + runTask(() => this.context.set('isShowing', false)); - this.assertStableRerender(); + this.assertInnerHTML('outside outside'); - runTask(() => this.context.set('isShowing', false)); + runTask(() => this.context.set('isShowing', null)); - this.assertInnerHTML('outside outside'); + this.assertInnerHTML('outside outside'); - runTask(() => this.context.set('isShowing', null)); + runTask(() => this.context.set('isShowing', true)); - this.assertInnerHTML('outside outside'); + this.assertInnerHTML('outside before hello after outside'); + } - runTask(() => this.context.set('isShowing', true)); + ['@test asserts when a shared dependency is changed during rendering, and keeps original context']() { + this.registerComponent('x-outer', { + ComponentClass: Component.extend({ + value: 1, + wrapper: EmberObject.create({ content: null }), + }), + template: + '
{{x-inner-template-only value=this.wrapper.content wrapper=wrapper}}
{{x-inner value=value wrapper=wrapper}}', + }); - this.assertInnerHTML('outside before hello after outside'); - } + this.registerComponent('x-inner', { + ComponentClass: Component.extend({ + didReceiveAttrs() { + this.get('wrapper').set('content', this.get('value')); + }, + value: null, + }), + template: '
{{wrapper.content}}
', + }); - ['@test asserts when a shared dependency is changed during rendering, and keeps original context']() { - this.registerComponent('x-outer', { - ComponentClass: Component.extend({ - value: 1, - wrapper: EmberObject.create({ content: null }), - }), - template: - '
{{x-inner-template-only value=this.wrapper.content wrapper=wrapper}}
{{x-inner value=value wrapper=wrapper}}', - }); - - this.registerComponent('x-inner', { - ComponentClass: Component.extend({ - didReceiveAttrs() { - this.get('wrapper').set('content', this.get('value')); - }, - value: null, - }), - template: '
{{wrapper.content}}
', - }); - - this.registerTemplateOnlyComponent('x-inner-template-only', '{{@value}}'); - - let expectedBacktrackingMessage = backtrackingMessageFor('content', '<.+?>', { - renderTree: ['x-outer', 'this.wrapper.content'], - }); - - expectAssertion(() => { - this.render('{{x-outer}}'); - }, expectedBacktrackingMessage); - } - } -); - -moduleFor( - 'Components test: template-only components (curly components)', - class extends TemplateOnlyComponentsTest { - constructor() { - super(...arguments); - this._TEMPLATE_ONLY_GLIMMER_COMPONENTS = ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS; - ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = false; - } + this.registerTemplateOnlyComponent('x-inner-template-only', '{{@value}}'); - teardown() { - super.teardown(); - ENV._TEMPLATE_ONLY_GLIMMER_COMPONENTS = this._TEMPLATE_ONLY_GLIMMER_COMPONENTS; - } + let expectedBacktrackingMessage = backtrackingMessageFor('content', '<.+?>', { + renderTree: ['x-outer', 'this.wrapper.content'], + }); - ['@test it can render a template-only component']() { - this.registerTemplateOnlyComponent('foo-bar', 'hello'); + expectAssertion(() => { + this.render('{{x-outer}}'); + }, expectedBacktrackingMessage); + } + } + ); +} else { + moduleFor( + 'Components test: template-only components (curly components)', + class extends TemplateOnlyComponentsTest { + ['@test it can render a template-only component']() { + this.registerTemplateOnlyComponent('foo-bar', 'hello'); - this.render('{{foo-bar}}'); + this.render('{{foo-bar}}'); - this.assertComponentElement(this.firstChild, { content: 'hello' }); + this.assertComponentElement(this.firstChild, { content: 'hello' }); - this.assertStableRerender(); - } + this.assertStableRerender(); + } - ['@test it can render named arguments']() { - this.registerTemplateOnlyComponent('foo-bar', '|{{@foo}}|{{@bar}}|'); + ['@test it can render named arguments']() { + this.registerTemplateOnlyComponent('foo-bar', '|{{@foo}}|{{@bar}}|'); - this.render('{{foo-bar foo=foo bar=bar}}', { - foo: 'foo', - bar: 'bar', - }); + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', + bar: 'bar', + }); - this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); - this.assertStableRerender(); + this.assertStableRerender(); - runTask(() => this.context.set('foo', 'FOO')); + runTask(() => this.context.set('foo', 'FOO')); - this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); + this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); - runTask(() => this.context.set('bar', 'BAR')); + runTask(() => this.context.set('bar', 'BAR')); - this.assertComponentElement(this.firstChild, { content: '|FOO|BAR|' }); + this.assertComponentElement(this.firstChild, { content: '|FOO|BAR|' }); - runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); - this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); - } + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + } - ['@test it renders named arguments as reflected properties']() { - this.registerTemplateOnlyComponent('foo-bar', '|{{foo}}|{{this.bar}}|'); + ['@test it renders named arguments as reflected properties']() { + this.registerTemplateOnlyComponent('foo-bar', '|{{foo}}|{{this.bar}}|'); - this.render('{{foo-bar foo=foo bar=bar}}', { - foo: 'foo', - bar: 'bar', - }); + this.render('{{foo-bar foo=foo bar=bar}}', { + foo: 'foo', + bar: 'bar', + }); - this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); - this.assertStableRerender(); + this.assertStableRerender(); - runTask(() => this.context.set('foo', 'FOO')); + runTask(() => this.context.set('foo', 'FOO')); - this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); + this.assertComponentElement(this.firstChild, { content: '|FOO|bar|' }); - runTask(() => this.context.set('bar', null)); + runTask(() => this.context.set('bar', null)); - this.assertComponentElement(this.firstChild, { content: '|FOO||' }); + this.assertComponentElement(this.firstChild, { content: '|FOO||' }); - runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); + runTask(() => this.context.setProperties({ foo: 'foo', bar: 'bar' })); - this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); - } + this.assertComponentElement(this.firstChild, { content: '|foo|bar|' }); + } - ['@test it has curly component features']() { - this.registerTemplateOnlyComponent('foo-bar', 'hello'); + ['@test it has curly component features']() { + this.registerTemplateOnlyComponent('foo-bar', 'hello'); - this.render('{{foo-bar tagName="p" class=class}}', { - class: 'foo bar', - }); + this.render('{{foo-bar tagName="p" class=class}}', { + class: 'foo bar', + }); - this.assertComponentElement(this.firstChild, { - tagName: 'p', - attrs: { class: classes('foo bar ember-view') }, - content: 'hello', - }); + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo bar ember-view') }, + content: 'hello', + }); - this.assertStableRerender(); + this.assertStableRerender(); - runTask(() => this.context.set('class', 'foo')); + runTask(() => this.context.set('class', 'foo')); - this.assertComponentElement(this.firstChild, { - tagName: 'p', - attrs: { class: classes('foo ember-view') }, - content: 'hello', - }); + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo ember-view') }, + content: 'hello', + }); - runTask(() => this.context.set('class', null)); + runTask(() => this.context.set('class', null)); - this.assertComponentElement(this.firstChild, { - tagName: 'p', - attrs: { class: classes('ember-view') }, - content: 'hello', - }); + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('ember-view') }, + content: 'hello', + }); - runTask(() => this.context.set('class', 'foo bar')); + runTask(() => this.context.set('class', 'foo bar')); - this.assertComponentElement(this.firstChild, { - tagName: 'p', - attrs: { class: classes('foo bar ember-view') }, - content: 'hello', - }); + this.assertComponentElement(this.firstChild, { + tagName: 'p', + attrs: { class: classes('foo bar ember-view') }, + content: 'hello', + }); + } } - } -); + ); +} if (EMBER_GLIMMER_SET_COMPONENT_TEMPLATE) { moduleFor(