@pie-lib/mask-markup 1.33.3-next.2 → 1.33.4-next.0

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import CorrectInput from '../correct-input';
 
 describe('CorrectInput', () => {
@@ -11,39 +12,79 @@ describe('CorrectInput', () => {
     value: 'Cow',
     onChange,
   };
-  let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<CorrectInput {...defaultProps} />);
+    onChange.mockClear();
   });
 
-  describe('render', () => {
-    it('renders correctly with default props', () => {
-      expect(wrapper).toMatchSnapshot();
+  describe('rendering', () => {
+    it('renders input with default props', () => {
+      render(<CorrectInput {...defaultProps} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveValue('Cow');
     });
 
-    it('renders correctly with disabled prop as true', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper).toMatchSnapshot();
+    it('renders as disabled when disabled prop is true', () => {
+      render(<CorrectInput {...defaultProps} disabled={true} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeDisabled();
     });
 
-    it('renders correctly with correct as false', () => {
-      wrapper.setProps({ correct: false });
-      expect(wrapper).toMatchSnapshot();
+    it('renders with correct state as false', () => {
+      const { container } = render(<CorrectInput {...defaultProps} correct={false} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('renders with correct state as true', () => {
+      const { container } = render(<CorrectInput {...defaultProps} correct={true} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+      // Should show visual indication of correctness
+    });
+
+    it('renders with outlined variant', () => {
+      render(<CorrectInput {...defaultProps} variant="outlined" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
     });
   });
 
-  describe('onChange', () => {
-    const event = (value) => ({
-      target: { value },
+  describe('user interactions', () => {
+    it('calls onChange when user types', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} />);
+
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, '1');
+
+      expect(onChange).toHaveBeenCalled();
+    });
+
+    it('calls onChange with event object', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} value="" />);
+
+      const input = screen.getByRole('textbox');
+      await user.type(input, 'test');
+
+      expect(onChange).toHaveBeenCalled();
+      // Check that onChange receives an event-like object
+      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+      expect(lastCall).toHaveProperty('target');
     });
 
-    it('should be called', () => {
-      const e = event('1');
+    it('updates value when user changes input', async () => {
+      const user = userEvent.setup();
+      render(<CorrectInput {...defaultProps} />);
 
-      wrapper.simulate('change', e);
+      const input = screen.getByRole('textbox');
+      await user.clear(input);
+      await user.type(input, 'Dog');
 
-      expect(onChange).toBeCalledWith(e);
+      expect(onChange).toHaveBeenCalled();
     });
   });
 });

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { choice } from '../../__tests__/utils';
 import Dropdown from '../dropdown';
 
@@ -13,39 +14,80 @@ describe('Dropdown', () => {
     value: 'Jumped',
     choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
   };
-  let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<Dropdown {...defaultProps} />);
+    onChange.mockClear();
   });
 
-  describe('render', () => {
-    it('renders correctly with default props', () => {
-      expect(wrapper).toMatchSnapshot();
+  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 correctly with disabled prop as true', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper).toMatchSnapshot();
+    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('renders correctly with correct as true', () => {
-      wrapper.setProps({ correct: true });
-      expect(wrapper).toMatchSnapshot();
+    it('shows correct state when correct is true', () => {
+      const { container } = render(<Dropdown {...defaultProps} correct={true} />);
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
     });
   });
 
-  describe('onChange', () => {
-    const event = (value) => ({
-      target: { value },
+  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('should be called with an appropriate value', () => {
-      const e = event('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);
 
-      wrapper.simulate('change', e);
+      // 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({ target: { value: e.target.value } });
+      expect(onChange).toHaveBeenCalledWith('1', 'Smiled');
     });
   });
 });

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

@@ -1,50 +1,102 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+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,
-    variant: 'outlined',
     value: 'Cow',
     id: '1',
     onChange,
   };
-  let wrapper;
 
   beforeEach(() => {
-    wrapper = shallow(<Input {...defaultProps} />);
+    onChange.mockClear();
   });
 
-  describe('render', () => {
-    it('renders correctly with default props', () => {
-      expect(wrapper).toMatchSnapshot();
+  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 correctly with disabled prop as true', () => {
-      wrapper.setProps({ disabled: true });
-      expect(wrapper).toMatchSnapshot();
+    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 correctly with correct as false', () => {
-      wrapper.setProps({ correct: false });
-      expect(wrapper).toMatchSnapshot();
+    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('onChange', () => {
-    const event = (value) => ({
-      target: { value },
+  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('should be called', () => {
-      const e = event('20');
+    it('calls onChange with updated value', async () => {
+      const user = userEvent.setup();
+      render(<Input {...defaultProps} />);
 
-      wrapper.simulate('change', e);
+      const input = screen.getByTestId('correct-input');
+      await user.clear(input);
+      await user.type(input, 'New Value');
 
-      expect(onChange).toHaveBeenCalledWith('1', e.target.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);
     });
   });
 });