@discourser/design-system 0.26.0 → 0.27.0

package/src/components/__tests__/AbsoluteCenter.test.tsx

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { AbsoluteCenter } from '../AbsoluteCenter';
+
+describe('AbsoluteCenter', () => {
+  it('renders children', () => {
+    render(<AbsoluteCenter>Centered content</AbsoluteCenter>);
+    expect(screen.getByText('Centered content')).toBeDefined();
+  });
+
+  it('renders as a div element', () => {
+    const { container } = render(<AbsoluteCenter>Content</AbsoluteCenter>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts and passes through className', () => {
+    const { container } = render(
+      <AbsoluteCenter className="custom-class">Content</AbsoluteCenter>,
+    );
+    const el = container.querySelector('.custom-class');
+    expect(el).toBeDefined();
+  });
+
+  it('accepts and forwards arbitrary HTML attributes', () => {
+    render(
+      <AbsoluteCenter data-testid="absolute-center">Content</AbsoluteCenter>,
+    );
+    expect(screen.getByTestId('absolute-center')).toBeDefined();
+  });
+});

package/src/components/__tests__/Divider.test.tsx

@@ -0,0 +1,38 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Divider } from '../divider';
+
+describe('Divider', () => {
+  it('renders a div with role="separator" by default', () => {
+    render(<Divider />);
+    expect(screen.getByRole('separator')).toBeDefined();
+  });
+
+  it('has aria-orientation="horizontal" by default', () => {
+    render(<Divider />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('horizontal');
+  });
+
+  it('renders label text when label prop is provided', () => {
+    render(<Divider label="OR" />);
+    expect(screen.getByText('OR')).toBeDefined();
+  });
+
+  it('renders aria-orientation="vertical" when orientation="vertical"', () => {
+    render(<Divider orientation="vertical" />);
+    const el = screen.getByRole('separator');
+    expect(el.getAttribute('aria-orientation')).toBe('vertical');
+  });
+
+  it('renders without label when no label prop provided', () => {
+    const { container } = render(<Divider />);
+    expect(container.querySelector('span')).toBeNull();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Divider className="my-divider" />);
+    expect(container.querySelector('.my-divider')).toBeDefined();
+  });
+});

package/src/components/__tests__/Group.test.tsx

@@ -0,0 +1,34 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Group } from '../Group';
+
+describe('Group', () => {
+  it('renders children', () => {
+    render(<Group>Child content</Group>);
+    expect(screen.getByText('Child content')).toBeDefined();
+  });
+
+  it('renders as a div', () => {
+    const { container } = render(<Group>Content</Group>);
+    expect(container.querySelector('div')).toBeDefined();
+  });
+
+  it('accepts data-testid', () => {
+    render(<Group data-testid="my-group">Content</Group>);
+    expect(screen.getByTestId('my-group')).toBeDefined();
+  });
+
+  it('renders all children', () => {
+    render(
+      <Group>
+        <span>First</span>
+        <span>Second</span>
+        <span>Third</span>
+      </Group>,
+    );
+    expect(screen.getByText('First')).toBeDefined();
+    expect(screen.getByText('Second')).toBeDefined();
+    expect(screen.getByText('Third')).toBeDefined();
+  });
+});

package/src/components/__tests__/Icon.test.tsx

@@ -0,0 +1,31 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Icon } from '../Icon';
+
+describe('Icon', () => {
+  it('renders as an svg element', () => {
+    const { container } = render(<Icon />);
+    expect(container.querySelector('svg')).toBeDefined();
+  });
+
+  it('renders children (inner SVG content)', () => {
+    const { container } = render(
+      <Icon>
+        <circle cx="12" cy="12" r="10" />
+      </Icon>,
+    );
+    expect(container.querySelector('circle')).toBeDefined();
+  });
+
+  it('accepts className passthrough', () => {
+    const { container } = render(<Icon className="custom-icon" />);
+    expect(container.querySelector('.custom-icon')).toBeDefined();
+  });
+
+  it('accepts aria-label for accessibility', () => {
+    const { container } = render(<Icon aria-label="circle icon" />);
+    const svg = container.querySelector('svg');
+    expect(svg?.getAttribute('aria-label')).toBe('circle icon');
+  });
+});

package/src/components/__tests__/SettingsPopover.test.tsx

@@ -0,0 +1,39 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SettingsPopover } from '../SettingsPopover';
+
+const defaultProps = {
+  userName: 'Jane Doe',
+  userTier: 'Pro',
+  userEmail: 'jane@example.com',
+  actions: [{ key: 'logout', label: 'Logout', onClick: () => {} }],
+};
+
+describe('SettingsPopover', () => {
+  it('renders the trigger button with userName', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Jane Doe')).toBeDefined();
+  });
+
+  it('renders userTier in the trigger', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByText('Pro')).toBeDefined();
+  });
+
+  it('trigger button has correct aria-label (default: "User settings")', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    expect(screen.getByRole('button', { name: 'User settings' })).toBeDefined();
+  });
+
+  it('accepts custom ariaLabel prop', () => {
+    render(<SettingsPopover {...defaultProps} ariaLabel="Account menu" />);
+    expect(screen.getByRole('button', { name: 'Account menu' })).toBeDefined();
+  });
+
+  it('renders the trigger as a button element', () => {
+    render(<SettingsPopover {...defaultProps} />);
+    const btn = screen.getByRole('button', { name: 'User settings' });
+    expect(btn.tagName.toLowerCase()).toBe('button');
+  });
+});

package/src/components/__tests__/StudioControls.test.tsx

@@ -0,0 +1,59 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { StudioControls } from '../StudioControls';
+
+const defaultProps = {
+  scenarioName: 'UX Interview Practice',
+  scenarioFocus: 'Technical Communication',
+  scenarioLevel: 'beginner' as const,
+};
+
+describe('StudioControls', () => {
+  it('renders the component without crashing', () => {
+    const { container } = render(<StudioControls {...defaultProps} />);
+    expect(container.firstChild).toBeDefined();
+  });
+
+  it('renders scenarioName text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('UX Interview Practice')).toBeDefined();
+  });
+
+  it('renders scenarioFocus text in the document', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText(/Technical Communication/)).toBeDefined();
+  });
+
+  it('renders "Scenario Settings" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    // "Scenario Settings" appears in both the accordion trigger and the settings card heading
+    const matches = screen.getAllByText('Scenario Settings');
+    expect(matches.length).toBeGreaterThan(0);
+  });
+
+  it('renders "Audio Output" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Audio Output')).toBeDefined();
+  });
+
+  it('renders "Microphone Input" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Microphone Input')).toBeDefined();
+  });
+
+  it('renders "A/V Recording" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('A/V Recording')).toBeDefined();
+  });
+
+  it('renders "Display Timer" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Display Timer')).toBeDefined();
+  });
+
+  it('renders "Hide Interviewers" accordion trigger text', () => {
+    render(<StudioControls {...defaultProps} />);
+    expect(screen.getByText('Hide Interviewers')).toBeDefined();
+  });
+});

package/src/components/__tests__/Toaster.test.tsx

@@ -0,0 +1,24 @@
+/* global describe, it, expect */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Toaster, toaster } from '../Toast';
+
+describe('Toaster', () => {
+  it('toaster imperative API exists and is not null', () => {
+    expect(toaster).toBeDefined();
+    expect(toaster).not.toBeNull();
+  });
+
+  it('toaster has a create method', () => {
+    expect(typeof toaster.create).toBe('function');
+  });
+
+  it('Toaster is a function (renderable component)', () => {
+    expect(typeof Toaster).toBe('function');
+  });
+
+  it('renders without crashing', () => {
+    const { container } = render(<Toaster />);
+    expect(container).toBeDefined();
+  });
+});