mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 00:23:53 +00:00
fix(nuxt): handle deleted cookies from CookieStore
events (#28760)
This commit is contained in:
parent
77e36ee274
commit
c8cff9be54
@ -103,9 +103,18 @@ export function useCookie<T = string | null | undefined> (name: string, _opts?:
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (store) {
|
if (store) {
|
||||||
|
/* event is of type CookieChangeEvent */
|
||||||
const changeHandler = (event: any) => {
|
const changeHandler = (event: any) => {
|
||||||
const cookie = event.changed.find((c: any) => c.name === name)
|
const changedCookie = event.changed.find((c: any) => c.name === name)
|
||||||
if (cookie) { handleChange({ value: cookie.value }) }
|
const removedCookie = event.deleted.find((c: any) => c.name === name)
|
||||||
|
|
||||||
|
if (changedCookie) {
|
||||||
|
handleChange({ value: changedCookie.value })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (removedCookie) {
|
||||||
|
handleChange({ value: null })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
store.addEventListener('change', changeHandler)
|
store.addEventListener('change', changeHandler)
|
||||||
if (hasScope) {
|
if (hasScope) {
|
||||||
|
@ -640,7 +640,7 @@ describe('nuxt composables', () => {
|
|||||||
},
|
},
|
||||||
})
|
})
|
||||||
const cookies = res.headers.get('set-cookie')
|
const cookies = res.headers.get('set-cookie')
|
||||||
expect(cookies).toMatchInlineSnapshot('"set-in-plugin=true; Path=/, accessed-with-default-value=default; Path=/, set=set; Path=/, browser-set=set; Path=/, browser-set-to-null=; Max-Age=0; Path=/, browser-set-to-null-with-default=; Max-Age=0; Path=/, browser-object-default=%7B%22foo%22%3A%22bar%22%7D; Path=/"')
|
expect(cookies).toMatchInlineSnapshot('"set-in-plugin=true; Path=/, accessed-with-default-value=default; Path=/, set=set; Path=/, browser-set=set; Path=/, browser-set-to-null=; Max-Age=0; Path=/, browser-set-to-null-with-default=; Max-Age=0; Path=/, browser-object-default=%7B%22foo%22%3A%22bar%22%7D; Path=/, theCookie=show; Path=/"')
|
||||||
})
|
})
|
||||||
it('updates cookies when they are changed', async () => {
|
it('updates cookies when they are changed', async () => {
|
||||||
const { page } = await renderPage('/cookies')
|
const { page } = await renderPage('/cookies')
|
||||||
@ -663,6 +663,26 @@ describe('nuxt composables', () => {
|
|||||||
await page.close()
|
await page.close()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('sets cookies in composable to null in all components', async () => {
|
||||||
|
const { page } = await renderPage('/cookies')
|
||||||
|
const parentBannerText = await page.locator('#parent-banner').textContent()
|
||||||
|
expect(parentBannerText).toContain('parent banner')
|
||||||
|
|
||||||
|
const childBannerText = await page.locator('#child-banner').innerText()
|
||||||
|
expect(childBannerText).toContain('child banner')
|
||||||
|
|
||||||
|
// Clear the composable cookie
|
||||||
|
await page.getByText('Toggle cookie banner').click()
|
||||||
|
await page.evaluate(() => new Promise(resolve => setTimeout(resolve, 10)))
|
||||||
|
|
||||||
|
const parentBannerAfterToggle = await page.locator('#parent-banner').isVisible()
|
||||||
|
expect(parentBannerAfterToggle).toBe(false)
|
||||||
|
|
||||||
|
const childBannerAfterToggle = await page.locator('#child-banner').isVisible()
|
||||||
|
expect(childBannerAfterToggle).toBe(false)
|
||||||
|
await page.close()
|
||||||
|
})
|
||||||
|
|
||||||
it('supports onPrehydrate', async () => {
|
it('supports onPrehydrate', async () => {
|
||||||
const html = await $fetch<string>('/composables/on-prehydrate') as string
|
const html = await $fetch<string>('/composables/on-prehydrate') as string
|
||||||
/**
|
/**
|
||||||
|
14
test/fixtures/basic/components/ComponentUsingCookie.vue
vendored
Normal file
14
test/fixtures/basic/components/ComponentUsingCookie.vue
vendored
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<script setup>
|
||||||
|
import { useCookieManager } from '../composables/cookie-manager'
|
||||||
|
|
||||||
|
const { showCookieBanner } = useCookieManager()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-if="showCookieBanner"
|
||||||
|
id="child-banner"
|
||||||
|
>
|
||||||
|
child banner
|
||||||
|
</div>
|
||||||
|
</template>
|
18
test/fixtures/basic/composables/cookie-manager.ts
vendored
Normal file
18
test/fixtures/basic/composables/cookie-manager.ts
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
export function useCookieManager () {
|
||||||
|
const theCookie = useCookie<null | string>('theCookie', {
|
||||||
|
default: () => 'show',
|
||||||
|
})
|
||||||
|
|
||||||
|
const showCookieBanner = computed(() => {
|
||||||
|
return theCookie.value === 'show'
|
||||||
|
})
|
||||||
|
|
||||||
|
function toggle () {
|
||||||
|
theCookie.value = theCookie.value === 'show' ? null : 'show'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
showCookieBanner,
|
||||||
|
toggle,
|
||||||
|
}
|
||||||
|
}
|
16
test/fixtures/basic/pages/cookies.vue
vendored
16
test/fixtures/basic/pages/cookies.vue
vendored
@ -1,4 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import CookieComponent from '../components/ComponentUsingCookie.vue'
|
||||||
|
import { useCookieManager } from '../composables/cookie-manager'
|
||||||
|
|
||||||
useCookie('accessed-but-not-used')
|
useCookie('accessed-but-not-used')
|
||||||
useCookie('accessed-with-default-value', { default: () => 'default' })
|
useCookie('accessed-with-default-value', { default: () => 'default' })
|
||||||
useCookie('set').value = 'set'
|
useCookie('set').value = 'set'
|
||||||
@ -25,6 +28,8 @@ function changeCookie () {
|
|||||||
objectCookie.value!.foo = 'baz'
|
objectCookie.value!.foo = 'baz'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { showCookieBanner, toggle } = useCookieManager()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -38,5 +43,16 @@ function changeCookie () {
|
|||||||
<button @click="refreshCookie('browser-object-default')">
|
<button @click="refreshCookie('browser-object-default')">
|
||||||
Refresh cookie
|
Refresh cookie
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<CookieComponent />
|
||||||
|
<div
|
||||||
|
v-if="showCookieBanner"
|
||||||
|
id="parent-banner"
|
||||||
|
>
|
||||||
|
parent banner
|
||||||
|
</div>
|
||||||
|
<button @click="toggle">
|
||||||
|
Toggle cookie banner
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
Reference in New Issue
Block a user