style: Format test files with Prettier
Co-Authored-By: ashwin@anthropic.com <ashwin@anthropic.com>
This commit is contained in:
@@ -1,54 +1,59 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import ListPane from './ListPane'
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import ListPane from "./ListPane";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
|
||||
describe('ListPane', () => {
|
||||
describe("ListPane", () => {
|
||||
const defaultProps = {
|
||||
items: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }],
|
||||
items: [
|
||||
{ id: 1, name: "Item 1" },
|
||||
{ id: 2, name: "Item 2" },
|
||||
],
|
||||
listItems: vi.fn(),
|
||||
clearItems: vi.fn(),
|
||||
setSelectedItem: vi.fn(),
|
||||
renderItem: (item: { name: string }) => <span>{item.name}</span>,
|
||||
title: 'Test List',
|
||||
buttonText: 'List Items'
|
||||
}
|
||||
title: "Test List",
|
||||
buttonText: "List Items",
|
||||
};
|
||||
|
||||
it('renders title correctly', () => {
|
||||
render(<ListPane {...defaultProps} />)
|
||||
expect(screen.getByText('Test List')).toBeInTheDocument()
|
||||
})
|
||||
it("renders title correctly", () => {
|
||||
render(<ListPane {...defaultProps} />);
|
||||
expect(screen.getByText("Test List")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders list items using renderItem prop', () => {
|
||||
render(<ListPane {...defaultProps} />)
|
||||
expect(screen.getByText('Item 1')).toBeInTheDocument()
|
||||
expect(screen.getByText('Item 2')).toBeInTheDocument()
|
||||
})
|
||||
it("renders list items using renderItem prop", () => {
|
||||
render(<ListPane {...defaultProps} />);
|
||||
expect(screen.getByText("Item 1")).toBeInTheDocument();
|
||||
expect(screen.getByText("Item 2")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls listItems when List Items button is clicked', () => {
|
||||
render(<ListPane {...defaultProps} />)
|
||||
fireEvent.click(screen.getByText('List Items'))
|
||||
expect(defaultProps.listItems).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
it("calls listItems when List Items button is clicked", () => {
|
||||
render(<ListPane {...defaultProps} />);
|
||||
fireEvent.click(screen.getByText("List Items"));
|
||||
expect(defaultProps.listItems).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls clearItems when Clear button is clicked', () => {
|
||||
render(<ListPane {...defaultProps} />)
|
||||
fireEvent.click(screen.getByText('Clear'))
|
||||
expect(defaultProps.clearItems).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
it("calls clearItems when Clear button is clicked", () => {
|
||||
render(<ListPane {...defaultProps} />);
|
||||
fireEvent.click(screen.getByText("Clear"));
|
||||
expect(defaultProps.clearItems).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls setSelectedItem when an item is clicked', () => {
|
||||
render(<ListPane {...defaultProps} />)
|
||||
fireEvent.click(screen.getByText('Item 1'))
|
||||
expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(defaultProps.items[0])
|
||||
})
|
||||
it("calls setSelectedItem when an item is clicked", () => {
|
||||
render(<ListPane {...defaultProps} />);
|
||||
fireEvent.click(screen.getByText("Item 1"));
|
||||
expect(defaultProps.setSelectedItem).toHaveBeenCalledWith(
|
||||
defaultProps.items[0],
|
||||
);
|
||||
});
|
||||
|
||||
it('disables Clear button when items array is empty', () => {
|
||||
render(<ListPane {...defaultProps} items={[]} />)
|
||||
expect(screen.getByText('Clear')).toBeDisabled()
|
||||
})
|
||||
it("disables Clear button when items array is empty", () => {
|
||||
render(<ListPane {...defaultProps} items={[]} />);
|
||||
expect(screen.getByText("Clear")).toBeDisabled();
|
||||
});
|
||||
|
||||
it('respects isButtonDisabled prop for List Items button', () => {
|
||||
render(<ListPane {...defaultProps} isButtonDisabled={true} />)
|
||||
expect(screen.getByText('List Items')).toBeDisabled()
|
||||
})
|
||||
})
|
||||
it("respects isButtonDisabled prop for List Items button", () => {
|
||||
render(<ListPane {...defaultProps} isButtonDisabled={true} />);
|
||||
expect(screen.getByText("List Items")).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,55 +1,55 @@
|
||||
import { render, screen, fireEvent } from '@testing-library/react'
|
||||
import { Button } from './button'
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { createRef } from 'react'
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { Button } from "./button";
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { createRef } from "react";
|
||||
|
||||
describe('Button', () => {
|
||||
it('renders children correctly', () => {
|
||||
render(<Button>Click me</Button>)
|
||||
expect(screen.getByText('Click me')).toBeInTheDocument()
|
||||
})
|
||||
describe("Button", () => {
|
||||
it("renders children correctly", () => {
|
||||
render(<Button>Click me</Button>);
|
||||
expect(screen.getByText("Click me")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('handles click events', () => {
|
||||
const handleClick = vi.fn()
|
||||
render(<Button onClick={handleClick}>Click me</Button>)
|
||||
fireEvent.click(screen.getByText('Click me'))
|
||||
expect(handleClick).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
it("handles click events", () => {
|
||||
const handleClick = vi.fn();
|
||||
render(<Button onClick={handleClick}>Click me</Button>);
|
||||
fireEvent.click(screen.getByText("Click me"));
|
||||
expect(handleClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('applies different variants correctly', () => {
|
||||
const { rerender } = render(<Button variant="default">Default</Button>)
|
||||
expect(screen.getByText('Default')).toHaveClass('bg-primary')
|
||||
it("applies different variants correctly", () => {
|
||||
const { rerender } = render(<Button variant="default">Default</Button>);
|
||||
expect(screen.getByText("Default")).toHaveClass("bg-primary");
|
||||
|
||||
rerender(<Button variant="outline">Outline</Button>)
|
||||
expect(screen.getByText('Outline')).toHaveClass('border-input')
|
||||
rerender(<Button variant="outline">Outline</Button>);
|
||||
expect(screen.getByText("Outline")).toHaveClass("border-input");
|
||||
|
||||
rerender(<Button variant="secondary">Secondary</Button>)
|
||||
expect(screen.getByText('Secondary')).toHaveClass('bg-secondary')
|
||||
})
|
||||
rerender(<Button variant="secondary">Secondary</Button>);
|
||||
expect(screen.getByText("Secondary")).toHaveClass("bg-secondary");
|
||||
});
|
||||
|
||||
it('applies different sizes correctly', () => {
|
||||
const { rerender } = render(<Button size="default">Default</Button>)
|
||||
expect(screen.getByText('Default')).toHaveClass('h-9')
|
||||
it("applies different sizes correctly", () => {
|
||||
const { rerender } = render(<Button size="default">Default</Button>);
|
||||
expect(screen.getByText("Default")).toHaveClass("h-9");
|
||||
|
||||
rerender(<Button size="sm">Small</Button>)
|
||||
expect(screen.getByText('Small')).toHaveClass('h-8')
|
||||
rerender(<Button size="sm">Small</Button>);
|
||||
expect(screen.getByText("Small")).toHaveClass("h-8");
|
||||
|
||||
rerender(<Button size="lg">Large</Button>)
|
||||
expect(screen.getByText('Large')).toHaveClass('h-10')
|
||||
})
|
||||
rerender(<Button size="lg">Large</Button>);
|
||||
expect(screen.getByText("Large")).toHaveClass("h-10");
|
||||
});
|
||||
|
||||
it('forwards ref correctly', () => {
|
||||
const ref = createRef<HTMLButtonElement>()
|
||||
render(<Button ref={ref}>Button with ref</Button>)
|
||||
expect(ref.current).toBeInstanceOf(HTMLButtonElement)
|
||||
})
|
||||
it("forwards ref correctly", () => {
|
||||
const ref = createRef<HTMLButtonElement>();
|
||||
render(<Button ref={ref}>Button with ref</Button>);
|
||||
expect(ref.current).toBeInstanceOf(HTMLButtonElement);
|
||||
});
|
||||
|
||||
it('renders as a different element when asChild is true', () => {
|
||||
it("renders as a different element when asChild is true", () => {
|
||||
render(
|
||||
<Button asChild>
|
||||
<a href="#">Link Button</a>
|
||||
</Button>
|
||||
)
|
||||
expect(screen.getByText('Link Button').tagName).toBe('A')
|
||||
})
|
||||
})
|
||||
</Button>,
|
||||
);
|
||||
expect(screen.getByText("Link Button").tagName).toBe("A");
|
||||
});
|
||||
});
|
||||
|
||||
4
client/src/test.d.ts
vendored
4
client/src/test.d.ts
vendored
@@ -1,7 +1,7 @@
|
||||
/// <reference types="vitest/globals" />
|
||||
/// <reference types="@testing-library/jest-dom" />
|
||||
|
||||
import '@testing-library/jest-dom'
|
||||
import "@testing-library/jest-dom";
|
||||
|
||||
declare global {
|
||||
namespace Vi {
|
||||
@@ -9,4 +9,4 @@ declare global {
|
||||
}
|
||||
}
|
||||
|
||||
export {}
|
||||
export {};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/// <reference types="vitest/globals" />
|
||||
/// <reference types="@testing-library/jest-dom" />
|
||||
import '@testing-library/jest-dom/vitest'
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
|
||||
// Add any additional test setup, custom matchers, or global mocks here
|
||||
// This file runs before each test file
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import path from 'path'
|
||||
import { defineConfig } from "vitest/config";
|
||||
import react from "@vitejs/plugin-react";
|
||||
import path from "path";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
environment: "jsdom",
|
||||
globals: true,
|
||||
setupFiles: ['./test/setupTests.ts'],
|
||||
setupFiles: ["./test/setupTests.ts"],
|
||||
typecheck: {
|
||||
tsconfig: './tsconfig.test.json'
|
||||
}
|
||||
tsconfig: "./tsconfig.test.json",
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user