Skip to content

Commit

Permalink
Fix test to verify no network request on prefetched link click (#1257)
Browse files Browse the repository at this point in the history
* Fix test not making a network request after prefetch click

The test was supposed to assert that a network
request was not made when clicking on a link that
had been prefetched by hovering over it. However,
the test was not actually making the click, just
trying to hover over an already hovered link, so
this wasn't really testing what it was supposed to.

* assertRequestMade and assertRequestNotMade take functions as arguments

These functions are called to perform the action that should trigger the
network request. This allows us to test different scenarios without
repeating the same code.

It also allows us to pass a callback that will be called with the request
object when the request is made. This is useful for testing the request
object itself.
  • Loading branch information
davidalejandroaguilar authored May 20, 2024
1 parent cd16067 commit 8c706bb
Showing 1 changed file with 48 additions and 51 deletions.
99 changes: 48 additions & 51 deletions src/tests/functional/link_prefetch_observer_tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -195,35 +195,28 @@ test("doesn't include a turbo-frame header when the link is inside a turbo frame
test("it prefetches links with a delay", async ({ page }) => {
await goTo({ page, path: "/hover_to_prefetch.html" })

let requestMade = false
page.on("request", async (request) => (requestMade = true))

await page.hover("#anchor_for_prefetch")
await sleep(75)

assertRequestNotMade(requestMade)

await sleep(100)
await assertRequestNotMade(page, async () => {
await page.hover("#anchor_for_prefetch")
await sleep(75)
})

assertRequestMade(requestMade)
await assertRequestMade(page, async () => {
await sleep(100)
})
})

test("it cancels the prefetch request if the link is no longer hovered", async ({ page }) => {
await goTo({ page, path: "/hover_to_prefetch.html" })

let requestMade = false
page.on("request", async (request) => (requestMade = true))

await page.hover("#anchor_for_prefetch")
await sleep(75)

assertRequestNotMade(requestMade)

await page.mouse.move(0, 0)

await sleep(100)
await assertRequestNotMade(page, async () => {
await page.hover("#anchor_for_prefetch")
await sleep(75)
})

assertRequestNotMade(requestMade)
await assertRequestNotMade(page, async () => {
await page.mouse.move(0, 0)
await sleep(100)
})
})

test("it resets the cache when a link is hovered", async ({ page }) => {
Expand All @@ -246,11 +239,8 @@ test("it resets the cache when a link is hovered", async ({ page }) => {

test("it does not make a network request when clicking on a link that has been prefetched", async ({ page }) => {
await goTo({ page, path: "/hover_to_prefetch.html" })
await hoverSelector({ page, selector: "#anchor_for_prefetch" })

await sleep(100)

await assertNotPrefetchedOnHover({ page, selector: "#anchor_for_prefetch" })
await assertPrefetchedOnHover({ page, selector: "#anchor_for_prefetch" })
await assertRequestNotMadeOnClick({ page, selector: "#anchor_for_prefetch" })
})

test("it follows the link using the cached response when clicking on a link that has been prefetched", async ({
Expand All @@ -264,44 +254,51 @@ test("it follows the link using the cached response when clicking on a link that
})

const assertPrefetchedOnHover = async ({ page, selector, callback }) => {
let requestMade = false
await assertRequestMade(page, async () => {
await hoverSelector({ page, selector })

await sleep(100)
}, callback)
}

page.on("request", (request) => {
requestMade = request
const assertNotPrefetchedOnHover = async ({ page, selector, callback }) => {
await assertRequestNotMade(page, async () => {
await hoverSelector({ page, selector })

await sleep(100)
}, callback)
}

const assertRequestNotMadeOnClick = async ({ page, selector }) => {
await assertRequestNotMade(page, async () => {
await clickSelector({ page, selector })
})
}

await hoverSelector({ page, selector })
const assertRequestMade = async (page, action, callback) => {
let requestMade = false
page.on("request", async (request) => requestMade = request)

await sleep(100)
await action()

assert.equal(!!requestMade, true, "Network request wasn't made when it should have been.")

if (callback) {
await callback(requestMade)
}

assertRequestMade(!!requestMade)
}

const assertNotPrefetchedOnHover = async ({ page, selector, callback }) => {
const assertRequestNotMade = async (page, action, callback) => {
let requestMade = false
page.on("request", async (request) => requestMade = request)

page.on("request", (request) => {
callback && callback(request)
requestMade = true
})

await hoverSelector({ page, selector })

await sleep(100)

assert.equal(requestMade, false, "Network request was made when it should not have been.")
}
await action()

const assertRequestMade = (requestMade) => {
assert.equal(requestMade, true, "Network request wasn't made when it should have been.")
}
assert.equal(!!requestMade, false, "Network request was made when it should not have been.")

const assertRequestNotMade = (requestMade) => {
assert.equal(requestMade, false, "Network request was made when it should not have been.")
if (callback) {
await callback(requestMade)
}
}

const goTo = async ({ page, path }) => {
Expand Down

0 comments on commit 8c706bb

Please sign in to comment.