From bd03f06aac2363acaea9995280c1b8101a99bcd8 Mon Sep 17 00:00:00 2001 From: beatle Date: Wed, 6 Apr 2016 22:12:02 +0300 Subject: [PATCH] [Glimmer2] Add missing I-N-U-R steps for `get` helper test --- .../ember-glimmer/lib/utils/references.js | 1 + .../tests/integration/helpers/get-test.js | 232 ++++++++++++++---- 2 files changed, 186 insertions(+), 47 deletions(-) diff --git a/packages/ember-glimmer/lib/utils/references.js b/packages/ember-glimmer/lib/utils/references.js index 86a2d71d635..3b51960afc5 100644 --- a/packages/ember-glimmer/lib/utils/references.js +++ b/packages/ember-glimmer/lib/utils/references.js @@ -53,6 +53,7 @@ export class UpdatableReference extends RootReference { } } +// @implements PathReference export class GetHelperReference { constructor(sourceReference, pathReference) { this.sourceReference = sourceReference; diff --git a/packages/ember-glimmer/tests/integration/helpers/get-test.js b/packages/ember-glimmer/tests/integration/helpers/get-test.js index ce8b572b92b..35047a6f940 100644 --- a/packages/ember-glimmer/tests/integration/helpers/get-test.js +++ b/packages/ember-glimmer/tests/integration/helpers/get-test.js @@ -1,14 +1,14 @@ import { RenderingTest, moduleFor } from '../../utils/test-case'; import { set } from 'ember-metal/property_set'; import { get } from 'ember-metal/property_get'; -import EmberObject from 'ember-runtime/system/object'; import TextField from 'ember-views/views/text_field'; import Component from 'ember-views/components/component'; moduleFor('Helpers test: {{get}}', class extends RenderingTest { + ['@test should be able to get an object value with a static key']() { this.render(`[{{get colors 'apple'}}] [{{if true (get colors 'apple')}}]`, { - colors: { apple: 'red', banana: 'yellow' } + colors: { apple: 'red' } }); this.assertText('[red] [red]'); @@ -17,16 +17,24 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { this.assertText('[red] [red]'); + this.runTask(() => set(this.context, 'colors.apple', 'green')); + + this.assertText('[green] [green]'); + this.runTask(() => set(this.context, 'colors', { - apple: 'green', banana: 'purple' + apple: 'red' })); - this.assertText('[green] [green]'); + this.assertText('[red] [red]'); } ['@test should be able to get an object value with nested static key']() { this.render(`[{{get colors "apple.gala"}}] [{{if true (get colors "apple.gala")}}]`, { - colors: { apple: { gala: 'red and yellow' }, banana: 'yellow' } + colors: { + apple: { + gala: 'red and yellow' + } + } }); this.assertText('[red and yellow] [red and yellow]'); @@ -35,15 +43,13 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { this.assertText('[red and yellow] [red and yellow]'); - this.runTask(() => set(this.context, 'colors', { - apple: { gala: 'yellow and red striped' }, banana: 'purple' - })); + this.runTask(() => set(this.context, 'colors.apple.gala', 'yellow and red striped')); this.assertText('[yellow and red striped] [yellow and red striped]'); - this.runTask(() => set(this.context, 'colors.apple.gala', 'yellow-redish')); + this.runTask(() => set(this.context, 'colors', { apple: { gala: 'red and yellow' } })); - this.assertText('[yellow-redish] [yellow-redish]'); + this.assertText('[red and yellow] [red and yellow]'); } ['@test should be able to get an object value with a bound/dynamic key']() { @@ -51,21 +57,30 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { colors: { apple: 'red', banana: 'yellow' }, key: 'apple' }); + + this.assertText('[red] [red]'); + + this.runTask(() => this.rerender()); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'key', 'banana')); + this.assertText('[yellow] [yellow]'); - this.runTask(() => set(this.context, 'colors', { - apple: 'green', - banana: 'purple' - })); + this.runTask(() => { + set(this.context, 'colors.apple', 'green'); + set(this.context, 'colors.banana', 'purple'); + }); + this.assertText('[purple] [purple]'); this.runTask(() => set(this.context, 'key', 'apple')); + this.assertText('[green] [green]'); - this.runTask(() => set(this.context, 'colors.apple', 'red')); + this.runTask(() => set(this.context, 'colors', { apple: 'red' })); + this.assertText('[red] [red]'); } @@ -80,13 +95,24 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { }, key: 'apple.gala' }); + + this.assertText('[red and yellow] [red and yellow]'); + + this.runTask(() => this.rerender()); + this.assertText('[red and yellow] [red and yellow]'); this.runTask(() => set(this.context, 'key', 'apple.mcintosh')); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'key', 'banana')); + this.assertText('[yellow] [yellow]'); + + this.runTask(() => set(this.context, 'key', 'apple.gala')); + + this.assertText('[red and yellow] [red and yellow]'); } ['@test should be able to get an object value with subexpression returning nested key']() { @@ -95,42 +121,70 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { apple: { gala: 'red and yellow', mcintosh: 'red' - }, - banana: 'yellow' + } }, key: 'apple.gala' }); + + this.assertText('[red and yellow] [red and yellow]'); + + this.runTask(() => this.rerender()); + this.assertText('[red and yellow] [red and yellow]'); - this.runTask(() => set(this.context, 'colors', { apple: { gala: 'yellow and red striped' }, banana: 'purple' })); + this.runTask(() => set(this.context, 'colors.apple.gala', 'yellow and red striped')); + this.assertText('[yellow and red striped] [yellow and red striped]'); this.runTask(() => set(this.context, 'colors.apple.gala', 'yellow-redish')); + this.assertText('[yellow-redish] [yellow-redish]'); + + this.runTask(() => set(this.context, 'colors', { + apple: { + gala: 'red and yellow', + mcintosh: 'red' + } + }) + ); + + this.assertText('[red and yellow] [red and yellow]'); } - ['@test should be able to get an object value with a GetStream key']() { + ['@test should be able to get an object value with a get helper as the key']() { this.render(`[{{get colors (get possibleKeys key)}}] [{{if true (get colors (get possibleKeys key))}}]`, { colors: { apple: 'red', banana: 'yellow' }, key: 'key1', possibleKeys: { key1: 'apple', key2: 'banana' } }); + + this.assertText('[red] [red]'); + + this.runTask(() => this.rerender()); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'key', 'key2')); + this.assertText('[yellow] [yellow]'); - this.runTask(() => set(this.context, 'colors', { apple: 'green', banana: 'purple' })); + this.runTask(() => { + set(this.context, 'colors.apple', 'green'); + set(this.context, 'colors.banana', 'purple'); + }); + this.assertText('[purple] [purple]'); this.runTask(() => set(this.context, 'key', 'key1')); + this.assertText('[green] [green]'); - this.runTask(() => set(this.context, 'colors.apple', 'red')); + this.runTask(() => set(this.context, 'colors', { apple: 'red', banana: 'yellow' })); + this.assertText('[red] [red]'); } - ['@test should be able to get an object value with a GetStream value and bound/dynamic key']() { + ['@test should be able to get an object value with a get helper value as a bound/dynamic key']() { this.render(`[{{get (get possibleValues objectKey) key}}] [{{if true (get (get possibleValues objectKey) key)}}]`, { possibleValues: { colors1: { apple: 'red', banana: 'yellow' }, @@ -139,25 +193,37 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { objectKey: 'colors1', key: 'apple' }); + + this.assertText('[red] [red]'); + + this.runTask(() => this.rerender()); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'objectKey', 'colors2')); + this.assertText('[green] [green]'); this.runTask(() => set(this.context, 'objectKey', 'colors1')); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'key', 'banana')); + this.assertText('[yellow] [yellow]'); this.runTask(() => set(this.context, 'objectKey', 'colors2')); + this.assertText('[purple] [purple]'); this.runTask(() => set(this.context, 'objectKey', 'colors1')); + this.assertText('[yellow] [yellow]'); + + this.runTask(() => set(this.context, 'key', 'apple')); } - ['@test should be able to get an object value with a GetStream value and GetStream key']() { + ['@test should be able to get an object value with a get helper as the value and a get helper as the key']() { this.render(`[{{get (get possibleValues objectKey) (get possibleKeys key)}}] [{{if true (get (get possibleValues objectKey) (get possibleKeys key))}}]`, { possibleValues: { colors1: { apple: 'red', banana: 'yellow' }, @@ -170,25 +236,38 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { }, key: 'key1' }); + + this.assertText('[red] [red]'); + + this.runTask(() => this.rerender()); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'objectKey', 'colors2')); + this.assertText('[green] [green]'); this.runTask(() => set(this.context, 'objectKey', 'colors1')); + this.assertText('[red] [red]'); this.runTask(() => set(this.context, 'key', 'key2')); + this.assertText('[yellow] [yellow]'); this.runTask(() => set(this.context, 'objectKey', 'colors2')); + this.assertText('[purple] [purple]'); - this.runTask(() => set(this.context, 'objectKey', 'colors1')); - this.assertText('[yellow] [yellow]'); + this.runTask(() => { + set(this.context, 'objectKey', 'colors1'); + set(this.context, 'key', 'key1'); + }); + + this.assertText('[red] [red]'); } - ['@test should yield `get`']() { + ['@test the result of a get helper can be yielded']() { let fooBarInstance; let FooBarComponent = Component.extend({ init() { @@ -212,18 +291,21 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { this.assertText('banana'); this.runTask(() => this.rerender()); + this.assertText('banana'); this.runTask(() => { set(fooBarInstance, 'mcintosh', 'yellow'); set(this.context, 'colors', { yellow: 'bus' }); }); + this.assertText('bus'); this.runTask(() => { set(fooBarInstance, 'mcintosh', 'red'); set(this.context, 'colors', { red: 'banana' }); }); + this.assertText('banana'); } @@ -231,12 +313,43 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { this.render(`[{{get colors 'apple'}}] [{{if true (get colors 'apple')}}]`, { colors: null }); + + this.assertText('[] []'); + + this.runTask(() => this.rerender()); + this.assertText('[] []'); this.runTask(() => set(this.context, 'colors', { apple: 'green', banana: 'purple' })); + this.assertText('[green] [green]'); this.runTask(() => set(this.context, 'colors', null)); + + this.assertText('[] []'); + } + + ['@htmlbars should handle object keys as nulls']() { + this.render(`[{{get colors key}}] [{{if true (get colors key)}}]`, { + colors: { + apple: 'red', + banana: 'yellow' + }, + key: null + }); + + this.assertText('[] []'); + + this.runTask(() => this.rerender()); + + this.assertText('[] []'); + + this.runTask(() => set(this.context, 'key', 'banana')); + + this.assertText('[yellow] [yellow]'); + + this.runTask(() => set(this.context, 'key', null)); + this.assertText('[] []'); } @@ -245,23 +358,29 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { colors: null, key: null }); + this.assertText('[] []'); } - ['@htmlbars get helper value should be updatable using {{input}} and (mut) - dynamic key']() { + ['@htmlbars get helper value should be updatable using {{input}} and (mut) - dynamic key'](assert) { this.registerComponent('-text-field', { ComponentClass: TextField }); this.render(`{{input type='text' value=(mut (get source key)) id='get-input'}}`, { - source: EmberObject.create({ + source: { banana: 'banana' - }), + }, key: 'banana' }); - this.assert.strictEqual(this.$('#get-input').val(), 'banana'); + assert.strictEqual(this.$('#get-input').val(), 'banana'); + + this.runTask(() => this.rerender()); + + assert.strictEqual(this.$('#get-input').val(), 'banana'); this.runTask(() => set(this.context, 'source.banana', 'yellow')); - this.assert.strictEqual(this.$('#get-input').val(), 'yellow'); + + assert.strictEqual(this.$('#get-input').val(), 'yellow'); this.runTask(() => { this.$('#get-input').val('some value'); @@ -277,60 +396,79 @@ moduleFor('Helpers test: {{get}}', class extends RenderingTest { this.component.childViews[0]._elementValueDidChange(); }); - this.assert.strictEqual(this.$('#get-input').val(), 'some value'); - this.assert.strictEqual(get(this.context, 'source.banana'), 'some value'); + assert.strictEqual(this.$('#get-input').val(), 'some value'); + assert.strictEqual(get(this.context, 'source.banana'), 'some value'); + + this.runTask(() => set(this.context, 'source', { banana: 'banana' })); + + assert.strictEqual(this.$('#get-input').val(), 'banana'); } - ['@htmlbars get helper value should be updatable using {{input}} and (mut) - dynamic nested key']() { + ['@htmlbars get helper value should be updatable using {{input}} and (mut) - dynamic nested key'](assert) { this.registerComponent('-text-field', { ComponentClass: TextField }); this.render(`{{input type='text' value=(mut (get source key)) id='get-input'}}`, { - source: EmberObject.create({ + source: { apple: { mcintosh: 'mcintosh' } - }), + }, key: 'apple.mcintosh' }); + assert.strictEqual(this.$('#get-input').val(), 'mcintosh'); + + this.runTask(() => this.rerender()); - this.assert.strictEqual(this.$('#get-input').val(), 'mcintosh'); + assert.strictEqual(this.$('#get-input').val(), 'mcintosh'); this.runTask(() => set(this.context, 'source.apple.mcintosh', 'red')); - this.assert.strictEqual(this.$('#get-input').val(), 'red'); + assert.strictEqual(this.$('#get-input').val(), 'red'); this.runTask(() => { this.$('#get-input').val('some value'); this.component.childViews[0]._elementValueDidChange(); }); - this.assert.strictEqual(this.$('#get-input').val(), 'some value'); - this.assert.strictEqual(get(this.context, 'source.apple.mcintosh'), 'some value'); + assert.strictEqual(this.$('#get-input').val(), 'some value'); + assert.strictEqual(get(this.context, 'source.apple.mcintosh'), 'some value'); + + this.runTask(() => set(this.context, 'source', { apple: { mcintosh: 'mcintosh' } })); + + assert.strictEqual(this.$('#get-input').val(), 'mcintosh'); } - ['@htmlbars get helper value should be updatable using {{input}} and (mut) - static key']() { + ['@htmlbars get helper value should be updatable using {{input}} and (mut) - static key'](assert) { this.registerComponent('-text-field', { ComponentClass: TextField }); this.render(`{{input type='text' value=(mut (get source 'banana')) id='get-input'}}`, { - source: EmberObject.create({ + source: { banana: 'banana' - }), + }, key: 'banana' }); - this.assert.strictEqual(this.$('#get-input').val(), 'banana'); + assert.strictEqual(this.$('#get-input').val(), 'banana'); + + this.runTask(() => this.rerender()); + + assert.strictEqual(this.$('#get-input').val(), 'banana'); this.runTask(() => set(this.context, 'context.source.banana', 'yellow')); - this.assert.strictEqual(this.$('#get-input').val(), 'yellow'); + assert.strictEqual(this.$('#get-input').val(), 'yellow'); this.runTask(() => { this.$('#get-input').val('some value'); this.component.childViews[0]._elementValueDidChange(); }); - this.assert.strictEqual(this.$('#get-input').val(), 'some value'); - this.assert.strictEqual(get(this.context, 'source.banana'), 'some value'); + assert.strictEqual(this.$('#get-input').val(), 'some value'); + assert.strictEqual(get(this.context, 'source.banana'), 'some value'); + + this.runTask(() => set(this.context, 'source', { banana: 'banana' })); + + assert.strictEqual(this.$('#get-input').val(), 'banana'); } });