@reshape-biotech/design-system 2.3.1 → 2.4.1

package/dist/components/multi-cfu-counter/test/MultiCFUCounter.test.js

@@ -0,0 +1,320 @@
+import { render, fireEvent, waitFor, findByText, findByRole, getByTestId, } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { tick } from 'svelte';
+import MultiCFUCounter from '../MultiCFUCounter.svelte';
+import MultiCFUCounterTestWrapper from './MultiCFUCounterTestWrapper.svelte';
+class MockImage {
+    width = 464;
+    height = 464;
+    src = '';
+    onload = null;
+    complete = false;
+    constructor() {
+        // Set a timeout to simulate async image loading
+        setTimeout(() => {
+            this.complete = true;
+            if (this.onload)
+                this.onload();
+        }, 0);
+    }
+}
+if (typeof global !== 'undefined') {
+    global.Image = MockImage;
+    // mock resizeobserver which isn't available in gh actions environment
+    class MockResizeObserver {
+        observe = vi.fn();
+        unobserve = vi.fn();
+        disconnect = vi.fn();
+    }
+    global.ResizeObserver = MockResizeObserver;
+}
+const simulateImageLoad = async () => {
+    await tick();
+};
+describe('ManualCFUCounter Component', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders with default props', async () => {
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg');
+        const image = container.querySelector('image');
+        const dotsGroup = container.querySelector('#dots');
+        expect(svg).toBeTruthy();
+        expect(image).toBeTruthy();
+        expect(dotsGroup).toBeTruthy();
+        const mainSvg = container.querySelector('svg[role="application"]');
+        expect(mainSvg).toBeTruthy();
+        expect(mainSvg?.getAttribute('role')).toBe('application');
+        expect(mainSvg?.getAttribute('aria-label')).toContain('CFU Counter');
+    });
+    it('displays action buttons when marks are present', async () => {
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                marks: [{ x: 10, y: 10 }],
+                activeMarkerName: 'Test Marker',
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = await findByRole(container, 'button', { name: /Undo last mark/i });
+        const clearButton = await findByText(container, 'Clear all');
+        expect(undoButton).toBeTruthy();
+        expect(clearButton).toBeTruthy();
+    });
+    it('does not display action buttons when hideMarkers is true', async () => {
+        const { queryByAltText, queryByText } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                hideMarkers: true,
+                marks: [{ x: 10, y: 10 }],
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = queryByAltText('Undo last mark');
+        const clearButton = queryByText('Clear all');
+        expect(undoButton).toBeFalsy();
+        expect(clearButton).toBeFalsy();
+    });
+    it('does not display action buttons when disabled is true', async () => {
+        const { queryByAltText, queryByText } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                disabled: true,
+                marks: [{ x: 10, y: 10 }],
+            },
+        });
+        await simulateImageLoad();
+        const undoButton = queryByAltText('Undo last mark');
+        const clearButton = queryByText('Clear all');
+        expect(undoButton).toBeFalsy();
+        expect(clearButton).toBeFalsy();
+    });
+    it('adds cursor-not-allowed class when disabled', async () => {
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                disabled: true,
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg');
+        expect(svg?.classList.contains('cursor-not-allowed')).toBe(true);
+    });
+    it('renders with initial marks provided via marks prop', async () => {
+        const initialMarksData = [
+            { x: 100, y: 100 },
+            { x: 200, y: 200 },
+        ];
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                marks: initialMarksData,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        const marksCount = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCount?.textContent).toBe('2');
+        const markers = container.querySelectorAll('[data-testid^="marker-"]');
+        expect(markers.length).toBe(2);
+        const circles = container.querySelectorAll('circle');
+        expect(circles.length).toBe(2);
+        expect(circles[0].getAttribute('cx')).toBe('100');
+        expect(circles[0].getAttribute('cy')).toBe('100');
+        expect(circles[1].getAttribute('cx')).toBe('200');
+        expect(circles[1].getAttribute('cy')).toBe('200');
+    });
+    it('simulates adding a marker via direct click', async () => {
+        const mockOnClick = vi.fn();
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        const marksCountBefore = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCountBefore?.textContent).toBe('0');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, {
+                    clientX: 100,
+                    clientY: 100,
+                });
+            }
+            await waitFor(() => {
+                expect(mockOnClick).toHaveBeenCalledTimes(1);
+            });
+            const callArgs = mockOnClick.mock.calls[0];
+            const addedMarks = callArgs[1];
+            expect(addedMarks.length).toBe(1);
+            expect(addedMarks[0].x).toBeCloseTo(100);
+            expect(addedMarks[0].y).toBeCloseTo(100);
+            await waitFor(() => {
+                const marksCountAfter = container.querySelector('[data-testid="marks-count"]');
+                expect(marksCountAfter?.textContent).toBe('1');
+            });
+            const marker = container.querySelector('[data-testid="marker-1"]');
+            expect(marker).toBeTruthy();
+        }
+    });
+    it('simulates adding multiple markers via clicks', async () => {
+        const mockOnClick = vi.fn();
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        let marksCount = container.querySelector('[data-testid="marks-count"]');
+        expect(marksCount?.textContent).toBe('0');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, {
+                    clientX: 100,
+                    clientY: 100,
+                });
+                await waitFor(() => {
+                    expect(mockOnClick).toHaveBeenCalledTimes(1);
+                });
+                let firstCallArgs = mockOnClick.mock.calls[0];
+                let firstMarks = firstCallArgs[1];
+                expect(firstMarks.length).toBe(1);
+                await fireEvent.click(viewportElement, {
+                    clientX: 200,
+                    clientY: 200,
+                });
+            }
+            await waitFor(() => {
+                expect(mockOnClick).toHaveBeenCalledTimes(2);
+            });
+            let secondCallArgs = mockOnClick.mock.calls[1];
+            let secondMarks = secondCallArgs[1];
+            expect(secondMarks.length).toBe(2);
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(2);
+            const circles = container.querySelectorAll('circle');
+            expect(circles.length).toBe(2);
+            expect(mockOnClick).toHaveBeenCalledTimes(2);
+        }
+    });
+    it('simulates clearing marks through the reset button', async () => {
+        const mockOnClick = vi.fn();
+        const initialMarksData = [
+            { x: 100, y: 100 },
+            { x: 200, y: 200 },
+        ];
+        const { container, component } = render(MultiCFUCounterTestWrapper, {
+            props: {
+                initialTestMarks: initialMarksData,
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        let marksCount = getByTestId(container, 'marks-count');
+        expect(marksCount?.textContent).toBe('2');
+        const clearButton = await findByText(container, 'Clear all');
+        expect(clearButton).toBeTruthy();
+        if (clearButton) {
+            await fireEvent.click(clearButton);
+            await tick();
+            const wrapperInstance = component;
+            const currentWrapperMarks = wrapperInstance.getCurrentMarks();
+            expect(currentWrapperMarks.length).toBe(0);
+            marksCount = getByTestId(container, 'wrapper-marks-count');
+            expect(marksCount?.textContent).toBe('0');
+            const innerMarksCount = getByTestId(container, 'marks-count');
+            expect(innerMarksCount?.textContent).toBe('0');
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(0);
+            expect(mockOnClick).not.toHaveBeenCalledWith();
+        }
+    });
+    it('properly constrains pan to prevent moving outside container', async () => {
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const viewport = container.querySelector('#viewport');
+        expect(viewport).toBeTruthy();
+        expect(viewport?.getAttribute('transform')).toBe('translate(0, 0) scale(1)');
+    });
+    it('properly sets up keyboard accessibility attributes', async () => {
+        const { container } = render(MultiCFUCounter, {
+            props: {
+                imageUrl: 'test-image.jpg',
+            },
+        });
+        await simulateImageLoad();
+        const svg = container.querySelector('svg[role="application"]');
+        expect(svg?.getAttribute('tabindex')).toBe('0');
+        expect(svg?.getAttribute('role')).toBe('application');
+        expect(svg?.getAttribute('aria-label')).toContain('CFU Counter');
+    });
+    it('simulates undoing a marker addition via the undo button', async () => {
+        const mockOnClick = vi.fn();
+        const initialMarksData = [{ x: 50, y: 50 }];
+        const { container, component } = render(MultiCFUCounterTestWrapper, {
+            props: {
+                initialTestMarks: initialMarksData,
+                onclick: mockOnClick,
+            },
+        });
+        await simulateImageLoad();
+        await tick();
+        let marksCount = getByTestId(container, 'marks-count');
+        expect(marksCount?.textContent).toBe('1');
+        const svg = container.querySelector('svg');
+        expect(svg).toBeTruthy();
+        if (svg) {
+            const viewportElement = container.querySelector('#viewport');
+            expect(viewportElement).toBeTruthy();
+            if (viewportElement) {
+                await fireEvent.click(viewportElement, { clientX: 100, clientY: 100 });
+            }
+            await tick();
+            const wrapperInstance = component;
+            const marksAfterClick = wrapperInstance.getCurrentMarks();
+            expect(marksAfterClick.length).toBe(2);
+            mockOnClick.mockClear();
+        }
+        const undoButton = await findByRole(container, 'button', { name: /Undo last mark/i });
+        expect(undoButton).toBeTruthy();
+        if (undoButton) {
+            await fireEvent.click(undoButton);
+            await tick();
+            const wrapperInstance = component;
+            const marksAfterUndo = wrapperInstance.getCurrentMarks();
+            expect(marksAfterUndo.length).toBe(1);
+            expect(marksAfterUndo[0].x).toBeCloseTo(50);
+            expect(marksAfterUndo[0].y).toBeCloseTo(50);
+            await waitFor(() => {
+                const innerMarksCount = getByTestId(container, 'marks-count');
+                expect(innerMarksCount?.textContent).toBe('1');
+                const wrapperMarksCount = getByTestId(container, 'wrapper-marks-count');
+                expect(wrapperMarksCount?.textContent).toBe('1');
+            });
+            const markers = container.querySelectorAll('[data-testid^="marker-"]');
+            expect(markers.length).toBe(1);
+            expect(mockOnClick).not.toHaveBeenCalled();
+        }
+    });
+});

package/dist/components/progress-circle/ProgressCircle.svelte

@@ -19,7 +19,7 @@
   const radius = size === 'md' ? 7 : 6;
 
   // Create the circle path
-  const path = `M ${center} ${center - radius} 
+  const path = `M ${center} ${center - radius}
               A ${radius} ${radius} 0 1 1 ${center - 0.01} ${center - radius}`;
 </script>
 

package/dist/components/select/components/SelectItem.svelte

@@ -13,8 +13,8 @@
   let { class: className = '', children, ...restProps }: Props = $props();
 
   const baseClasses = `
-        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none 
-        focus:bg-neutral focus:text-accent-foreground 
+        relative flex w-full h-auto gap-2 cursor-default select-none items-center justify-between rounded-lg p-3 text-sm outline-none
+        focus:bg-neutral focus:text-accent-foreground
         data-[disabled]:pointer-events-none data-[disabled]:opacity-50
         data-[highlighted]:bg-neutral data-[highlighted]:text-accent-foreground
     `;

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte

@@ -86,7 +86,7 @@
 <Input
   bind:value={() => getStringValue(), (v) => setNumericValue(v)}
   placeholder={String(placeholder)}
-  type={'number'}
+  type={'text'}
   inputmode={'decimal'}
   pattern={config?.schema?.type === 'integer' ? '-?\\d*' : '-?\\d*\\.?\\d*'}
   {readonly}

package/dist/components/sjsf-wrappers/SjsfNumberInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfNumberInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
+declare const SjsfNumberInputWrapper: import("svelte").Component<any, {}, "value">;
 type SjsfNumberInputWrapper = ReturnType<typeof SjsfNumberInputWrapper>;
 export default SjsfNumberInputWrapper;

package/dist/components/sjsf-wrappers/SjsfSelectWidgetWrapper.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { getFormContext, selectAttributes } from '@sjsf/form';
+  import type { ComponentProps } from '@sjsf/form';
+  import * as Select from '../select';
+
+  type Props = ComponentProps['selectWidget'];
+  let { handlers, value = $bindable(), options = [], config }: Props = $props();
+
+  const ctx = getFormContext();
+  const attributes = $derived(
+    selectAttributes(ctx, config, 'select', handlers, { style: 'flex-grow: 1' })
+  );
+
+  const isPrimitive = (v: unknown): v is string | number | boolean =>
+    ['string', 'number', 'boolean'].includes(typeof v);
+
+  let domValue = $derived.by(() => {
+    const primitiveMatch = options.find((o) => isPrimitive(o.value) && o.value === value);
+    if (primitiveMatch) return String(primitiveMatch.value);
+    const idx = options.findIndex((o) => o.value === value);
+    return idx >= 0 ? String(idx) : '';
+  });
+
+  const onSelectChange = (v: string | undefined) => {
+    if (v === undefined || v === '') {
+      value = undefined;
+    } else {
+      const primitiveMatch = options.find((o) => isPrimitive(o.value) && String(o.value) === v);
+      if (primitiveMatch) {
+        value = primitiveMatch.value;
+      } else {
+        const idx = Number(v);
+        if (!Number.isNaN(idx) && options[idx]) {
+          value = options[idx].value;
+        }
+      }
+    }
+    if (typeof (attributes as any).onchange === 'function') {
+      (attributes as any).onchange(new Event('change'));
+    }
+  };
+</script>
+
+<input
+  type="hidden"
+  name={String(attributes.name)}
+  id={String(attributes.id)}
+  value={domValue}
+  disabled={attributes.disabled}
+/>
+
+<Select.Root value={domValue} type="single" items={[]} onValueChange={onSelectChange}>
+  <Select.Trigger
+    placeholder={attributes.placeholder ?? undefined}
+    displayValue={options.find((o) => isPrimitive(o.value) && String(o.value) === domValue)
+      ?.label || options.find((o, idx) => String(idx) === domValue && !isPrimitive(o.value))?.label}
+    disabled={attributes.disabled}
+  />
+  <Select.Portal>
+    <Select.Content>
+      {#if config.schema.default === undefined}
+        <Select.Item value="" label={attributes.placeholder ?? undefined} />
+      {/if}
+      {#each options as option, index (option.id)}
+        {#if isPrimitive(option.value)}
+          <Select.Item
+            value={String(option.value)}
+            label={option.label}
+            disabled={option.disabled}
+          />
+        {:else}
+          <Select.Item value={String(index)} label={option.label} disabled={option.disabled} />
+        {/if}
+      {/each}
+    </Select.Content>
+  </Select.Portal>
+</Select.Root>

package/dist/components/sjsf-wrappers/SjsfSelectWidgetWrapper.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SjsfSelectWidgetWrapper: import("svelte").Component<any, {}, "value">;
+type SjsfSelectWidgetWrapper = ReturnType<typeof SjsfSelectWidgetWrapper>;
+export default SjsfSelectWidgetWrapper;

package/dist/components/sjsf-wrappers/SjsfTextInputWrapper.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const SjsfTextInputWrapper: import("svelte").Component<ComponentProps, {}, "value">;
+declare const SjsfTextInputWrapper: import("svelte").Component<any, {}, "value">;
 type SjsfTextInputWrapper = ReturnType<typeof SjsfTextInputWrapper>;
 export default SjsfTextInputWrapper;

package/dist/components/sjsf-wrappers/sjsfCustomTheme.js

@@ -2,7 +2,11 @@ import { theme as BasicTheme } from '@sjsf/basic-theme';
 import { overrideByRecord } from '@sjsf/form/lib/resolver';
 import SjsfNumberInputWrapper from './SjsfNumberInputWrapper.svelte';
 import SjsfTextInputWrapper from './SjsfTextInputWrapper.svelte';
+import EnumField from '@sjsf/form/fields/extra-fields/enum.svelte';
+import SjsfSelectWidgetWrapper from './SjsfSelectWidgetWrapper.svelte';
 export const sjsfCustomTheme = overrideByRecord(BasicTheme, {
     numberWidget: SjsfNumberInputWrapper,
     textWidget: SjsfTextInputWrapper,
+    enumField: EnumField,
+    selectWidget: SjsfSelectWidgetWrapper,
 });

package/dist/components/slider/Slider.stories.svelte

@@ -35,3 +35,8 @@
     bufferColorClass="bg-danger-inverse"
   ></Slider>
 </Story>
+<Story name="Disabled" asChild>
+  <div class="opacity-75">
+    <Slider value={2} max={4} buffer={2} disabled></Slider>
+  </div>
+</Story>

package/dist/components/slider/Slider.svelte

@@ -14,6 +14,7 @@
   export let onMousedown: () => void = () => {};
   export let onMouseup: () => void = () => {};
   export let id: string | undefined = undefined;
+  export let disabled = false;
 
   $: if (value > max) {
     value = max;
@@ -29,7 +30,7 @@
   }
 </script>
 
-<div class={`relative flex h-10 items-center ${className}`}>
+<div class={`relative flex h-10 items-center ${className} ${disabled ? 'opacity-40' : ''}`}>
   <div class="track-overlay"></div>
   <div
     class="pointer-events-none absolute h-2.5 rounded-full {bufferColorClass}"
@@ -62,6 +63,7 @@
     bind:value
     on:mousedown={onMousedown}
     on:mouseup={onMouseup}
+    {disabled}
   />
   <div class="thumb-overlay" style="left: {calculatePosition(value)} + 0.5rem)">
     <Icon iconName="CaretUpDown" class="rotate-90" />
@@ -124,4 +126,8 @@
       height: 0;
       border: none;
     }
+
+  input[type='range']:disabled {
+      cursor: not-allowed;
+    }
 </style>

package/dist/components/slider/Slider.svelte.d.ts

@@ -24,6 +24,7 @@ declare const Slider: $$__sveltets_2_IsomorphicComponent<{
     onMousedown?: () => void;
     onMouseup?: () => void;
     id?: string | undefined;
+    disabled?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/stat-card/StatCard.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/stat-card/StatCard.test.js

@@ -0,0 +1,54 @@
+import { render, fireEvent, screen } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import StatCard from './StatCard.svelte';
+import '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+describe('StatCard', () => {
+    it('should focus the input field when the pencil edit icon is clicked', async () => {
+        render(StatCard, {
+            props: {
+                title: 'Test Stat',
+                value: 'Initial Value',
+                editable: true,
+                onsubmit: vi.fn(),
+            },
+        });
+        const pencilButton = screen.getByRole('button');
+        await fireEvent.click(pencilButton);
+        // Wait for Svelte's reactivity and the $effect with tick() to apply focus
+        await tick();
+        const inputField = screen.getByRole('textbox');
+        expect(inputField).toHaveFocus();
+    });
+    it('should focus the input field when the card body is clicked', async () => {
+        render(StatCard, {
+            props: {
+                title: 'Clickable Stat',
+                value: 'Initial Value',
+                editable: true,
+                onsubmit: vi.fn(),
+            },
+        });
+        const cardBody = screen.getByTestId('stat-card-body');
+        await fireEvent.click(cardBody);
+        await tick(); // Wait for Svelte's reactivity
+        const inputField = screen.getByRole('textbox');
+        expect(inputField).toHaveFocus();
+    });
+    it('should not focus the input field when the card body is clicked, out of editable state', async () => {
+        render(StatCard, {
+            props: {
+                title: 'Clickable Stat',
+                value: 'Initial Value',
+                editable: false,
+                onsubmit: vi.fn(),
+            },
+        });
+        const cardBody = screen.getByTestId('stat-card-body');
+        await fireEvent.click(cardBody);
+        await tick(); // Wait for Svelte's reactivity
+        // When not editable, the input field should not be rendered
+        const inputField = screen.queryByRole('textbox');
+        expect(inputField).toBeNull();
+    });
+});

package/dist/components/table/Table.test.d.ts

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

package/dist/components/table/Table.test.js

@@ -0,0 +1,97 @@
+import { render, screen } from '@testing-library/svelte';
+import Table from './Table.test.svelte';
+const users = [
+    {
+        name: 'John Doe',
+        age: 25,
+        role: 'admin',
+    },
+    {
+        name: 'Jane Smith',
+        age: 32,
+        role: 'member',
+    },
+    {
+        name: 'Michael Johnson',
+        age: 41,
+        role: 'deactivated',
+    },
+    {
+        name: 'Emily Brown',
+        age: 28,
+        role: 'member',
+    },
+    {
+        name: 'David Lee',
+        age: 37,
+        role: 'admin',
+    },
+    {
+        name: 'Sarah Wilson',
+        age: 29,
+        role: 'member',
+    },
+    {
+        name: 'Robert Taylor',
+        age: 45,
+        role: 'deactivated',
+    },
+    {
+        name: 'Lisa Anderson',
+        age: 33,
+        role: 'member',
+    },
+    {
+        name: 'James Martinez',
+        age: 39,
+        role: 'admin',
+    },
+    {
+        name: 'Jennifer Garcia',
+        age: 31,
+        role: 'deactivated',
+    },
+];
+describe('Table Component', () => {
+    it('renders the table with correct headers', () => {
+        render(Table, { props: { users } });
+        expect(screen.getByText('Name')).toBeInTheDocument();
+        expect(screen.getByText('Age')).toBeInTheDocument();
+        expect(screen.getByText('Role')).toBeInTheDocument();
+    });
+    it('renders table rows with user data', () => {
+        render(Table, { props: { users } });
+        users.forEach((user) => {
+            expect(screen.getByTestId(`user-${user.name}`)).toBeInTheDocument();
+            expect(screen.getByTestId(`user-${user.name}-age`)).toBeInTheDocument();
+            expect(screen.getByTestId(`user-${user.name}-role`)).toBeInTheDocument();
+        });
+    });
+    it('applies disabled class to deactivated users', () => {
+        render(Table, { props: { users } });
+        const deactivatedUser = screen.getByText('Michael Johnson');
+        expect(deactivatedUser.closest('tr')).toHaveClass('disabled');
+    });
+    it('renders phone icon button for admin users', () => {
+        render(Table, { props: { users, userRole: 'admin' } });
+        const phoneIcon = screen.getAllByTestId('phone-icon');
+        expect(phoneIcon).toHaveLength(users.length);
+    });
+    it('does not render phone icon button for non-admin users', () => {
+        render(Table, { props: { users, userRole: 'member' } });
+        const phoneIcon = screen.queryAllByTestId('phone-icon');
+        expect(phoneIcon).toHaveLength(0);
+    });
+    it('applies disabled styles to td elements when disabled', () => {
+        render(Table, { props: { users, userRole: 'member' } });
+        const deactivatedUser = screen.getByText('Michael Johnson');
+        const tr = deactivatedUser.closest('tr');
+        if (tr) {
+            expect(tr.classList.contains('disabled')).toBe(true);
+            expect(tr.classList.contains('[&.disabled]:text-tertiary')).toBe(true);
+        }
+        else {
+            throw new Error('Tr element not found');
+        }
+    });
+});