@reshape-biotech/design-system 2.4.1 → 2.5.1

package/dist/components/button/Button.test.js

@@ -1,117 +0,0 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { describe, it, expect, vi } from 'vitest';
-import Button from './Button.svelte';
-// Helper component specifically for testing the default slot
-import ButtonTest from './Button.test.svelte';
-describe('Button Component', () => {
-    it('renders with default props', () => {
-        const { getByRole } = render(Button);
-        const button = getByRole('button');
-        expect(button).toBeInTheDocument();
-        expect(button).toHaveClass('button');
-        expect(button).toHaveClass('btn-primary'); // Default variant
-        expect(button).toHaveClass('btn-size-lg'); // Default size
-        expect(button).not.toHaveClass('rounded');
-        expect(button).not.toBeDisabled();
-        expect(button).not.toHaveClass('cursor-wait');
-        expect(button).not.toHaveClass('disabled'); // Ensure separate disabled class check
-        expect(button).toHaveAttribute('type', 'button');
-    });
-    it('renders children content provided via slot', () => {
-        // Use the helper component to render the button with slot content
-        const { getByText } = render(ButtonTest);
-        expect(getByText('Test Children')).toBeInTheDocument();
-    });
-    // Test variants
-    ['primary', 'secondary', 'transparent', 'danger', 'outline'].forEach((variant) => {
-        it(`applies the correct class for variant "${variant}"`, () => {
-            const { getByRole } = render(Button, { props: { variant } });
-            const button = getByRole('button');
-            expect(button).toHaveClass(`btn-${variant}`);
-        });
-    });
-    // Test inverse variants
-    ['secondary-inverse', 'transparent-inverse'].forEach((variant) => {
-        it(`applies the correct class for variant "${variant}"`, () => {
-            const { getByRole } = render(Button, { props: { variant } });
-            const button = getByRole('button');
-            expect(button).toHaveClass(`btn-${variant}`);
-        });
-    });
-    // Test sizes
-    ['xs', 'sm', 'md', 'lg'].forEach((size) => {
-        it(`applies the correct class for size "${size}"`, () => {
-            const { getByRole } = render(Button, { props: { size } });
-            const button = getByRole('button');
-            expect(button).toHaveClass(`btn-size-${size}`);
-        });
-    });
-    it('applies the rounded class when rounded is true', () => {
-        const { getByRole } = render(Button, { props: { rounded: true } });
-        const button = getByRole('button');
-        expect(button).toHaveClass('rounded');
-    });
-    it('handles click events', async () => {
-        const handleClick = vi.fn();
-        const { getByRole } = render(Button, { props: { onClick: handleClick } });
-        const button = getByRole('button');
-        await fireEvent.click(button);
-        expect(handleClick).toHaveBeenCalledTimes(1);
-    });
-    it('disables the button when disabled is true', async () => {
-        const handleClick = vi.fn();
-        const { getByRole } = render(Button, { props: { disabled: true, onClick: handleClick } });
-        const button = getByRole('button');
-        expect(button).toBeDisabled();
-        expect(button).toHaveClass('disabled'); // Check for the specific disabled class
-        await fireEvent.click(button);
-        expect(handleClick).not.toHaveBeenCalled();
-    });
-    it('shows spinner and prevents click when loading is true', async () => {
-        const handleClick = vi.fn();
-        const { getByRole, container } = render(Button, {
-            props: { loading: true, onClick: handleClick },
-        });
-        const button = getByRole('button');
-        expect(button).toHaveClass('cursor-wait');
-        // Check if Spinner is rendered by looking for the div with the 'spinner' class
-        expect(container.querySelector('div.spinner')).toBeInTheDocument();
-        await fireEvent.click(button);
-        expect(handleClick).not.toHaveBeenCalled();
-    });
-    it('applies accessibility label', () => {
-        const label = 'Click me button';
-        const { getByRole } = render(Button, { props: { accessibilityLabel: label } });
-        const button = getByRole('button');
-        expect(button).toHaveAttribute('aria-label', label);
-    });
-    it('applies custom class', () => {
-        const customClass = 'my-custom-class';
-        const { getByRole } = render(Button, { props: { class: customClass } });
-        const button = getByRole('button');
-        expect(button).toHaveClass(customClass);
-    });
-    it('applies data-testid', () => {
-        const testId = 'my-button-test-id';
-        const { getByTestId } = render(Button, { props: { dataTestId: testId } });
-        expect(getByTestId(testId)).toBeInTheDocument();
-    });
-    it('applies id', () => {
-        const testId = 'my-button-id';
-        const { getByRole } = render(Button, { props: { id: testId } });
-        const button = getByRole('button');
-        expect(button).toHaveAttribute('id', testId);
-    });
-    it('applies tabindex', () => {
-        const tabIndex = 0;
-        const { getByRole } = render(Button, { props: { tabindex: tabIndex } });
-        const button = getByRole('button');
-        expect(button).toHaveAttribute('tabindex', tabIndex.toString());
-    });
-    it('applies button type', () => {
-        const type = 'submit';
-        const { getByRole } = render(Button, { props: { type: type } });
-        const button = getByRole('button');
-        expect(button).toHaveAttribute('type', type);
-    });
-});

package/dist/components/button/Button.test.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-  import Button from './Button.svelte';
-</script>
-
-<Button>Test Children</Button>

package/dist/components/checkbox/Checkbox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/checkbox/Checkbox.test.js

@@ -1,51 +0,0 @@
-import { render, fireEvent } from '@testing-library/svelte';
-import { describe, it, expect, vi } from 'vitest';
-import Checkbox from './Checkbox.svelte';
-describe('Checkbox component', () => {
-    it('renders correctly', () => {
-        const { getByRole } = render(Checkbox, { props: { checked: false } });
-        expect(getByRole('checkbox')).toBeTruthy();
-    });
-    it('is unchecked by default', () => {
-        const { getByRole } = render(Checkbox);
-        expect(getByRole('checkbox')).not.toBeChecked();
-    });
-    it('is checked when checked prop is true', () => {
-        const { getByRole } = render(Checkbox, {
-            props: {
-                checked: true,
-            },
-        });
-        expect(getByRole('checkbox')).toBeChecked();
-    });
-    it('calls onChange handler when clicked', async () => {
-        const handleChange = vi.fn();
-        const { getByRole } = render(Checkbox, {
-            props: {
-                checked: false,
-                onCheckedChange: handleChange,
-            },
-        });
-        const checkbox = getByRole('checkbox');
-        await fireEvent.click(checkbox);
-        expect(handleChange).toHaveBeenCalledTimes(1);
-    });
-    it('is disabled when disabled prop is true', () => {
-        const { getByRole } = render(Checkbox, {
-            props: {
-                checked: false,
-                disabled: true,
-            },
-        });
-        const checkbox = getByRole('checkbox');
-        expect(checkbox.hasAttribute('disabled')).toBe(true);
-    });
-    it('is indeterminate when indeterminate prop is true', () => {
-        const { getByRole } = render(Checkbox, {
-            props: {
-                indeterminate: true,
-            },
-        });
-        expect(getByRole('checkbox')).toHaveAttribute('data-state', 'indeterminate');
-    });
-});

package/dist/components/graphs/matrix/Matrix.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/graphs/matrix/Matrix.test.js

@@ -1,256 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import Matrix from './Matrix.svelte';
-describe('Matrix Component', () => {
-    // Test data
-    const xAxisName = 'Predicted';
-    const yAxisName = 'Actual';
-    const confusionMatrix = [
-        [
-            { value: 8, row: 0, col: 0 }, // TP (TNTC/TNTC)
-            { value: 27, row: 0, col: 1 }, // FN (TNTC/Not TNTC)
-        ],
-        [
-            { value: 2, row: 1, col: 0 }, // FP (Not TNTC/TNTC)
-            { value: 123, row: 1, col: 1 }, // TN (Not TNTC/Not TNTC)
-        ],
-    ];
-    const defaultRowLabels = ['TNTC', 'Not TNTC'];
-    const defaultColLabels = ['TNTC', 'Not TNTC'];
-    it('renders with default props', () => {
-        render(Matrix, {
-            props: {
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                xAxisName,
-                yAxisName,
-            },
-        });
-        // Check that all values are rendered
-        expect(screen.getByText('8')).toBeInTheDocument();
-        expect(screen.getByText('27')).toBeInTheDocument();
-        expect(screen.getByText('2')).toBeInTheDocument();
-        expect(screen.getByText('123')).toBeInTheDocument();
-        // Check that all labels are rendered
-        defaultRowLabels.forEach((label) => {
-            expect(screen.getAllByText(label).length).toBeGreaterThan(0);
-        });
-        defaultColLabels.forEach((label) => {
-            expect(screen.getAllByText(label).length).toBeGreaterThan(0);
-        });
-    });
-    it('renders with axis titles', () => {
-        render(Matrix, {
-            props: {
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                xAxisName,
-                yAxisName,
-            },
-        });
-        expect(screen.getByText(xAxisName)).toBeInTheDocument();
-        expect(screen.getByText(yAxisName)).toBeInTheDocument();
-    });
-    it('renders without axis titles when when hideAxisNames is true', () => {
-        render(Matrix, {
-            props: {
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                xAxisName,
-                yAxisName,
-                hideAxisNames: true,
-            },
-        });
-        // The titles should not be in the document
-        expect(screen.queryByText('Predicted')).not.toBeInTheDocument();
-        expect(screen.queryByText('Actual')).not.toBeInTheDocument();
-    });
-    it('renders loading state correctly', () => {
-        render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                loading: true,
-            },
-        });
-        expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-    it('inverts y-axis when invertYAxis is true', () => {
-        // First render without inversion to capture original order
-        const { unmount } = render(Matrix, {
-            props: {
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                xAxisName,
-                yAxisName,
-            },
-        });
-        // Query all cell values to determine their positions in the DOM
-        const originalCells = screen
-            .getAllByRole('button')
-            .map((button) => button.querySelector('span')?.textContent);
-        unmount();
-        // Now render with inversion
-        render(Matrix, {
-            props: {
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                invertYAxis: true,
-                xAxisName,
-                yAxisName,
-            },
-        });
-        // Get the new order of cells
-        const invertedCells = screen
-            .getAllByRole('button')
-            .map((button) => button.querySelector('span')?.textContent);
-        // The first row and last row should be swapped when inverted
-        // This is an approximation as DOM order might not directly correspond to visual order
-        expect(invertedCells).not.toEqual(originalCells);
-    });
-    it('calls onCellClick when a cell is clicked', async () => {
-        const user = userEvent.setup();
-        const onCellClick = vi.fn();
-        render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                onCellClick,
-            },
-        });
-        const buttons = screen.getAllByRole('button');
-        await user.click(buttons[0]); // Click the first cell
-        expect(onCellClick).toHaveBeenCalledTimes(1);
-        expect(onCellClick).toHaveBeenCalledWith(expect.objectContaining({
-            value: expect.any(Number),
-            row: expect.any(Number),
-            col: expect.any(Number),
-        }));
-    });
-    it('calls onCellHover when a cell is hovered', async () => {
-        const onCellHover = vi.fn();
-        render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                onCellHover,
-            },
-        });
-        const buttons = screen.getAllByRole('button');
-        await fireEvent.mouseOver(buttons[0]); // Hover over the first cell
-        expect(onCellHover).toHaveBeenCalledTimes(1);
-        expect(onCellHover).toHaveBeenCalledWith(expect.objectContaining({
-            value: expect.any(Number),
-            row: expect.any(Number),
-            col: expect.any(Number),
-        }));
-    });
-    it('uses default background colors for 2x2 confusion matrix', () => {
-        // Create a test component that inspects cell background colors
-        const { container } = render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-            },
-        });
-        // Get all cell buttons
-        const buttons = screen.getAllByRole('button');
-        // In a 2x2 confusion matrix, diagonal cells should have success background color
-        // and off-diagonal cells should have neutral background color
-        const diagonalCells = [0, 3]; // Indices for top-left and bottom-right cells
-        const offDiagonalCells = [1, 2]; // Indices for top-right and bottom-left cells
-        for (const idx of diagonalCells) {
-            // Check that the inline style contains the success background color
-            expect(buttons[idx].style.backgroundColor).not.toBeUndefined();
-        }
-        for (const idx of offDiagonalCells) {
-            // Check that the inline style contains the neutral background color
-            expect(buttons[idx].style.backgroundColor).not.toBeUndefined();
-        }
-    });
-    it('respects custom background colors when provided', () => {
-        const customRedColor = 'rgb(255, 0, 0)';
-        const customGreenColor = 'rgb(0, 255, 0)';
-        const customColorMatrix = [
-            [
-                { value: 8, row: 0, col: 0, backgroundColor: customRedColor }, // Custom red color
-                { value: 27, row: 0, col: 1 }, // Default color
-            ],
-            [
-                { value: 2, row: 1, col: 0 }, // Default color
-                { value: 123, row: 1, col: 1, backgroundColor: customGreenColor }, // Custom green color
-            ],
-        ];
-        render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: customColorMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-            },
-        });
-        const buttons = screen.getAllByRole('button');
-        // Check that custom colors are applied
-        expect(buttons[0].style.backgroundColor).toBe(customRedColor);
-        expect(buttons[3].style.backgroundColor).toBe(customGreenColor);
-    });
-    it('handles focus events for accessibility', async () => {
-        const onCellHover = vi.fn();
-        render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                onCellHover,
-            },
-        });
-        const buttons = screen.getAllByRole('button');
-        await fireEvent.focus(buttons[0]); // Focus the first cell
-        expect(onCellHover).toHaveBeenCalledTimes(1);
-        expect(onCellHover).toHaveBeenCalledWith(expect.objectContaining({
-            value: expect.any(Number),
-            row: expect.any(Number),
-            col: expect.any(Number),
-        }));
-    });
-    it('renders with custom width and height', () => {
-        const customWidth = '600px';
-        const customHeight = '300px';
-        const { container } = render(Matrix, {
-            props: {
-                xAxisName,
-                yAxisName,
-                data: confusionMatrix,
-                rowLabels: defaultRowLabels,
-                colLabels: defaultColLabels,
-                width: customWidth,
-                height: customHeight,
-            },
-        });
-        // Check that the root div has the specified width and height
-        const rootElement = container.firstChild;
-        expect(rootElement.style.width).toBe(customWidth);
-        expect(rootElement.style.height).toBe(customHeight);
-    });
-});

package/dist/components/graphs/matrix/Matrix.test.svelte

@@ -1,49 +0,0 @@
-<script lang="ts">
-  import Matrix, { type MatrixChartProps } from './Matrix.svelte';
-
-  // Default test data
-  const confusionMatrix = [
-    [
-      { value: 8, row: 0, col: 0 }, // TP (TNTC/TNTC)
-      { value: 27, row: 0, col: 1 }, // FN (TNTC/Not TNTC)
-    ],
-    [
-      { value: 2, row: 1, col: 0 }, // FP (Not TNTC/TNTC)
-      { value: 123, row: 1, col: 1 }, // TN (Not TNTC/Not TNTC)
-    ],
-  ];
-
-  const defaultRowLabels = ['TNTC', 'Not TNTC'];
-  const defaultColLabels = ['TNTC', 'Not TNTC'];
-
-  // Props with default values
-  const {
-    data = confusionMatrix,
-    rowLabels = defaultRowLabels,
-    colLabels = defaultColLabels,
-    xAxisName = 'Predicted',
-    yAxisName = 'Actual',
-    width = '500px',
-    height = '400px',
-    onCellClick = (cell) => console.log('Cell clicked:', cell),
-    onCellHover = (cell) => console.log('Cell hover:', cell),
-    loading = false,
-    invertYAxis = true,
-  }: MatrixChartProps = $props();
-</script>
-
-<div data-testid="matrix-wrapper" style="width: 100%; height: 400px;">
-  <Matrix
-    {data}
-    {rowLabels}
-    {colLabels}
-    {xAxisName}
-    {yAxisName}
-    {width}
-    {height}
-    {onCellClick}
-    {onCellHover}
-    {loading}
-    {invertYAxis}
-  />
-</div>

package/dist/components/graphs/matrix/Matrix.test.svelte.d.ts

@@ -1,4 +0,0 @@
-import Matrix, { type MatrixChartProps } from './Matrix.svelte';
-declare const Matrix: import("svelte").Component<MatrixChartProps, {}, "">;
-type Matrix = ReturnType<typeof Matrix>;
-export default Matrix;

package/dist/components/input/Input.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/input/Input.test.js

@@ -1,35 +0,0 @@
-import { render } from '@testing-library/svelte';
-import { describe, it, expect } from 'vitest';
-import Input from './Input.svelte';
-describe('Input', () => {
-    it('should render input with text type when no type is provided', () => {
-        const { getByRole } = render(Input, {
-            props: {
-                value: 'foo',
-            },
-        });
-        const input = getByRole('textbox');
-        expect(input.type).toBe('text');
-    });
-    it('should render label when provided', () => {
-        const { getByLabelText } = render(Input, {
-            props: {
-                value: 'foo',
-                label: 'bar',
-            },
-        });
-        const input = getByLabelText('bar');
-        expect(input.value).toBe('foo');
-    });
-    it('should include placeholder when provided, and contain placeholder class', () => {
-        const { getByRole } = render(Input, {
-            props: {
-                placeholder: 'foo',
-                value: 'foo',
-            },
-        });
-        const input = getByRole('textbox');
-        expect(input.placeholder).toBe('foo');
-        expect(input.classList).toContain('has-placeholder');
-    });
-});

package/dist/components/label/Label.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/label/Label.test.js

@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/svelte';
-import Label from './Label.svelte';
-import { describe, it, expect } from 'vitest';
-describe('Label component', () => {
-    it('renders the label text', () => {
-        const labelText = 'Test Label';
-        render(Label, { props: { text: labelText, forId: 'testId' } });
-        expect(screen.getByText(labelText)).toBeInTheDocument();
-    });
-    it('renders the required indicator when required is true', () => {
-        render(Label, { props: { text: 'Required Label', forId: 'reqId', required: true } });
-        expect(screen.getByText('*')).toBeInTheDocument();
-        expect(screen.getByText('*')).toHaveClass('ml-0.5 text-danger');
-    });
-    it('does not render the required indicator when required is false or not provided', () => {
-        render(Label, { props: { text: 'Optional Label', forId: 'optId' } });
-        expect(screen.queryByText('*')).not.toBeInTheDocument();
-    });
-    it('applies the forId to the for attribute', () => {
-        const testId = 'my-input';
-        render(Label, { props: { text: 'Label for Input', forId: testId } });
-        expect(screen.getByText('Label for Input').closest('label')).toHaveAttribute('for', testId);
-    });
-    it('applies custom classes', () => {
-        const customClass = 'my-custom-class';
-        render(Label, { props: { text: 'Custom Class Label', forId: 'customId', class: customClass } });
-        expect(screen.getByText('Custom Class Label').closest('label')).toHaveClass(customClass);
-    });
-});

package/dist/components/manual-cfu-counter/test/ManualCFUCounter.test.d.ts

@@ -1 +0,0 @@
-export {};