- {{ $t("pages.encounter.pinnedContent.empty") }} -
+ + {{ $t("pages.encounter.pinnedContent.empty.title") }} + +
+ {{ $t("pages.encounter.pinnedContent.empty.text") }}
+
+
{
-
-
+
+
+
+
+
+
+
+
+
(undefined)
-onBeforeUnmount(() => {
- openModal.value = undefined
- diceRollerOpen.value = false
- fantasyNameGeneratorOpen.value = false
-})
+onBeforeUnmount(() => openModal.value = undefined)
const maxCharacters = computed(() => hasMaxCharacters(sheet.value))
@@ -27,42 +21,6 @@ const maxCharacters = computed(() => hasMaxCharacters(sheet.value))
{{ $t('pages.encounter.options') }}
+
"
+`;
diff --git a/test/nuxt/components/initiative/Widgets/__snapshots__/diceRoll.spec.ts.snap b/test/nuxt/components/initiative/Widgets/__snapshots__/diceRoll.spec.ts.snap
new file mode 100644
index 00000000..2a2a12ca
--- /dev/null
+++ b/test/nuxt/components/initiative/Widgets/__snapshots__/diceRoll.spec.ts.snap
@@ -0,0 +1,31 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Initiative dice roll widget > Should match snapshot 1`] = `
+"My Widget
+
+
+
"
+`;
diff --git a/test/nuxt/components/initiative/Widgets/__snapshots__/fantasyNameGenerator.spec.ts.snap b/test/nuxt/components/initiative/Widgets/__snapshots__/fantasyNameGenerator.spec.ts.snap
new file mode 100644
index 00000000..89efe7b2
--- /dev/null
+++ b/test/nuxt/components/initiative/Widgets/__snapshots__/fantasyNameGenerator.spec.ts.snap
@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Initiative fantasy name generator widget > Should match snapshot 1`] = `
+"
+
+
+
+
+ 
0
+
+
+ 
0
+
+
+ 
0
+
+
+ 
0
+
+
+ 
0
+
+
+ 
0
+
+
+ 
0
+
+
+
"
+`;
diff --git a/test/nuxt/components/initiative/Widgets/__snapshots__/index.spec.ts.snap b/test/nuxt/components/initiative/Widgets/__snapshots__/index.spec.ts.snap
index 43e07258..22711bf1 100644
--- a/test/nuxt/components/initiative/Widgets/__snapshots__/index.spec.ts.snap
+++ b/test/nuxt/components/initiative/Widgets/__snapshots__/index.spec.ts.snap
@@ -8,29 +8,131 @@ exports[`Initiative widgets wrapper > Should match snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- Test Name 1 +
- Test Name 2 +
- Test Name 3 +
- Test Name 4 +
- Test Name 5 +
- Test Name 6 +
- Test Name 7 +
- Test Name 8 +
- Test Name 9 +
- Test Name 10 +
+
+
+
+
+
+ pages.fantasyNameGenerator.tip
+
-
-
-
-
+
+
"
`;
+
+exports[`Initiative pinned content widget > Should show empty state when no items 1`] = `
+"
+
+
+
+
+ general.diceRoll
+
+
+
-
+
-
-
-
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
-
-
+
+
"
diff --git a/test/nuxt/components/initiative/Widgets/__snapshots__/pinnedContent.spec.ts.snap b/test/nuxt/components/initiative/Widgets/__snapshots__/pinnedContent.spec.ts.snap
index f6b0939f..8f245386 100644
--- a/test/nuxt/components/initiative/Widgets/__snapshots__/pinnedContent.spec.ts.snap
+++ b/test/nuxt/components/initiative/Widgets/__snapshots__/pinnedContent.spec.ts.snap
@@ -18,3 +18,11 @@ exports[`Initiative pinned content widget > Should match snapshot 1`] = `
+
+
+
+ general.fantasyNameGenerator
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- Test Name 1 +
- Test Name 2 +
- Test Name 3 +
- Test Name 4 +
- Test Name 5 +
- Test Name 6 +
- Test Name 7 +
- Test Name 8 +
- Test Name 9 +
- Test Name 10 +
+
+
+
+
+ pages.fantasyNameGenerator.tip
+
-
+ 0 / 5000 general.character0 general.word
+
+
+
-
+
+ general.note
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 / 5000 general.character0 general.word
+
-
pages.encounter.pinnedContent.empty
+
+
+
+
+ general.infoPins
+
+
+
+
+
pages.encounter.pinnedContent.empty.title
+
+ pages.encounter.pinnedContent.empty.text components.navbar.dnd-content
+
+
"
+`;
diff --git a/test/nuxt/components/initiative/Widgets/diceRoll.spec.ts b/test/nuxt/components/initiative/Widgets/diceRoll.spec.ts
new file mode 100644
index 00000000..f74a616b
--- /dev/null
+++ b/test/nuxt/components/initiative/Widgets/diceRoll.spec.ts
@@ -0,0 +1,37 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import DiceRollWidget from '~/components/initiative/Widgets/DiceRoll.vue'
+
+describe('Initiative dice roll widget', async () => {
+ it('Should match snapshot', async () => {
+ const component = await mountSuspended(DiceRollWidget)
+
+ expect(component.html()).toMatchSnapshot()
+ })
+
+ it('Should render the DiceRoller component', async () => {
+ const component = await mountSuspended(DiceRollWidget)
+
+ expect(component.findComponent({ name: 'DiceRoller' }).exists()).toBeTruthy()
+ })
+
+ it('Should pass styled false to DiceRoller', async () => {
+ const component = await mountSuspended(DiceRollWidget)
+ const inner = component.findComponent({ name: 'DiceRoller' })
+
+ expect(inner.props('styled')).toBe(false)
+ })
+
+ it('Should render the Card with id tour-2', async () => {
+ const component = await mountSuspended(DiceRollWidget)
+
+ expect(component.find('#tour-2').exists()).toBeTruthy()
+ })
+
+ it('Should render the Card with secondary color', async () => {
+ const component = await mountSuspended(DiceRollWidget)
+ const card = component.findComponent({ name: 'Card' })
+
+ expect(card.props('color')).toBe('secondary')
+ })
+})
diff --git a/test/nuxt/components/initiative/Widgets/fantasyNameGenerator.spec.ts b/test/nuxt/components/initiative/Widgets/fantasyNameGenerator.spec.ts
new file mode 100644
index 00000000..d7592219
--- /dev/null
+++ b/test/nuxt/components/initiative/Widgets/fantasyNameGenerator.spec.ts
@@ -0,0 +1,31 @@
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+import FantasyNameGeneratorWidget from '~/components/initiative/Widgets/FantasyNameGenerator.vue'
+
+describe('Initiative fantasy name generator widget', async () => {
+ it('Should match snapshot', async () => {
+ const component = await mountSuspended(FantasyNameGeneratorWidget)
+
+ expect(component.html()).toMatchSnapshot()
+ })
+
+ it('Should render the FantasyNameGenerator component', async () => {
+ const component = await mountSuspended(FantasyNameGeneratorWidget)
+
+ expect(component.findComponent({ name: 'FantasyNameGenerator' }).exists()).toBeTruthy()
+ })
+
+ it('Should pass amount 10 to FantasyNameGenerator', async () => {
+ const component = await mountSuspended(FantasyNameGeneratorWidget)
+ const inner = component.findComponent({ name: 'FantasyNameGenerator' })
+
+ expect(inner.props('amount')).toBe(10)
+ })
+
+ it('Should pass compact true to FantasyNameGenerator', async () => {
+ const component = await mountSuspended(FantasyNameGeneratorWidget)
+ const inner = component.findComponent({ name: 'FantasyNameGenerator' })
+
+ expect(inner.props('compact')).toBe(true)
+ })
+})
diff --git a/test/nuxt/components/initiative/Widgets/pinnedContent.spec.ts b/test/nuxt/components/initiative/Widgets/pinnedContent.spec.ts
index 92dbba64..8709f5f2 100644
--- a/test/nuxt/components/initiative/Widgets/pinnedContent.spec.ts
+++ b/test/nuxt/components/initiative/Widgets/pinnedContent.spec.ts
@@ -22,7 +22,9 @@ describe('Initiative pinned content widget', async () => {
it('Should show empty state when no items', async () => {
const component = await mountSuspended(PinnedContent, { props: { value: [] } })
- expect(component.text()).toContain('pages.encounter.pinnedContent.empty')
+ expect(component.html()).toMatchSnapshot()
+ expect(component.text()).toContain('pages.encounter.pinnedContent.empty.title')
+ expect(component.text()).toContain('pages.encounter.pinnedContent.empty.text')
})
it('Should show accordion when items are present', async () => {
diff --git a/test/nuxt/components/initiative/__snapshots__/table.spec.ts.snap b/test/nuxt/components/initiative/__snapshots__/table.spec.ts.snap
index 0cd3e7c9..4f90ea72 100644
--- a/test/nuxt/components/initiative/__snapshots__/table.spec.ts.snap
+++ b/test/nuxt/components/initiative/__snapshots__/table.spec.ts.snap
@@ -740,29 +740,131 @@ exports[`Initiative table > Should match snapshot 1`] = `
pages.encounter.pinnedContent.empty.title
+
+pages.encounter.pinnedContent.empty.text components.navbar.dnd-content
+
-
-
-
-
+
+
+
+
+
+
+ general.diceRoll
+
+
+
-
+
-
-
-
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
+ 0
+
+
-
-
+
+
diff --git a/test/nuxt/components/molecules/FeatureRequestCard.spec.ts b/test/nuxt/components/molecules/FeatureRequestCard.spec.ts
index 822b6b78..dde87ff7 100644
--- a/test/nuxt/components/molecules/FeatureRequestCard.spec.ts
+++ b/test/nuxt/components/molecules/FeatureRequestCard.spec.ts
@@ -3,6 +3,12 @@ import { describe, expect, it, vi } from 'vitest'
import FeatureRequestCard from '~/components/molecules/FeatureRequestCard.vue'
import SocialProfile from '~~/test/nuxt/fixtures/social-profile.json'
+vi.mock('~/composables/useAuthentication', () => ({
+ useAuthentication: () => ({
+ user: ref({ id: 'test-user-id' }),
+ }),
+}))
+
interface Props {
feature: FeatureRequest
}
@@ -23,12 +29,6 @@ const props: Props = {
}
describe('FeatureRequestCard', async () => {
- vi.mock('~/composables/useAuthentication', () => ({
- useAuthentication: () => ({
- user: ref({ id: 'test-user-id' }),
- }),
- }))
-
it('Should match snapshot', async () => {
const component = await mountSuspended(FeatureRequestCard, { props })
diff --git a/test/nuxt/components/templates/__snapshots__/EncounterSidebar.spec.ts.snap b/test/nuxt/components/templates/__snapshots__/EncounterSidebar.spec.ts.snap
index 854c4c17..1877b450 100644
--- a/test/nuxt/components/templates/__snapshots__/EncounterSidebar.spec.ts.snap
+++ b/test/nuxt/components/templates/__snapshots__/EncounterSidebar.spec.ts.snap
@@ -4,10 +4,6 @@ exports[`EncounterSidebar > Should match snapshot 1`] = `
"
+
+
+
+ general.fantasyNameGenerator
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
- Test Name 1 +
- Test Name 2 +
- Test Name 3 +
- Test Name 4 +
- Test Name 5 +
- Test Name 6 +
- Test Name 7 +
- Test Name 8 +
- Test Name 9 +
- Test Name 10 +
+
+
+
+
+ pages.fantasyNameGenerator.tip
+
-
+ 0 / 5000 general.character0 general.word
+
+
+
-
+
+ general.note
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 0 / 5000 general.character0 general.word
+
-
pages.encounter.pinnedContent.empty
+
+
+
+
+ general.infoPins
+
+
+
+
+
pages.encounter.pinnedContent.empty.title
+
+ pages.encounter.pinnedContent.empty.text components.navbar.dnd-content
+-
-
-
-
diff --git a/test/nuxt/composables/useAuthentication.spec.ts b/test/nuxt/composables/useAuthentication.spec.ts
index b5292945..41999750 100644
--- a/test/nuxt/composables/useAuthentication.spec.ts
+++ b/test/nuxt/composables/useAuthentication.spec.ts
@@ -36,8 +36,7 @@ mockNuxtImport('useSupabaseClient', () => () => ({
mockNuxtImport(
'useState',
() =>
-
(_key: string, init: () => T) => - ref(init()), + (_key: string, init?: () => T) => init ? ref(init()) : ref(null as T), ) mockNuxtImport('createError', () => (error: any) => { diff --git a/test/nuxt/middleware/campaign-member.spec.ts b/test/nuxt/middleware/campaign-member.spec.ts index 2d2f80ba..14574f01 100644 --- a/test/nuxt/middleware/campaign-member.spec.ts +++ b/test/nuxt/middleware/campaign-member.spec.ts @@ -4,9 +4,10 @@ import { mockFrom, mockTo } from '~~/test/nuxt/fixtures/middleware' import { authUser } from '~~/test/nuxt/fixtures/auth-user' import middleware from '~/middleware/campaign-member' -vi.mock('@tanstack/vue-query', () => ({ - useQueryClient: vi.fn(() => mockQueryClient), -})) +vi.mock('@tanstack/vue-query', async (importOriginal) => { + const actual = await importOriginal () + return { ...actual, useQueryClient: vi.fn(() => mockQueryClient) } +}) const mockQueryClient = { getQueryData: vi.fn(), @@ -25,9 +26,9 @@ const mockSupabase = { let mockSupabaseResponse: { data: any, error: any } -mockNuxtImport('useState', () => vi.fn((key: string) => { +mockNuxtImport('useState', () => vi.fn((key: string, init?: () => any) => { if (key === 'auth-user') return { value: mockUser } - return { value: null } + return { value: init ? init() : null } })) mockNuxtImport('navigateTo', () => vi.fn()) mockNuxtImport('useSupabaseClient', () => vi.fn(() => mockSupabase)) diff --git a/test/nuxt/middleware/encounter-access.spec.ts b/test/nuxt/middleware/encounter-access.spec.ts index 81870d2e..133de92b 100644 --- a/test/nuxt/middleware/encounter-access.spec.ts +++ b/test/nuxt/middleware/encounter-access.spec.ts @@ -4,9 +4,10 @@ import { mockFrom, mockTo } from '~~/test/nuxt/fixtures/middleware' import { authUser } from '~~/test/nuxt/fixtures/auth-user' import middleware from '~/middleware/encounter-access' -vi.mock('@tanstack/vue-query', () => ({ - useQueryClient: vi.fn(() => mockQueryClient), -})) +vi.mock('@tanstack/vue-query', async (importOriginal) => { + const actual = await importOriginal () + return { ...actual, useQueryClient: vi.fn(() => mockQueryClient) } +}) const mockQueryClient = { getQueryData: vi.fn(), @@ -27,9 +28,9 @@ const mockSupabase = { let mockSupabaseResponse: { data: any, error: any } -mockNuxtImport('useState', () => vi.fn((key: string) => { +mockNuxtImport('useState', () => vi.fn((key: string, init?: () => any) => { if (key === 'auth-user') return { value: mockUser } - return { value: null } + return { value: init ? init() : null } })) mockNuxtImport('navigateTo', () => vi.fn()) mockNuxtImport('useSupabaseClient', () => vi.fn(() => mockSupabase)) diff --git a/test/nuxt/middleware/encounter-share-access.spec.ts b/test/nuxt/middleware/encounter-share-access.spec.ts index 1302f771..b0249c96 100644 --- a/test/nuxt/middleware/encounter-share-access.spec.ts +++ b/test/nuxt/middleware/encounter-share-access.spec.ts @@ -3,9 +3,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { mockFrom, mockTo } from '~~/test/nuxt/fixtures/middleware' import middleware from '~/middleware/encounter-share-access' -vi.mock('@tanstack/vue-query', () => ({ - useQueryClient: vi.fn(() => mockQueryClient), -})) +vi.mock('@tanstack/vue-query', async (importOriginal) => { + const actual = await importOriginal () + return { ...actual, useQueryClient: vi.fn(() => mockQueryClient) } +}) const mockQueryClient = { setQueryData: vi.fn(), diff --git a/test/nuxt/middleware/valid-token.spec.ts b/test/nuxt/middleware/valid-token.spec.ts index 9989df8e..209526db 100644 --- a/test/nuxt/middleware/valid-token.spec.ts +++ b/test/nuxt/middleware/valid-token.spec.ts @@ -3,9 +3,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest' import { mockFrom, mockTo } from '~~/test/nuxt/fixtures/middleware' import middleware from '~/middleware/valid-token' -vi.mock('@tanstack/vue-query', () => ({ - useQueryClient: vi.fn(() => mockQueryClient), -})) +vi.mock('@tanstack/vue-query', async (importOriginal) => { + const actual = await importOriginal () + return { ...actual, useQueryClient: vi.fn(() => mockQueryClient) } +}) const singleMock = vi.fn() diff --git a/test/nuxt/unit.setup.ts b/test/nuxt/unit.setup.ts index d8ebdb65..8926b209 100644 --- a/test/nuxt/unit.setup.ts +++ b/test/nuxt/unit.setup.ts @@ -1,6 +1,14 @@ import { config } from '@vue/test-utils' -import { vi } from 'vitest' +import { beforeEach, vi } from 'vitest' import { mockNuxtImport } from '@nuxt/test-utils/runtime' +import * as dndHelpers from '~~/shared/utils/dnd/names' + +let nameIndex = 0 + +beforeEach(() => { + nameIndex = 0 + vi.spyOn(dndHelpers, 'randomName').mockImplementation(() => `Test Name ${++nameIndex}`) +}) config.global.mocks = { $t: (tKey: string) => tKey, @@ -29,7 +37,11 @@ config.global.stubs = { } // Disable payload extraction in tests -vi.mock('#app/plugins/payload.client', () => ({ +vi.mock('~/plugins/payload.client', () => ({ + default: () => {}, +})) + +vi.mock('~/plugins/session.client', () => ({ default: () => {}, })) @@ -37,8 +49,8 @@ mockNuxtImport('useI18n', () => () => ({ t: (key: string) => key, locale: { value: 'en' }, locales: [ - { code: 'nl', iso: 'nl-BE', name: 'Nederlands' }, - { code: 'en', iso: 'en-US', name: 'English' }, + { code: 'nl', language: 'nl-BE', name: 'Nederlands', icon: '🇧🇪' }, + { code: 'en', language: 'en-US', name: 'English', icon: '🇬🇧' }, ], })) diff --git a/test/nuxt/utils/dnd/names.spec.ts b/test/nuxt/utils/dnd/names.spec.ts index 23d866b2..38693a8d 100644 --- a/test/nuxt/utils/dnd/names.spec.ts +++ b/test/nuxt/utils/dnd/names.spec.ts @@ -1,8 +1,8 @@ -import { afterEach, describe, expect, it, vi } from 'vitest' +import { beforeEach, describe, expect, it, vi } from 'vitest' import { randomName } from '~~/shared/utils/dnd/names' describe('dnd/names', () => { - afterEach(() => vi.restoreAllMocks()) + beforeEach(() => vi.restoreAllMocks()) it('should generate a name with first and last name', () => { vi.spyOn(Math, 'random').mockReturnValue(0.5) diff --git a/test/nuxt/utils/sanitize-html.spec.ts b/test/nuxt/utils/sanitize-html.spec.ts new file mode 100644 index 00000000..9be9f918 --- /dev/null +++ b/test/nuxt/utils/sanitize-html.spec.ts @@ -0,0 +1,68 @@ +// @vitest-environment jsdom +// NOTE: This file uses the jsdom environment instead of the default nuxt/happy-dom +// one. DOMPurify produces incorrect output under happy-dom (it leaves some +// disallowed tags/siblings in place) — see happy-dom#1810 and DOMPurify#876. +// jsdom is spec-compliant and matches real browser behavior. +import { describe, expect, it } from 'vitest' +import { sanitizeHTML } from '~/utils/ui-helpers' + +describe('sanitizeHTML', () => { + it('should sanitize HTML by removing disallowed tags', () => { + const dirtyHtml = ` + + 
+
+
+
+
+ `
+ const result = sanitizeHTML(dirtyHtml)
+
+ expect(result).not.toContain('
-
-
-
-
-
- `
- const result = sanitizeHTML(dirtyHtml)
-
- expect(result).not.toContain('