From 99dfefaf425ed278783c492b509e66f2af6c4727 Mon Sep 17 00:00:00 2001 From: Joel Kang Date: Mon, 28 Mar 2016 14:04:08 -0700 Subject: [PATCH] [Glimmer2] Migrate attrs lookup tests --- .../components/attrs-lookup-test.js | 194 ++++++++++++++++++ .../tests/integration/attrs_lookup_test.js | 154 -------------- 2 files changed, 194 insertions(+), 154 deletions(-) create mode 100644 packages/ember-glimmer/tests/integration/components/attrs-lookup-test.js delete mode 100644 packages/ember-htmlbars/tests/integration/attrs_lookup_test.js diff --git a/packages/ember-glimmer/tests/integration/components/attrs-lookup-test.js b/packages/ember-glimmer/tests/integration/components/attrs-lookup-test.js new file mode 100644 index 00000000000..3aed6317c4b --- /dev/null +++ b/packages/ember-glimmer/tests/integration/components/attrs-lookup-test.js @@ -0,0 +1,194 @@ +import { RenderingTest, moduleFor } from '../../utils/test-case'; +import { Component } from '../../utils/helpers'; +import { set } from 'ember-metal/property_set'; + +moduleFor('Components test: attrs lookup', class extends RenderingTest { + + ['@test it should be able to lookup attrs without `attrs.` - template access']() { + this.registerComponent('foo-bar', { template: '{{first}}' }); + + this.render(`{{foo-bar first=firstAttr}}`, { + firstAttr: 'first attr' + }); + + this.assertText('first attr'); + + this.runTask(() => this.rerender()); + + this.assertText('first attr'); + + this.runTask(() => set(this.context, 'firstAttr', 'second attr')); + + this.assertText('second attr'); + + this.runTask(() => set(this.context, 'firstAttr', 'first attr')); + + this.assertText('first attr'); + } + + ['@test it should be able to lookup attrs without `attrs.` - component access'](assert) { + let instance; + + let FooBarComponent = Component.extend({ + init() { + this._super(...arguments); + instance = this; + } + }); + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: '{{first}}' }); + + this.render(`{{foo-bar first=firstAttr}}`, { + firstAttr: 'first attr' + }); + + assert.equal(instance.get('first'), 'first attr'); + + this.runTask(() => this.rerender()); + + assert.equal(instance.get('first'), 'first attr'); + + this.runTask(() => set(this.context, 'firstAttr', 'second attr')); + + assert.equal(instance.get('first'), 'second attr'); + + this.runTask(() => set(this.context, 'firstAttr', 'first attr')); + + this.assertText('first attr'); + } + + ['@htmlbars should be able to modify a provided attr into local state #11571 / #11559'](assert) { + let instance; + let FooBarComponent = Component.extend({ + init() { + this._super(...arguments); + instance = this; + }, + + didReceiveAttrs() { + this.set('first', this.getAttr('first').toUpperCase()); + } + }); + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent, template: '{{first}}' }); + + this.render(`{{foo-bar first=firstAttr}}`, { + firstAttr: 'first attr' + }); + + assert.equal(instance.get('first'), 'FIRST ATTR', 'component lookup uses local state'); + this.assertText('FIRST ATTR'); + + this.runTask(() => this.rerender()); + + assert.equal(instance.get('first'), 'FIRST ATTR', 'component lookup uses local state during rerender'); + this.assertText('FIRST ATTR'); + + // TODO: For some reason didReceiveAttrs is not called after this mutation occurs, + // See https://github.com/emberjs/ember.js/pull/13203 + // this.runTask(() => set(this.context, 'firstAttr', 'second attr')); + // assert.equal(instance.get('first'), 'SECOND ATTR', 'component lookup uses modified local state'); + // this.assertText('SECOND ATTR'); + + this.runTask(() => set(this.context, 'firstAttr', 'first attr')); + + assert.equal(instance.get('first'), 'FIRST ATTR', 'component lookup uses reset local state'); + this.assertText('FIRST ATTR'); + } + + ['@htmlbars should be able to access unspecified attr #12035'](assert) { + let instance; + let wootVal = 'yes'; + + let FooBarComponent = Component.extend({ + init() { + this._super(...arguments); + instance = this; + }, + + didReceiveAttrs() { + assert.equal(this.get('woot'), wootVal, 'found attr in didReceiveAttrs'); + } + }); + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent }); + + this.render(`{{foo-bar woot=woot}}`, { + woot: wootVal + }); + + assert.equal(instance.get('woot'), 'yes', 'component found attr'); + + this.runTask(() => this.rerender()); + + assert.equal(instance.get('woot'), 'yes', 'component found attr after rerender'); + + this.runTask(() => { + wootVal = 'nope'; + set(this.context, 'woot', wootVal); + }); + + assert.equal(instance.get('woot'), 'nope', 'component found attr after attr change'); + + this.runTask(() => { + wootVal = 'yes'; + set(this.context, 'woot', wootVal); + }); + + assert.equal(instance.get('woot'), 'yes', 'component found attr after reset'); + } + + ['@htmlbars getAttr() should return the same value as get()'](assert) { + assert.expect(20); + let instance; + let FooBarComponent = Component.extend({ + init() { + this._super(...arguments); + instance = this; + }, + + didReceiveAttrs() { + let rootFirst = this.get('first'); + let rootSecond = this.get('second'); + let attrFirst = this.getAttr('first'); + let attrSecond = this.getAttr('second'); + + equal(rootFirst, attrFirst, 'root property matches attrs value'); + equal(rootSecond, attrSecond, 'root property matches attrs value'); + } + }); + this.registerComponent('foo-bar', { ComponentClass: FooBarComponent }); + + this.render(`{{foo-bar first=first second=second}}`, { + first: 'first', + second: 'second' + }); + + assert.equal(instance.get('first'), 'first', 'matches known value'); + assert.equal(instance.get('second'), 'second', 'matches known value'); + + this.runTask(() => this.rerender()); + + assert.equal(instance.get('first'), 'first', 'matches known value'); + assert.equal(instance.get('second'), 'second', 'matches known value'); + + this.runTask(() => { + set(this.context, 'first', 'third'); + }); + + assert.equal(instance.get('first'), 'third', 'matches known value'); + assert.equal(instance.get('second'), 'second', 'matches known value'); + + this.runTask(() => { + set(this.context, 'second', 'fourth'); + }); + + assert.equal(instance.get('first'), 'third', 'matches known value'); + assert.equal(instance.get('second'), 'fourth', 'matches known value'); + + this.runTask(() => { + set(this.context, 'first', 'first'); + set(this.context, 'second', 'second'); + }); + + assert.equal(instance.get('first'), 'first', 'matches known value'); + assert.equal(instance.get('second'), 'second', 'matches known value'); + } +}); diff --git a/packages/ember-htmlbars/tests/integration/attrs_lookup_test.js b/packages/ember-htmlbars/tests/integration/attrs_lookup_test.js deleted file mode 100644 index c4d90408cec..00000000000 --- a/packages/ember-htmlbars/tests/integration/attrs_lookup_test.js +++ /dev/null @@ -1,154 +0,0 @@ -import compile from 'ember-template-compiler/system/compile'; -import ComponentLookup from 'ember-views/component_lookup'; -import Component from 'ember-views/components/component'; -import { runAppend, runDestroy } from 'ember-runtime/tests/utils'; -import EmberView from 'ember-views/views/view'; -import run from 'ember-metal/run_loop'; - -import buildOwner from 'container/tests/test-helpers/build-owner'; -import { OWNER } from 'container/owner'; - -var owner, view; - -import isEnabled from 'ember-metal/features'; -if (!isEnabled('ember-glimmer')) { - // jscs:disable - -QUnit.module('component - attrs lookup', { - setup() { - owner = buildOwner(); - owner.registerOptionsForType('component', { singleton: false }); - owner.registerOptionsForType('view', { singleton: false }); - owner.registerOptionsForType('template', { instantiate: false }); - owner.register('component-lookup:main', ComponentLookup); - }, - - teardown() { - runDestroy(owner); - runDestroy(view); - owner = view = null; - } -}); - -QUnit.test('should be able to lookup attrs without `attrs.` - template access', function() { - owner.register('template:components/foo-bar', compile('{{first}}')); - - view = EmberView.extend({ - [OWNER]: owner, - template: compile('{{foo-bar first="first attr"}}') - }).create(); - - runAppend(view); - - equal(view.$().text(), 'first attr'); -}); - -QUnit.test('should be able to lookup attrs without `attrs.` - component access', function() { - var component; - - owner.register('component:foo-bar', Component.extend({ - init() { - this._super(...arguments); - component = this; - } - })); - - view = EmberView.extend({ - [OWNER]: owner, - template: compile('{{foo-bar first="first attr"}}') - }).create(); - - runAppend(view); - - equal(component.get('first'), 'first attr'); -}); - -QUnit.test('should be able to modify a provided attr into local state #11571 / #11559', function() { - var component; - - owner.register('component:foo-bar', Component.extend({ - init() { - this._super(...arguments); - component = this; - }, - - didReceiveAttrs() { - this.set('first', this.getAttr('first').toUpperCase()); - } - })); - owner.register('template:components/foo-bar', compile('{{first}}')); - - view = EmberView.extend({ - [OWNER]: owner, - template: compile('{{foo-bar first="first attr"}}') - }).create(); - - runAppend(view); - - equal(view.$().text(), 'FIRST ATTR', 'template lookup uses local state'); - equal(component.get('first'), 'FIRST ATTR', 'component lookup uses local state'); -}); - -QUnit.test('should be able to access unspecified attr #12035', function() { - var component; - - owner.register('component:foo-bar', Component.extend({ - init() { - this._super(...arguments); - component = this; - }, - - didReceiveAttrs() { - equal(this.get('woot'), 'yes', 'found attr in didReceiveAttrs'); - } - })); - // owner.register('template:components/foo-bar', compile('{{first}}')); - - view = EmberView.extend({ - [OWNER]: owner, - template: compile('{{foo-bar woot="yes"}}') - }).create(); - - runAppend(view); - - // equal(view.$().text(), 'FIRST ATTR', 'template lookup uses local state'); - equal(component.get('woot'), 'yes', 'component found attr'); -}); - -QUnit.test('should not need to call _super in `didReceiveAttrs` (GH #11992)', function() { - expect(12); - var firstValue = 'first'; - var secondValue = 'second'; - - owner.register('component:foo-bar', Component.extend({ - didReceiveAttrs() { - let rootFirst = this.get('first'); - let rootSecond = this.get('second'); - let attrFirst = this.getAttr('first'); - let attrSecond = this.getAttr('second'); - - equal(rootFirst, attrFirst, 'root property matches attrs value'); - equal(rootSecond, attrSecond, 'root property matches attrs value'); - - equal(rootFirst, firstValue, 'matches known value'); - equal(rootSecond, secondValue, 'matches known value'); - } - })); - - view = EmberView.extend({ - [OWNER]: owner, - first: firstValue, - second: secondValue, - template: compile('{{foo-bar first=view.first second=view.second}}') - }).create(); - - runAppend(view); - - firstValue = 'asdf'; - run(view, 'set', 'first', firstValue); - - secondValue = 'jkl;'; - run(view, 'set', 'second', secondValue); -}); - -}