diff --git a/packages/@glimmer-workspace/integration-tests/test/keywords/each-test.ts b/packages/@glimmer-workspace/integration-tests/test/keywords/each-test.ts index ccfb151a9..68484fab1 100644 --- a/packages/@glimmer-workspace/integration-tests/test/keywords/each-test.ts +++ b/packages/@glimmer-workspace/integration-tests/test/keywords/each-test.ts @@ -1,3 +1,4 @@ +import { consumeTag, createUpdatableTag, dirtyTag } from '@glimmer/validator'; import { defineComponent, jitSuite, @@ -30,6 +31,39 @@ class Each extends RenderTest { this.assertHTML(' '); } + + @test + 'each with array of tags is reactive per item'(assert: Assert) { + let array = [createUpdatableTag(), createUpdatableTag()]; + let step = (index: number) => { + consumeTag(array[index]); + assert.step(String(index)); + return index; + }; + + const Foo = defineComponent( + { step, array }, + `{{#each array as |item index|}} + {{step index}} + {{/each}}` + .replaceAll(/^\s|\s+$|\s+(?=\s)/gu, '') + .replaceAll(/\n/gu, '') + ); + + this.renderComponent(Foo); + this.assertHTML(' 0 1 '); + assert.verifySteps(['0', '1']); + + dirtyTag(array[0]!); + this.rerender(); + this.assertHTML(' 0 1 '); + assert.verifySteps(['0']); + + dirtyTag(array[1]!); + this.rerender(); + this.assertHTML(' 0 1 '); + assert.verifySteps(['1']); + } } jitSuite(Each);