diff --git a/src/elements/stream_element.js b/src/elements/stream_element.js index 41d0e22cf..65ca033d4 100644 --- a/src/elements/stream_element.js +++ b/src/elements/stream_element.js @@ -167,19 +167,27 @@ export class StreamElement extends HTMLElement { } get targetElementsById() { + const elements = [] const element = this.ownerDocument?.getElementById(this.target) - + if (element !== null) { - return [element] - } else { - return [] + elements.push(element) } - } + for (const template of this.ownerDocument?.querySelectorAll("template")) { + const elementInTemplate = template.content.getElementById(this.target) + + if (elementInTemplate !== null) { + elements.push(elementInTemplate) + } + } + + return elements + } get targetElementsByQuery() { let elements = [...this.ownerDocument?.querySelectorAll(this.targets)]; - + for (const template of this.ownerDocument?.querySelectorAll("template")) { elements.push(...template.content.querySelectorAll(this.targets)) } diff --git a/src/tests/fixtures/stream.html b/src/tests/fixtures/stream.html index d4843a441..edf6918b2 100644 --- a/src/tests/fixtures/stream.html +++ b/src/tests/fixtures/stream.html @@ -41,7 +41,7 @@ diff --git a/src/tests/functional/stream_tests.js b/src/tests/functional/stream_tests.js index 8d762b84d..5d59bb79a 100644 --- a/src/tests/functional/stream_tests.js +++ b/src/tests/functional/stream_tests.js @@ -14,7 +14,7 @@ test.beforeEach(async ({ page }) => { await readEventLogs(page) }) -test("receiving a stream message", async ({ page }) => { +test("receiving a stream message for single target", async ({ page }) => { const messages = await page.locator("#messages .message") assert.deepEqual(await messages.allTextContents(), ["First"]) @@ -25,6 +25,27 @@ test("receiving a stream message", async ({ page }) => { assert.deepEqual(await messages.allTextContents(), ["First", "Hello world!"]) }) +test("receiving a stream message for single target in a template", async ({ page }) => { + const templateNode = await page.locator("#messages_template") + + const fetchMessagesInTemplateNode = (node) => { + const messagesNode = node.content.querySelector("#messages") + return messagesNode.innerText.trim().split(/\s{2,}/g); + + } + + let messagesInTemplate = await templateNode.evaluate(fetchMessagesInTemplateNode) + + assert.deepEqual(messagesInTemplate, ["Message inside template"]) + + await page.click("#append-target button") + await nextBeat() + + messagesInTemplate = await templateNode.evaluate(fetchMessagesInTemplateNode) + + assert.deepEqual(messagesInTemplate, ["Message inside template", "Hello world!"]) +}) + test("dispatches a turbo:before-stream-render event", async ({ page }) => { await page.click("#append-target button") await nextEventNamed(page, "turbo:submit-end")