.cypress/utils.ts
// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
import { merge } from 'lodash-es'
import { initializeAppName } from '#shared/composables/useAppName.ts'
import initializeStore from '#shared/stores/index.ts'
import initializeGlobalComponents from '#shared/initializer/globalComponents.ts'
import initializeGlobalProperties from '#shared/initializer/globalProperties.ts'
import { initializeForm, initializeFormFields } from '#mobile/form/index.ts'
import { initializeGlobalComponentStyles } from '#mobile/initializer/initializeGlobalComponentStyles.ts'
import { initializeMobileIcons } from '#mobile/initializer/initializeMobileIcons.ts'
import { initializeMobileVisuals } from '#mobile/initializer/mobileVisuals.ts'
// imported only for types
// for some reason adding it to tsconfig doesn't work
import '@testing-library/cypress'
import 'cypress-real-events'
import './types/commands.ts'
import type { FormSchemaField } from '#shared/components/Form/types.ts'
import { FormKit } from '@formkit/vue'
import type { mount } from 'cypress/vue'
import { createMemoryHistory, createRouter } from 'vue-router'
import type { App } from 'vue'
import { cacheInitializerModules } from '#mobile/server/apollo/index.ts'
import createCache from '#shared/server/apollo/cache.ts'
import { createMockClient } from 'mock-apollo-client'
import { provideApolloClient } from '@vue/apollo-composable'
const router = createRouter({
history: createMemoryHistory('/'),
routes: [{ path: '/', component: { template: '<div />' } }],
})
export const mountComponent: typeof mount = (
component: any,
options: any,
): Cypress.Chainable => {
const plugins = []
plugins.push(() => { initializeAppName('mobile') })
plugins.push(initializeStore)
plugins.push(initializeGlobalComponentStyles)
plugins.push(initializeGlobalComponents)
plugins.push(initializeGlobalProperties)
plugins.push(initializeMobileIcons)
plugins.push(initializeForm)
plugins.push(initializeFormFields)
plugins.push(initializeMobileVisuals)
plugins.push((app: App) => router.install(app))
return cy.mount(component, merge({ global: { plugins } }, options))
}
export const mockApolloClient = () => {
const client = createMockClient({
cache: createCache(cacheInitializerModules),
queryDeduplication: true,
})
provideApolloClient(client)
return client
}
export const mountFormField = (
field: string,
props?: Partial<FormSchemaField> & Record<string, unknown>,
) => {
return mountComponent(FormKit, {
props: {
name: field,
type: field,
...props,
},
})
}
interface CheckFormMatchOptions {
subTitle?: string
type?: string
wrapperSelector?: string
assertion?: (subject: JQuery<HTMLElement>) => void
}
export const checkFormMatchesSnapshot = (
options: CheckFormMatchOptions = {},
) => {
const title = options?.subTitle
? `${Cypress.currentTest.title} - ${options.subTitle}`
: Cypress.currentTest.title
const wrapperSelector = options?.wrapperSelector || '.formkit-outer'
return cy.wrap(document.fonts.ready).then(() => {
cy.wrap(new Promise((resolve) => setTimeout(resolve))).then(() => {
cy.get(wrapperSelector)
.should(options?.assertion || (() => {}))
.matchImage({
title,
imagesDir: options?.type
? `__image_snapshots__/${options.type}`
: undefined,
})
})
})
}