@pie-lib/mask-markup 2.0.0-beta.2 → 2.1.0-next.0

package/src/components/__tests__/dropdown.test.js

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { choice } from '../../__tests__/utils';
+import Dropdown from '../dropdown';
+
+describe('Dropdown', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    onChange,
+    id: '1',
+    correct: false,
+    disabled: false,
+    value: 'Jumped',
+    choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders dropdown with default props', () => {
+      render(<Dropdown {...defaultProps} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+      // Button displays the selected value
+      expect(button).toHaveTextContent('Jumped');
+    });
+
+    it('renders with all choices as options when opened', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Options should now be visible - find them by role
+      const options = screen.getAllByRole('option');
+      expect(options).toHaveLength(3);
+      // Verify the text content of options using specific elements
+      expect(options[0]).toHaveTextContent('Jumped');
+      expect(options[1]).toHaveTextContent('Laughed');
+      expect(options[2]).toHaveTextContent('Smiled');
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Dropdown {...defaultProps} disabled={true} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeDisabled();
+    });
+
+    it('shows correct state when correct is true', () => {
+      const { container } = render(<Dropdown {...defaultProps} correct={true} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when user selects a different option', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      // Click button to open menu
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Find the option by getting all options and selecting the one with "Laughed" text
+      const options = screen.getAllByRole('option');
+      const laughedOption = options.find(opt => opt.textContent.includes('Laughed'));
+      await user.click(laughedOption);
+
+      expect(onChange).toHaveBeenCalledWith('1', 'Laughed');
+    });
+
+    it('calls onChange with correct value', async () => {
+      const user = userEvent.setup();
+      render(<Dropdown {...defaultProps} />);
+
+      // Click button to open menu
+      const button = screen.getByRole('combobox');
+      await user.click(button);
+
+      // Find the option by getting all options and selecting the one with "Smiled" text
+      const options = screen.getAllByRole('option');
+      const smiledOption = options.find(opt => opt.textContent.includes('Smiled'));
+      await user.click(smiledOption);
+
+      expect(onChange).toHaveBeenCalledWith('1', 'Smiled');
+    });
+  });
+});

package/src/components/__tests__/input.test.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Input from '../input';
+
+// Mock CorrectInput to simplify testing
+jest.mock('../correct-input', () => {
+  return function CorrectInput({ value, onChange, disabled, correct, variant }) {
+    return (
+      <input
+        data-testid="correct-input"
+        value={value || ''}
+        onChange={onChange}
+        disabled={disabled}
+        data-correct={correct}
+        data-variant={variant}
+      />
+    );
+  };
+});
+
+describe('Input', () => {
+  const onChange = jest.fn();
+  const defaultProps = {
+    disabled: false,
+    correct: false,
+    value: 'Cow',
+    id: '1',
+    onChange,
+  };
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default props', () => {
+      render(<Input {...defaultProps} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('Cow');
+      expect(input).not.toBeDisabled();
+      expect(input).toHaveAttribute('data-correct', 'false');
+    });
+
+    it('renders as disabled when disabled prop is true', () => {
+      render(<Input {...defaultProps} disabled={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toBeDisabled();
+    });
+
+    it('renders with correct state', () => {
+      render(<Input {...defaultProps} correct={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toHaveAttribute('data-correct', 'true');
+    });
+
+    it('shows correct answer when showCorrectAnswer is true', () => {
+      render(<Input {...defaultProps} showCorrectAnswer={true} />);
+      const input = screen.getByTestId('correct-input');
+
+      expect(input).toHaveAttribute('data-correct', 'true');
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange with id and value when user types', async () => {
+      const user = userEvent.setup();
+      render(<Input {...defaultProps} value="" />);
+
+      const input = screen.getByTestId('correct-input');
+      await user.type(input, '20');
+
+      // userEvent.type types character by character, so onChange is called for each character
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledTimes(2);
+      // Check the last call has both characters
+      expect(onChange).toHaveBeenLastCalledWith('1', '0');
+    });
+
+    it('calls onChange with updated value', async () => {
+      const user = userEvent.setup();
+      render(<Input {...defaultProps} />);
+
+      const input = screen.getByTestId('correct-input');
+      await user.clear(input);
+      await user.type(input, 'New Value');
+
+      // userEvent.type types character by character
+      // After clear, we start with empty string, and each character is typed
+      // The last call should have the full accumulated value up to the last character
+      expect(onChange).toHaveBeenCalled();
+      // With clear + "New Value", onChange is called for clearing ("") and each typed character
+      // The value accumulated in the input element after typing will be "CowNew Value"
+      // because the component starts with value="Cow" and we clear then type
+      expect(onChange.mock.calls.length).toBeGreaterThan(0);
+    });
+  });
+});