diff --git a/packages/@glimmer-workspace/integration-tests/test/updating-test.ts b/packages/@glimmer-workspace/integration-tests/test/updating-test.ts index 46f2c627834..3f6eeff4b83 100644 --- a/packages/@glimmer-workspace/integration-tests/test/updating-test.ts +++ b/packages/@glimmer-workspace/integration-tests/test/updating-test.ts @@ -7,6 +7,7 @@ import { createComputeRef, createConstRef, createPrimitiveRef } from '@glimmer/r import { consumeTag, createTag, dirtyTag } from '@glimmer/validator'; import { assertNodeTagName, + defineComponent, getElementByClassName, getElementsByTagName, GlimmerishComponent, @@ -15,6 +16,7 @@ import { stripTight, test, tracked, + trackedObj, trimLines, } from '@glimmer-workspace/integration-tests'; @@ -792,6 +794,77 @@ class UpdatingTest extends RenderTest { this.assertHTML('truthy', 'If the condition is true, the truthy value renders'); } + @test + 'if keyword in append position with arg as condition [GH emberjs/ember.js#21042]'() { + const Ok = defineComponent({}, 'ok'); + const Ko = defineComponent({}, 'ko'); + const Flipper = defineComponent({ Ok, Ko }, '{{if @isOk Ok Ko}}'); + + let args = trackedObj({ isOk: true }); + + this.renderComponent(Flipper, args); + this.assertHTML('ok', 'Initial render'); + + args['isOk'] = false; + this.rerender(); + this.assertHTML('ko', 'If the condition is false, the falsy component renders'); + + args['isOk'] = true; + this.rerender(); + this.assertHTML('ok', 'If the condition is true, the truthy component renders'); + } + + @test + 'unless keyword in append position with arg as condition [GH emberjs/ember.js#21042]'() { + const Ok = defineComponent({}, 'ok'); + const Ko = defineComponent({}, 'ko'); + const Flipper = defineComponent({ Ok, Ko }, '{{unless @isOk Ko Ok}}'); + + let args = trackedObj({ isOk: false }); + + this.renderComponent(Flipper, args); + this.assertHTML('ko', 'Initial render'); + + args['isOk'] = true; + this.rerender(); + this.assertHTML('ok', 'If the condition is true, the truthy component renders'); + + args['isOk'] = false; + this.rerender(); + this.assertHTML('ko', 'If the condition is false, the falsy component renders'); + } + + @test + 'if keyword in append position with @tracked arg as condition [GH emberjs/ember.js#21042]'() { + const Ok = defineComponent({}, 'ok'); + const Ko = defineComponent({}, 'ko'); + const Flipper = defineComponent({ Ok, Ko }, '{{if @isOk Ok Ko}}'); + + let instance!: { isOk: boolean }; + + const Demo = defineComponent({ Flipper }, '', { + definition: class extends GlimmerishComponent { + @tracked isOk = true; + + constructor(owner: object, args: Record) { + super(owner, args); + instance = this; + } + }, + }); + + this.renderComponent(Demo); + this.assertHTML('ok', 'Initial render'); + + instance.isOk = false; + this.rerender(); + this.assertHTML('ko', 'If the condition is false, the falsy component renders'); + + instance.isOk = true; + this.rerender(); + this.assertHTML('ok', 'If the condition is true, the truthy component renders'); + } + @test 'unless keyword in call position'() { this.registerComponent('TemplateOnly', 'Foo', '{{@value}}'); diff --git a/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts b/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts index 466add49cc9..4f4b29746ea 100644 --- a/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts +++ b/packages/@glimmer/opcode-compiler/lib/opcode-builder/helpers/stdlib.ts @@ -56,6 +56,7 @@ export function StdAppend( if (typeof nonDynamicAppend === 'number') { when(ContentType.Component, () => { + op(VM_ASSERT_SAME_OP); op(VM_RESOLVE_CURRIED_COMPONENT_OP); op(VM_PUSH_DYNAMIC_COMPONENT_INSTANCE_OP); InvokeBareComponent(op);