Browse Source
* chore: lint/format all files * Fix config sidebar button state (#602) * chore: Update deno.lock version and add Radix UI slider component (#601) * fix: improve how table addresses even/odd rows --------- Co-authored-by: philon- <[email protected]> Co-authored-by: Kamil Dzieniszewski <[email protected]>pull/605/head
Dan Ditomaso
1 year ago
committed by
GitHub
GitHub
104 changed files with 3112 additions and 2535 deletions
File diff suppressed because it is too large
@ -1,6 +1,19 @@ |
|||
import { vi } from 'vitest' |
|||
import { vi } from "vitest"; |
|||
|
|||
vi.mock('@components/UI/Checkbox.tsx', () => ({ |
|||
Checkbox: ({ id, checked, onChange }: { id: string, checked: boolean, onChange: () => void }) => |
|||
<input data-testid="checkbox" type="checkbox" id={id} checked={checked} onChange={onChange} /> |
|||
vi.mock("@components/UI/Checkbox.tsx", () => ({ |
|||
Checkbox: ( |
|||
{ id, checked, onChange }: { |
|||
id: string; |
|||
checked: boolean; |
|||
onChange: () => void; |
|||
}, |
|||
) => ( |
|||
<input |
|||
data-testid="checkbox" |
|||
type="checkbox" |
|||
id={id} |
|||
checked={checked} |
|||
onChange={onChange} |
|||
/> |
|||
), |
|||
})); |
|||
@ -1,43 +1,45 @@ |
|||
import React from 'react'; |
|||
import React from "react"; |
|||
|
|||
export const Dialog = ({ children, open }: { |
|||
children: React.ReactNode, |
|||
open: boolean, |
|||
onOpenChange?: (open: boolean) => void |
|||
children: React.ReactNode; |
|||
open: boolean; |
|||
onOpenChange?: (open: boolean) => void; |
|||
}) => open ? <div data-testid="dialog">{children}</div> : null; |
|||
|
|||
export const DialogContent = ({ |
|||
children, |
|||
className |
|||
className, |
|||
}: { |
|||
children: React.ReactNode, |
|||
className?: string |
|||
children: React.ReactNode; |
|||
className?: string; |
|||
}) => <div data-testid="dialog-content" className={className}>{children}</div>; |
|||
|
|||
export const DialogHeader = ({ |
|||
children |
|||
children, |
|||
}: { |
|||
children: React.ReactNode |
|||
children: React.ReactNode; |
|||
}) => <div data-testid="dialog-header">{children}</div>; |
|||
|
|||
export const DialogTitle = ({ |
|||
children |
|||
children, |
|||
}: { |
|||
children: React.ReactNode |
|||
children: React.ReactNode; |
|||
}) => <div data-testid="dialog-title">{children}</div>; |
|||
|
|||
export const DialogDescription = ({ |
|||
children, |
|||
className |
|||
className, |
|||
}: { |
|||
children: React.ReactNode, |
|||
className?: string |
|||
}) => <div data-testid="dialog-description" className={className}>{children}</div>; |
|||
children: React.ReactNode; |
|||
className?: string; |
|||
}) => ( |
|||
<div data-testid="dialog-description" className={className}>{children}</div> |
|||
); |
|||
|
|||
export const DialogFooter = ({ |
|||
children, |
|||
className |
|||
className, |
|||
}: { |
|||
children: React.ReactNode, |
|||
className?: string |
|||
children: React.ReactNode; |
|||
className?: string; |
|||
}) => <div data-testid="dialog-footer" className={className}>{children}</div>; |
|||
@ -1,6 +1,15 @@ |
|||
import { vi } from 'vitest' |
|||
import { vi } from "vitest"; |
|||
|
|||
vi.mock('@components/UI/Label.tsx', () => ({ |
|||
Label: ({ children, htmlFor, className }: { children: React.ReactNode, htmlFor: string, className?: string }) => |
|||
<label data-testid="label" htmlFor={htmlFor} className={className}>{children}</label> |
|||
vi.mock("@components/UI/Label.tsx", () => ({ |
|||
Label: ( |
|||
{ children, htmlFor, className }: { |
|||
children: React.ReactNode; |
|||
htmlFor: string; |
|||
className?: string; |
|||
}, |
|||
) => ( |
|||
<label data-testid="label" htmlFor={htmlFor} className={className}> |
|||
{children} |
|||
</label> |
|||
), |
|||
})); |
|||
@ -1,52 +1,52 @@ |
|||
import { renderHook, act } from '@testing-library/react' |
|||
import useLocalStorage from './useLocalStorage' |
|||
import { act, renderHook } from "@testing-library/react"; |
|||
import useLocalStorage from "./useLocalStorage.ts"; |
|||
import { beforeEach, describe, expect, it } from "vitest"; |
|||
|
|||
describe('useLocalStorage', () => { |
|||
const key = 'test-key' |
|||
describe("useLocalStorage", () => { |
|||
const key = "test-key"; |
|||
|
|||
beforeEach(() => { |
|||
localStorage.clear() |
|||
}) |
|||
|
|||
it('should initialize with initial value if localStorage is empty', () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
|||
const [value] = result.current |
|||
expect(value).toBe('initial') |
|||
}) |
|||
|
|||
it('should read existing value from localStorage', () => { |
|||
localStorage.setItem(key, JSON.stringify('stored')) |
|||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
|||
const [value] = result.current |
|||
expect(value).toBe('stored') |
|||
}) |
|||
|
|||
it('should update localStorage when setValue is called', () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
|||
const [, setValue] = result.current |
|||
localStorage.clear(); |
|||
}); |
|||
|
|||
it("should initialize with initial value if localStorage is empty", () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
|||
const [value] = result.current; |
|||
expect(value).toBe("initial"); |
|||
}); |
|||
|
|||
it("should read existing value from localStorage", () => { |
|||
localStorage.setItem(key, JSON.stringify("stored")); |
|||
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
|||
const [value] = result.current; |
|||
expect(value).toBe("stored"); |
|||
}); |
|||
|
|||
it("should update localStorage when setValue is called", () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
|||
const [, setValue] = result.current; |
|||
|
|||
act(() => { |
|||
setValue('updated') |
|||
}) |
|||
setValue("updated"); |
|||
}); |
|||
|
|||
expect(localStorage.getItem(key)).toBe(JSON.stringify('updated')) |
|||
expect(result.current[0]).toBe('updated') |
|||
}) |
|||
expect(localStorage.getItem(key)).toBe(JSON.stringify("updated")); |
|||
expect(result.current[0]).toBe("updated"); |
|||
}); |
|||
|
|||
it('should remove value from localStorage when removeValue is called', () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
|||
const [, setValue, removeValue] = result.current |
|||
it("should remove value from localStorage when removeValue is called", () => { |
|||
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
|||
const [, setValue, removeValue] = result.current; |
|||
|
|||
act(() => { |
|||
setValue('to-be-removed') |
|||
}) |
|||
setValue("to-be-removed"); |
|||
}); |
|||
|
|||
act(() => { |
|||
removeValue() |
|||
}) |
|||
removeValue(); |
|||
}); |
|||
|
|||
expect(localStorage.getItem(key)).toBeNull() |
|||
expect(result.current[0]).toBe('initial') |
|||
}) |
|||
}) |
|||
expect(localStorage.getItem(key)).toBeNull(); |
|||
expect(result.current[0]).toBe("initial"); |
|||
}); |
|||
}); |
|||
|
|||
@ -1,81 +1,79 @@ |
|||
import { renderHook, act } from '@testing-library/react' |
|||
import { useToast } from "@core/hooks/useToast.ts" |
|||
import { Button } from '@components/UI/Button.tsx' |
|||
import { act, renderHook } from "@testing-library/react"; |
|||
import { useToast } from "@core/hooks/useToast.ts"; |
|||
import { Button } from "@components/UI/Button.tsx"; |
|||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
|||
|
|||
describe('useToast', () => { |
|||
describe("useToast", () => { |
|||
beforeEach(() => { |
|||
// Reset toast memory state before each test
|
|||
// our hook uses global memory to store toasts
|
|||
// @ts-expect-error - internal test reset
|
|||
globalThis.memoryState = { toasts: [] } |
|||
vi.useFakeTimers() |
|||
}) |
|||
globalThis.memoryState = { toasts: [] }; |
|||
vi.useFakeTimers(); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
vi.useRealTimers() |
|||
}) |
|||
vi.useRealTimers(); |
|||
}); |
|||
|
|||
it('should create a toast with title, description, and action', () => { |
|||
const { result } = renderHook(() => useToast()) |
|||
it("should create a toast with title, description, and action", () => { |
|||
const { result } = renderHook(() => useToast()); |
|||
|
|||
act(() => { |
|||
result.current.toast({ |
|||
title: 'Backup Reminder', |
|||
description: 'Don\'t forget to backup!', |
|||
action: <Button>Backup Now</Button> |
|||
}) |
|||
vi.runAllTimers() |
|||
}) |
|||
|
|||
const toast = result.current.toasts[0] |
|||
expect(result.current.toasts.length).toBe(1) |
|||
expect(toast.title).toBe('Backup Reminder') |
|||
expect(toast.description).toBe('Don\'t forget to backup!') |
|||
expect(toast.action).toBeTruthy() |
|||
expect(toast.open).toBe(true) |
|||
}) |
|||
it('should dismiss a toast using returned dismiss function', () => { |
|||
const { result } = renderHook(() => useToast()) |
|||
vi.useFakeTimers() |
|||
|
|||
let toastRef: { id: string, dismiss: () => void } |
|||
title: "Backup Reminder", |
|||
description: "Don't forget to backup!", |
|||
action: <Button>Backup Now</Button>, |
|||
}); |
|||
vi.runAllTimers(); |
|||
}); |
|||
|
|||
const toast = result.current.toasts[0]; |
|||
expect(result.current.toasts.length).toBe(1); |
|||
expect(toast.title).toBe("Backup Reminder"); |
|||
expect(toast.description).toBe("Don't forget to backup!"); |
|||
expect(toast.action).toBeTruthy(); |
|||
expect(toast.open).toBe(true); |
|||
}); |
|||
it("should dismiss a toast using returned dismiss function", () => { |
|||
const { result } = renderHook(() => useToast()); |
|||
vi.useFakeTimers(); |
|||
|
|||
let toastRef: { id: string; dismiss: () => void }; |
|||
|
|||
act(() => { |
|||
toastRef = result.current.toast({ title: 'Dismiss Me' }) |
|||
vi.runAllTimers() // Flush ADD_TOAST
|
|||
}) |
|||
toastRef = result.current.toast({ title: "Dismiss Me" }); |
|||
vi.runAllTimers(); // Flush ADD_TOAST
|
|||
}); |
|||
|
|||
act(() => { |
|||
toastRef.dismiss() |
|||
}) |
|||
toastRef.dismiss(); |
|||
}); |
|||
|
|||
const toast = result.current.toasts.find(t => t.id === toastRef.id) |
|||
expect(toast?.open).toBe(false) |
|||
const toast = result.current.toasts.find((t) => t.id === toastRef.id); |
|||
expect(toast?.open).toBe(false); |
|||
|
|||
vi.useRealTimers() |
|||
}) |
|||
vi.useRealTimers(); |
|||
}); |
|||
|
|||
it("should allow dismiss via hook dismiss function", () => { |
|||
const { result } = renderHook(() => useToast()); |
|||
vi.useFakeTimers(); |
|||
|
|||
it('should allow dismiss via hook dismiss function', () => { |
|||
const { result } = renderHook(() => useToast()) |
|||
vi.useFakeTimers() |
|||
|
|||
let toastRef: { id: string } |
|||
let toastRef: { id: string }; |
|||
|
|||
act(() => { |
|||
toastRef = result.current.toast({ title: 'Manual Dismiss' }) |
|||
vi.runAllTimers() |
|||
}) |
|||
toastRef = result.current.toast({ title: "Manual Dismiss" }); |
|||
vi.runAllTimers(); |
|||
}); |
|||
|
|||
act(() => { |
|||
result.current.dismiss(toastRef.id) |
|||
}) |
|||
|
|||
const toast = result.current.toasts.find(t => t.id === toastRef.id) |
|||
expect(toast?.open).toBe(false) |
|||
result.current.dismiss(toastRef.id); |
|||
}); |
|||
|
|||
vi.useRealTimers() |
|||
}) |
|||
const toast = result.current.toasts.find((t) => t.id === toastRef.id); |
|||
expect(toast?.open).toBe(false); |
|||
|
|||
}) |
|||
vi.useRealTimers(); |
|||
}); |
|||
}); |
|||
|
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue