dwol Posts - Answer Overflow

dwol

•Created by dwol on 9/4/2024 in #❓・help

How to spy on store functions during Pinia store test?

Trying to test a Pinia store and assert the function being tested is calling other functions. Example store:

export const useTestStore = defineStore('test-store', () => {
  function test1 () {
    console.log('before')
    test2()
    console.log('after')
  }

  function test2 () {
    console.log('test 2 called')
  }

  return {
    test1,
    test2
  }
})

export const useTestStore = defineStore('test-store', () => {
  function test1 () {
    console.log('before')
    test2()
    console.log('after')
  }

  function test2 () {
    console.log('test 2 called')
  }

  return {
    test1,
    test2
  }
})

Example test:

import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'

describe('useTestStore', () => {
  beforeEach(() => {
    const pinia = createPinia()
    setActivePinia(pinia)
  })

it('should call test2', () => {
    const testStore = useTestStore()
    const test2Spy = vi.spyOn(testStore, 'test2')
    testStore.test1()
    expect(test2Spy).toHaveBeenCalledOnce()
  })
})

import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
import { setActivePinia, createPinia } from 'pinia'

describe('useTestStore', () => {
  beforeEach(() => {
    const pinia = createPinia()
    setActivePinia(pinia)
  })

it('should call test2', () => {
    const testStore = useTestStore()
    const test2Spy = vi.spyOn(testStore, 'test2')
    testStore.test1()
    expect(test2Spy).toHaveBeenCalledOnce()
  })
})

But this fails with AssertionError: expected "spy" to be called once, but got 0 times. Is this possible to accomplish?

2 replies

NNuxt

•Created by dwol on 7/18/2024 in #❓・help

Layer alias not working in .playground

As the title says, I have a layer I'm creating with some aliased images. I'm using the .playground with 'nuxt dev .playground' to test out my layer (created using the layer template command). The aliases are not working when running the .playground environment. The aliases are setup correctly as it works when using the layer in a parent app and also works when running 'nuxt dev' (not 'nuxt dev .playground'). Does anyone know a solution to this?

1 replies

NNuxt

•Created by dwol on 5/21/2024 in #❓・help

How to prerender nuxt-content with nuxt generate and ssr:false?

Is there an offical way to prerender nuxt-content using nuxt generate? Ive found this on github: https://github.com/nuxt/content/issues/1746,

content: {
    experimental: {
      clientDB: true
    }
  }

content: {
    experimental: {
      clientDB: true
    }
  }

I think its working but it still gives me this warning when running nuxt generate HTML content not prerendered because ssr: false was set.. Also that config is not found in the nuxt content docs at all.

1 replies

NNuxt

•Created by dwol on 5/9/2024 in #❓・help

Does anyone know how to mock/assert that navigateTo was called with the correct options?

Basically I have a function thats called after submitting a form and the function returns a navigateTo an external payment portal. how can I test that the navigateTo method was called with the correct options?

/// ~/utils/handlePaymentRedirect.ts
export function handlePaymentRedirect (payToken: number, filingId: number) {
  const config = useRuntimeConfig()
  const { locale } = useI18n()
  const paymentUrl = config.public.paymentPortalUrl
  const baseUrl = config.public.baseUrl
  const returnUrl = encodeURIComponent(`${baseUrl}${locale.value}/submitted?filing_id=${filingId}`)
  const payUrl = paymentUrl + payToken + '/' + returnUrl

  return navigateTo(payUrl, { external: true })
}

/// ~/utils/handlePaymentRedirect.ts
export function handlePaymentRedirect (payToken: number, filingId: number) {
  const config = useRuntimeConfig()
  const { locale } = useI18n()
  const paymentUrl = config.public.paymentPortalUrl
  const baseUrl = config.public.baseUrl
  const returnUrl = encodeURIComponent(`${baseUrl}${locale.value}/submitted?filing_id=${filingId}`)
  const payUrl = paymentUrl + payToken + '/' + returnUrl

  return navigateTo(payUrl, { external: true })
}

2 replies

NNuxt

•Created by dwol on 5/1/2024 in #❓・help

How can I mock or stub Keycloak in unit tests?

So basically I have a nuxt plugin to setup Keycloak, how can I mock or stub keycloak during unit tests? This is my plugin

import Keycloak from 'keycloak-js'

export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig()
  const keycloak = new Keycloak({
    url: config.public.keycloakAuthUrl,
    realm: config.public.keycloakRealm,
    clientId: config.public.keycloakClientId
  })

  try {
    // init keycloak instance
    await keycloak.init({
      onLoad: 'check-sso',
      responseMode: 'query',
      pkceMethod: 'S256'
    })

  } catch (error) {
    console.error('Failed to initialize Keycloak adapter: ', error)
  }

  return {
    provide: {
      // provide global keycloak instance
      keycloak
    }
  }
})

import Keycloak from 'keycloak-js'

export default defineNuxtPlugin(async (_nuxtApp) => {
  const config = useRuntimeConfig()
  const keycloak = new Keycloak({
    url: config.public.keycloakAuthUrl,
    realm: config.public.keycloakRealm,
    clientId: config.public.keycloakClientId
  })

  try {
    // init keycloak instance
    await keycloak.init({
      onLoad: 'check-sso',
      responseMode: 'query',
      pkceMethod: 'S256'
    })

  } catch (error) {
    console.error('Failed to initialize Keycloak adapter: ', error)
  }

  return {
    provide: {
      // provide global keycloak instance
      keycloak
    }
  }
})

Then I've tried to stub useNuxtApp like this, ive also tried mocking using mockNuxtImport

vi.stubGlobal('useNuxtApp', () => ({
      $keycloak: {
        login: mockLogin,
        logout: vi.fn(),
        loadUserProfile: vi.fn(),
        authenticated: false,
        tokenParsed: mockParsedToken
      }
    }))

vi.stubGlobal('useNuxtApp', () => ({
      $keycloak: {
        login: mockLogin,
        logout: vi.fn(),
        loadUserProfile: vi.fn(),
        authenticated: false,
        tokenParsed: mockParsedToken
      }
    }))

But I still get this error Failed to initialize Keycloak adapter: clientId missing Can anyone point me in the right direction?

1 replies

NNuxt

•Created by dwol on 4/11/2024 in #❓・help

Calling `useRoute` within "middleware may lead to misleading results" when watching "locale"

Console warning when watching locale in a useAsyncData call. console warning: "index.vue:17 [nuxt] Calling useRoute within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes." I am using this call to query nuxt-content and watching the locale to auto refetch

const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)

const { data } = await useAsyncData(
  'some-id',
  () => {
    return queryContent()
      .where({ _locale: locale.value,    _extension: { $eq: 'yml' }, _path: {       $contains: 'some-path' } })
      .findOne()
  },
  {
    watch: [locale]
  }
)

But when I change the locale I get the warning posted above. Is this safe to ignore? I only get the error when changing the locale with 'switchLocalePath', not when I manually change the locale, but then I lose out on lazy loading and need to manually update the route.path

3 replies

NNuxt

•Created by dwol on 3/14/2024 in #❓・help

How to prerender a md file that isn't used as a route?

Essentially I have some markdown in content/markdown.md and I'm using that markdown with <ContentRenderer /> inside a vue component. I cannot figure out how to prerender that file when running nuxt generate

1 replies

NNuxt

•Created by dwol on 4/5/2023 in #❓・help

Prop value from vue component inside a nuxt-content prose code block?

Does anyone know a way to use a prop from a component inside a prose code block? I am trying to create a dynamic component that displays a copyable code block for an api. Passing the api key property into the md file only works if i use inline blocks, which defeats the purpose of having the code block highlighting

1 replies

Gaming

Programming