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', () => ({ |
vi.mock("@components/UI/Checkbox.tsx", () => ({ |
||||
Checkbox: ({ id, checked, onChange }: { id: string, checked: boolean, onChange: () => void }) => |
Checkbox: ( |
||||
<input data-testid="checkbox" type="checkbox" id={id} checked={checked} onChange={onChange} /> |
{ 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 }: { |
export const Dialog = ({ children, open }: { |
||||
children: React.ReactNode, |
children: React.ReactNode; |
||||
open: boolean, |
open: boolean; |
||||
onOpenChange?: (open: boolean) => void |
onOpenChange?: (open: boolean) => void; |
||||
}) => open ? <div data-testid="dialog">{children}</div> : null; |
}) => open ? <div data-testid="dialog">{children}</div> : null; |
||||
|
|
||||
export const DialogContent = ({ |
export const DialogContent = ({ |
||||
children, |
children, |
||||
className |
className, |
||||
}: { |
}: { |
||||
children: React.ReactNode, |
children: React.ReactNode; |
||||
className?: string |
className?: string; |
||||
}) => <div data-testid="dialog-content" className={className}>{children}</div>; |
}) => <div data-testid="dialog-content" className={className}>{children}</div>; |
||||
|
|
||||
export const DialogHeader = ({ |
export const DialogHeader = ({ |
||||
children |
children, |
||||
}: { |
}: { |
||||
children: React.ReactNode |
children: React.ReactNode; |
||||
}) => <div data-testid="dialog-header">{children}</div>; |
}) => <div data-testid="dialog-header">{children}</div>; |
||||
|
|
||||
export const DialogTitle = ({ |
export const DialogTitle = ({ |
||||
children |
children, |
||||
}: { |
}: { |
||||
children: React.ReactNode |
children: React.ReactNode; |
||||
}) => <div data-testid="dialog-title">{children}</div>; |
}) => <div data-testid="dialog-title">{children}</div>; |
||||
|
|
||||
export const DialogDescription = ({ |
export const DialogDescription = ({ |
||||
children, |
children, |
||||
className |
className, |
||||
}: { |
}: { |
||||
children: React.ReactNode, |
children: React.ReactNode; |
||||
className?: string |
className?: string; |
||||
}) => <div data-testid="dialog-description" className={className}>{children}</div>; |
}) => ( |
||||
|
<div data-testid="dialog-description" className={className}>{children}</div> |
||||
|
); |
||||
|
|
||||
export const DialogFooter = ({ |
export const DialogFooter = ({ |
||||
children, |
children, |
||||
className |
className, |
||||
}: { |
}: { |
||||
children: React.ReactNode, |
children: React.ReactNode; |
||||
className?: string |
className?: string; |
||||
}) => <div data-testid="dialog-footer" className={className}>{children}</div>; |
}) => <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', () => ({ |
vi.mock("@components/UI/Label.tsx", () => ({ |
||||
Label: ({ children, htmlFor, className }: { children: React.ReactNode, htmlFor: string, className?: string }) => |
Label: ( |
||||
<label data-testid="label" htmlFor={htmlFor} className={className}>{children}</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 { act, renderHook } from "@testing-library/react"; |
||||
import useLocalStorage from './useLocalStorage' |
import useLocalStorage from "./useLocalStorage.ts"; |
||||
import { beforeEach, describe, expect, it } from "vitest"; |
import { beforeEach, describe, expect, it } from "vitest"; |
||||
|
|
||||
describe('useLocalStorage', () => { |
describe("useLocalStorage", () => { |
||||
const key = 'test-key' |
const key = "test-key"; |
||||
|
|
||||
beforeEach(() => { |
beforeEach(() => { |
||||
localStorage.clear() |
localStorage.clear(); |
||||
}) |
}); |
||||
|
|
||||
it('should initialize with initial value if localStorage is empty', () => { |
it("should initialize with initial value if localStorage is empty", () => { |
||||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
||||
const [value] = result.current |
const [value] = result.current; |
||||
expect(value).toBe('initial') |
expect(value).toBe("initial"); |
||||
}) |
}); |
||||
|
|
||||
it('should read existing value from localStorage', () => { |
it("should read existing value from localStorage", () => { |
||||
localStorage.setItem(key, JSON.stringify('stored')) |
localStorage.setItem(key, JSON.stringify("stored")); |
||||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
||||
const [value] = result.current |
const [value] = result.current; |
||||
expect(value).toBe('stored') |
expect(value).toBe("stored"); |
||||
}) |
}); |
||||
|
|
||||
it('should update localStorage when setValue is called', () => { |
it("should update localStorage when setValue is called", () => { |
||||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
||||
const [, setValue] = result.current |
const [, setValue] = result.current; |
||||
|
|
||||
act(() => { |
act(() => { |
||||
setValue('updated') |
setValue("updated"); |
||||
}) |
}); |
||||
|
|
||||
expect(localStorage.getItem(key)).toBe(JSON.stringify('updated')) |
expect(localStorage.getItem(key)).toBe(JSON.stringify("updated")); |
||||
expect(result.current[0]).toBe('updated') |
expect(result.current[0]).toBe("updated"); |
||||
}) |
}); |
||||
|
|
||||
it('should remove value from localStorage when removeValue is called', () => { |
it("should remove value from localStorage when removeValue is called", () => { |
||||
const { result } = renderHook(() => useLocalStorage(key, 'initial')) |
const { result } = renderHook(() => useLocalStorage(key, "initial")); |
||||
const [, setValue, removeValue] = result.current |
const [, setValue, removeValue] = result.current; |
||||
|
|
||||
act(() => { |
act(() => { |
||||
setValue('to-be-removed') |
setValue("to-be-removed"); |
||||
}) |
}); |
||||
|
|
||||
act(() => { |
act(() => { |
||||
removeValue() |
removeValue(); |
||||
}) |
}); |
||||
|
|
||||
expect(localStorage.getItem(key)).toBeNull() |
expect(localStorage.getItem(key)).toBeNull(); |
||||
expect(result.current[0]).toBe('initial') |
expect(result.current[0]).toBe("initial"); |
||||
}) |
}); |
||||
}) |
}); |
||||
|
|||||
@ -1,81 +1,79 @@ |
|||||
import { renderHook, act } from '@testing-library/react' |
import { act, renderHook } from "@testing-library/react"; |
||||
import { useToast } from "@core/hooks/useToast.ts" |
import { useToast } from "@core/hooks/useToast.ts"; |
||||
import { Button } from '@components/UI/Button.tsx' |
import { Button } from "@components/UI/Button.tsx"; |
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; |
||||
|
|
||||
describe('useToast', () => { |
describe("useToast", () => { |
||||
beforeEach(() => { |
beforeEach(() => { |
||||
// Reset toast memory state before each test
|
// Reset toast memory state before each test
|
||||
// our hook uses global memory to store toasts
|
// our hook uses global memory to store toasts
|
||||
// @ts-expect-error - internal test reset
|
// @ts-expect-error - internal test reset
|
||||
globalThis.memoryState = { toasts: [] } |
globalThis.memoryState = { toasts: [] }; |
||||
vi.useFakeTimers() |
vi.useFakeTimers(); |
||||
}) |
}); |
||||
|
|
||||
afterEach(() => { |
afterEach(() => { |
||||
vi.useRealTimers() |
vi.useRealTimers(); |
||||
}) |
}); |
||||
|
|
||||
it('should create a toast with title, description, and action', () => { |
it("should create a toast with title, description, and action", () => { |
||||
const { result } = renderHook(() => useToast()) |
const { result } = renderHook(() => useToast()); |
||||
|
|
||||
act(() => { |
act(() => { |
||||
result.current.toast({ |
result.current.toast({ |
||||
title: 'Backup Reminder', |
title: "Backup Reminder", |
||||
description: 'Don\'t forget to backup!', |
description: "Don't forget to backup!", |
||||
action: <Button>Backup Now</Button> |
action: <Button>Backup Now</Button>, |
||||
}) |
}); |
||||
vi.runAllTimers() |
vi.runAllTimers(); |
||||
}) |
}); |
||||
|
|
||||
const toast = result.current.toasts[0] |
const toast = result.current.toasts[0]; |
||||
expect(result.current.toasts.length).toBe(1) |
expect(result.current.toasts.length).toBe(1); |
||||
expect(toast.title).toBe('Backup Reminder') |
expect(toast.title).toBe("Backup Reminder"); |
||||
expect(toast.description).toBe('Don\'t forget to backup!') |
expect(toast.description).toBe("Don't forget to backup!"); |
||||
expect(toast.action).toBeTruthy() |
expect(toast.action).toBeTruthy(); |
||||
expect(toast.open).toBe(true) |
expect(toast.open).toBe(true); |
||||
}) |
}); |
||||
it('should dismiss a toast using returned dismiss function', () => { |
it("should dismiss a toast using returned dismiss function", () => { |
||||
const { result } = renderHook(() => useToast()) |
const { result } = renderHook(() => useToast()); |
||||
vi.useFakeTimers() |
vi.useFakeTimers(); |
||||
|
|
||||
let toastRef: { id: string, dismiss: () => void } |
let toastRef: { id: string; dismiss: () => void }; |
||||
|
|
||||
act(() => { |
act(() => { |
||||
toastRef = result.current.toast({ title: 'Dismiss Me' }) |
toastRef = result.current.toast({ title: "Dismiss Me" }); |
||||
vi.runAllTimers() // Flush ADD_TOAST
|
vi.runAllTimers(); // Flush ADD_TOAST
|
||||
}) |
}); |
||||
|
|
||||
act(() => { |
act(() => { |
||||
toastRef.dismiss() |
toastRef.dismiss(); |
||||
}) |
}); |
||||
|
|
||||
const toast = result.current.toasts.find(t => t.id === toastRef.id) |
const toast = result.current.toasts.find((t) => t.id === toastRef.id); |
||||
expect(toast?.open).toBe(false) |
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', () => { |
let toastRef: { id: string }; |
||||
const { result } = renderHook(() => useToast()) |
|
||||
vi.useFakeTimers() |
|
||||
|
|
||||
let toastRef: { id: string } |
|
||||
|
|
||||
act(() => { |
act(() => { |
||||
toastRef = result.current.toast({ title: 'Manual Dismiss' }) |
toastRef = result.current.toast({ title: "Manual Dismiss" }); |
||||
vi.runAllTimers() |
vi.runAllTimers(); |
||||
}) |
}); |
||||
|
|
||||
act(() => { |
act(() => { |
||||
result.current.dismiss(toastRef.id) |
result.current.dismiss(toastRef.id); |
||||
}) |
}); |
||||
|
|
||||
const toast = result.current.toasts.find(t => t.id === toastRef.id) |
|
||||
expect(toast?.open).toBe(false) |
|
||||
|
|
||||
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