From 631649bbe781b37ce0cb5f576ae96467a7c54d31 Mon Sep 17 00:00:00 2001 From: Sean Doyle Date: Sat, 6 Feb 2021 14:40:41 -0500 Subject: [PATCH] Add test coverage for toggling data-turbo-preview Closes https://github.com/hotwired/turbo/issues/117 Closes https://github.com/hotwired/turbo/issues/159 --- While the original implementation change for this commit was covered elsewhere, there is still value in the tests to add coverage for the behavior. --- src/tests/fixtures/navigation.html | 2 +- src/tests/fixtures/one.html | 2 ++ src/tests/fixtures/test.js | 8 ++++++++ src/tests/functional/navigation_tests.ts | 11 +++++++++++ src/tests/helpers/turbo_drive_test_case.ts | 11 +++++++++++ 5 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/tests/fixtures/navigation.html b/src/tests/fixtures/navigation.html index 4c3a442c3..cd8fbe06e 100644 --- a/src/tests/fixtures/navigation.html +++ b/src/tests/fixtures/navigation.html @@ -1,5 +1,5 @@ - + Turbo diff --git a/src/tests/fixtures/one.html b/src/tests/fixtures/one.html index 2360dae45..23ce42cd1 100644 --- a/src/tests/fixtures/one.html +++ b/src/tests/fixtures/one.html @@ -10,6 +10,8 @@

One

+ Back to Navigation +
An element with an ID
diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js index 40031bd16..1b1c71eee 100644 --- a/src/tests/fixtures/test.js +++ b/src/tests/fixtures/test.js @@ -9,7 +9,15 @@ function eventListener(event) { eventLogs.push([event.type, event.detail]) } + window.mutationLogs = [] + new MutationObserver((mutations) => { + for (const { attributeName, oldValue, target } of mutations.filter(({ type }) => type == "attributes")) { + if (target instanceof Element) { + mutationLogs.push([attributeName, target.id, target.getAttribute(attributeName)]) + } + } + }).observe(document, { subtree: true, childList: true, attributes: true }) })([ "turbo:before-cache", "turbo:before-render", diff --git a/src/tests/functional/navigation_tests.ts b/src/tests/functional/navigation_tests.ts index cc8e49f47..8e559b663 100644 --- a/src/tests/functional/navigation_tests.ts +++ b/src/tests/functional/navigation_tests.ts @@ -121,6 +121,17 @@ export class NavigationTests extends TurboDriveTestCase { this.assert.equal(await this.visitAction, "load") } + async "test following a link to a page that has been visited renders a preview the Snapshot cache"() { + await this.clickSelector("#same-origin-unannotated-link") + await this.nextBody + this.assert.notOk(await this.hasSelector("html[data-turbo-preview]"), "does not set data-turbo-preview on a visit") + + await this.clickSelector("#navigation-link") + await this.nextBody + this.assert.equal(await this.nextAttributeMutationNamed("document", "data-turbo-preview"), "", "sets [data-turbo-preview] on the element") + this.assert.equal(await this.nextAttributeMutationNamed("document", "data-turbo-preview"), null, "removes [data-turbo-preview] from the element") + } + async "test clicking the back button"() { this.clickSelector("#same-origin-unannotated-link") await this.nextBody diff --git a/src/tests/helpers/turbo_drive_test_case.ts b/src/tests/helpers/turbo_drive_test_case.ts index 5124e0708..55d72d649 100644 --- a/src/tests/helpers/turbo_drive_test_case.ts +++ b/src/tests/helpers/turbo_drive_test_case.ts @@ -3,9 +3,11 @@ import { RemoteChannel } from "./remote_channel" import { Element } from "@theintern/leadfoot" type EventLog = [string, any] +type MutationLog = [string, string, string | null] export class TurboDriveTestCase extends FunctionalTestCase { eventLogChannel: RemoteChannel = new RemoteChannel(this.remote, "eventLogs") + mutationLogChannel: RemoteChannel = new RemoteChannel(this.remote, "mutationLogs") lastBody?: Element async beforeTest() { @@ -33,6 +35,15 @@ export class TurboDriveTestCase extends FunctionalTestCase { return record[1] } + async nextAttributeMutationNamed(elementId: string, attributeName: string): Promise { + let record: MutationLog | undefined + while (!record) { + const records = await this.mutationLogChannel.read(1) + record = records.find(([name, id]) => id == elementId && name == attributeName) + } + return record[2] + } + get nextBody(): Promise { return (async () => { let body