konnosDashboard
helpers.tsx122 lines · main
1import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2import { fireEvent, getByText, render as originalRender, screen } from '@testing-library/react'
3import type React from 'react'
4import { useState } from 'react'
5import { TooltipProvider } from 'ui'
6import { CommandProvider } from 'ui-patterns/CommandMenu'
7
8import { ProjectInfoInfinite } from '@/data/projects/projects-infinite-query'
9import type { Organization } from '@/types'
10
11interface SelectorOptions {
12 container?: HTMLElement
13}
14
15/**
16 * Returns the toggle button given a text matcher
17 *
18 * Defaults to screen if container option is not provided
19 */
20export const getToggleByText = (
21 text: string | RegExp,
22 options: SelectorOptions = {}
23): HTMLElement | null => {
24 const container = options?.container
25 let textNode
26 if (container) {
27 textNode = getByText(container as HTMLElement, text)
28 } else {
29 textNode = screen.getByText(text)
30 }
31 if (textNode && textNode.parentElement) {
32 return textNode.parentElement.querySelector('button')
33 } else {
34 return textNode
35 }
36}
37
38export const clickDropdown = (elem: HTMLElement) => {
39 fireEvent.pointerDown(
40 elem,
41 new window.PointerEvent('pointerdown', {
42 ctrlKey: false,
43 button: 0,
44 })
45 )
46}
47
48export const createMockOrganization = (details: Partial<Organization>): Organization => {
49 const base: Organization = {
50 id: 1,
51 name: 'Organization 1',
52 slug: 'abcdefghijklmnopqrst',
53 plan: { id: 'free', name: 'Free' },
54 managed_by: 'briven',
55 is_owner: true,
56 billing_email: 'billing@example.com',
57 billing_partner: null,
58 integration_source: null,
59 usage_billing_enabled: false,
60 stripe_customer_id: 'stripe-1',
61 subscription_id: 'subscription-1',
62 organization_requires_mfa: false,
63 opt_in_tags: [],
64 restriction_status: null,
65 restriction_data: null,
66 organization_missing_address: false,
67 organization_missing_tax_id: false,
68 }
69
70 return Object.assign(base, details)
71}
72
73export const createMockProject = (details: Partial<ProjectInfoInfinite>): ProjectInfoInfinite => {
74 const base: ProjectInfoInfinite = {
75 id: 1,
76 ref: 'abcdefghijklmnopqrst',
77 name: 'Project 1',
78 status: 'ACTIVE_HEALTHY',
79 organization_id: 1,
80 cloud_provider: 'AWS',
81 region: 'us-east-1',
82 inserted_at: new Date().toISOString(),
83 subscription_id: 'subscription-1',
84 is_branch_enabled: false,
85 is_physical_backups_enabled: false,
86 organization_slug: 'slug',
87 preview_branch_refs: [],
88 }
89
90 return Object.assign(base, details)
91}
92
93/**
94 * A custom render function for react testing library
95 * https://testing-library.com/docs/react-testing-library/setup/#custom-render
96 */
97const ReactQueryTestConfig: React.FC<React.PropsWithChildren> = ({ children }) => {
98 const [queryClient] = useState(
99 () =>
100 new QueryClient({
101 defaultOptions: {
102 queries: {
103 retry: false,
104 },
105 },
106 })
107 )
108
109 return (
110 <TooltipProvider>
111 <QueryClientProvider client={queryClient}>
112 <CommandProvider openKey="">{children}</CommandProvider>
113 </QueryClientProvider>
114 </TooltipProvider>
115 )
116}
117type renderParams = Parameters<typeof originalRender>
118export const render = ((ui: renderParams[0], options: renderParams[1]) =>
119 originalRender(ui, {
120 wrapper: ReactQueryTestConfig,
121 ...options,
122 })) as typeof originalRender