@pie-lib/config-ui 13.1.0-beta.8 → 13.1.0-beta.9

package/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -1,141 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { buildDefaults, FeedbackConfig } from '../index';
-
-// Mock FeedbackSelector to simplify testing
-jest.mock('../feedback-selector', () => {
-  return function FeedbackSelector({ label, feedback, onChange }) {
-    return (
-      <div data-testid="feedback-selector">
-        <label>{label}</label>
-        <select
-          aria-label={label}
-          value={feedback.type}
-          onChange={(e) => onChange({ ...feedback, type: e.target.value })}
-        >
-          <option value="default">Default</option>
-          <option value="custom">Custom</option>
-          <option value="none">None</option>
-        </select>
-      </div>
-    );
-  };
-});
-
-describe('FeedbackConfig', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default feedback types', () => {
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
-
-      expect(screen.getByText('Feedback')).toBeInTheDocument();
-      expect(screen.getByText('If correct, show')).toBeInTheDocument();
-      expect(screen.getByText('If partially correct, show')).toBeInTheDocument();
-      expect(screen.getByText('If incorrect, show')).toBeInTheDocument();
-    });
-
-    it('renders all three feedback selectors by default', () => {
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
-
-      const selectors = screen.getAllByTestId('feedback-selector');
-      expect(selectors).toHaveLength(3);
-    });
-
-    it('does not render partial feedback selector when allowPartial is false', () => {
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig allowPartial={false} feedback={feedback} onChange={onChange} />);
-
-      expect(screen.getByText('If correct, show')).toBeInTheDocument();
-      expect(screen.queryByText('If partially correct, show')).not.toBeInTheDocument();
-      expect(screen.getByText('If incorrect, show')).toBeInTheDocument();
-
-      const selectors = screen.getAllByTestId('feedback-selector');
-      expect(selectors).toHaveLength(2);
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when correct feedback type changes', async () => {
-      const user = userEvent.setup();
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
-
-      const correctSelect = screen.getByLabelText('If correct, show');
-      await user.selectOptions(correctSelect, 'custom');
-
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          correct: expect.objectContaining({ type: 'custom' }),
-        }),
-      );
-    });
-
-    it('calls onChange when incorrect feedback type changes', async () => {
-      const user = userEvent.setup();
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
-
-      const incorrectSelect = screen.getByLabelText('If incorrect, show');
-      await user.selectOptions(incorrectSelect, 'none');
-
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          incorrect: expect.objectContaining({ type: 'none' }),
-        }),
-      );
-    });
-
-    it('calls onChange when partial feedback type changes', async () => {
-      const user = userEvent.setup();
-      const feedback = buildDefaults();
-
-      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
-
-      const partialSelect = screen.getByLabelText('If partially correct, show');
-      await user.selectOptions(partialSelect, 'custom');
-
-      expect(onChange).toHaveBeenCalledWith(
-        expect.objectContaining({
-          partial: expect.objectContaining({ type: 'custom' }),
-        }),
-      );
-    });
-  });
-
-  describe('buildDefaults helper', () => {
-    it('returns default feedback configuration', () => {
-      const defaults = buildDefaults();
-
-      expect(defaults).toEqual({
-        correct: { type: 'default', default: 'Correct' },
-        incorrect: { type: 'default', default: 'Incorrect' },
-        partial: { type: 'default', default: 'Nearly' },
-      });
-    });
-
-    it('merges custom values with defaults', () => {
-      const defaults = buildDefaults({
-        correct: { type: 'custom', custom: 'Great job!' },
-      });
-
-      expect(defaults).toEqual({
-        correct: { type: 'custom', default: 'Correct', custom: 'Great job!' },
-        incorrect: { type: 'default', default: 'Incorrect' },
-        partial: { type: 'default', default: 'Nearly' },
-      });
-    });
-  });
-});

package/src/feedback-config/__tests__/feedback-selector.test.jsx

@@ -1,97 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { FeedbackSelector } from '../feedback-selector';
-
-// Mock the editable-html component to avoid window dependencies in tests
-jest.mock('@pie-lib/editable-html-tip-tap', () => {
-  return {
-    __esModule: true,
-    default: ({ markup, onChange }) => (
-      <textarea data-testid="editable-html" defaultValue={markup || ''} onChange={(e) => onChange(e.target.value)} />
-    ),
-  };
-});
-
-describe('feedback-selector', () => {
-  let onChange;
-
-  const renderComponent = (feedback = { type: 'default', default: 'hi' }) => {
-    return render(<FeedbackSelector label={'Feedback'} onChange={onChange} feedback={feedback} />);
-  };
-
-  beforeEach(() => {
-    onChange = jest.fn();
-  });
-
-  describe('rendering', () => {
-    it('renders feedback type selector', () => {
-      renderComponent();
-      expect(screen.getByText('Simple Feedback')).toBeInTheDocument();
-      expect(screen.getByText('No Feedback')).toBeInTheDocument();
-      expect(screen.getByText('Customized Feedback')).toBeInTheDocument();
-    });
-
-    it('shows default feedback text when type is default', () => {
-      renderComponent({ type: 'default', default: 'hi' });
-      expect(screen.getByText('hi')).toBeInTheDocument();
-    });
-
-    it('shows editable html when type is custom', () => {
-      renderComponent({ type: 'custom', default: 'hi', custom: 'custom text' });
-      expect(screen.getByTestId('editable-html')).toBeInTheDocument();
-      expect(screen.getByTestId('editable-html')).toHaveValue('custom text');
-    });
-
-    it('does not show default feedback when type is none', () => {
-      renderComponent({ type: 'none', default: 'hi' });
-      expect(screen.queryByText('hi')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when switching to default feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'custom', default: 'hi' });
-
-      await user.click(screen.getByLabelText('Simple Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'default', default: 'hi' });
-    });
-
-    it('calls onChange when switching to custom feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'default', default: 'hi' });
-
-      await user.click(screen.getByLabelText('Customized Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'custom', default: 'hi' });
-    });
-
-    it('calls onChange when switching to no feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'default', default: 'hi' });
-
-      await user.click(screen.getByLabelText('No Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'none', default: 'hi' });
-    });
-
-    it('calls onChange with custom text when editing custom feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'custom', default: 'hi', custom: '' });
-
-      const editor = screen.getByTestId('editable-html');
-      await user.clear(editor);
-      await user.type(editor, 'text');
-
-      // user.type triggers onChange for each character, so check that onChange was called
-      // and that the last call has 'text' in custom field
-      expect(onChange).toHaveBeenCalled();
-      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-      expect(lastCall.type).toBe('custom');
-      expect(lastCall.custom).toBe('text');
-      expect(lastCall.default).toBe('hi');
-    });
-  });
-});

package/src/layout/__tests__/config.layout.test.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import ConfigLayout from '../config-layout';
-
-describe('ConfigLayout', () => {
-  const settingsPanel = (
-    <div data-testid="settings-panel">
-      <div key={0}>Foo</div>
-      <div key={1}>Bar</div>
-    </div>
-  );
-
-  const children = (
-    <div data-testid="main-content">
-      <div>Foo</div>
-      <div>Bar</div>
-    </div>
-  );
-
-  describe('rendering', () => {
-    it('renders correctly with settings panel', async () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      // Main content should render immediately
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-
-      // Settings panel may render after layout calculation
-      // In test environment, react-measure may not provide dimensions,
-      // so we check if it exists but don't require it
-      await waitFor(() => {
-        expect(screen.getByText('Foo')).toBeInTheDocument();
-      });
-    });
-
-    it('renders main content when provided', () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-      expect(screen.getByText('Foo')).toBeInTheDocument();
-      // Only check that Bar appears at least once (in main content)
-      expect(screen.getAllByText('Bar').length).toBeGreaterThanOrEqual(1);
-    });
-
-    it('renders settings panel content', () => {
-      render(<ConfigLayout settings={settingsPanel}>{children}</ConfigLayout>);
-
-      // Settings panel might not render in test environment due to react-measure
-      // Just verify the component renders without crashing
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    });
-
-    it('renders without settings panel when not provided', () => {
-      render(<ConfigLayout>{children}</ConfigLayout>);
-
-      expect(screen.queryByTestId('settings-panel')).not.toBeInTheDocument();
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    });
-  });
-});

package/src/layout/__tests__/layout-content.test.jsx

@@ -1,3 +0,0 @@
-describe('layout-content', () => {
-  it.todo('add tests!');
-});

package/src/tags-input/__tests__/index.test.jsx

@@ -1,113 +0,0 @@
-import { TagsInput } from '../index';
-import { Keys, pressKey, render, screen, userEvent } from '@pie-lib/test-utils';
-import React from 'react';
-
-describe('TagsInput', () => {
-  describe('rendering', () => {
-    it('renders existing tags as chips', () => {
-      render(<TagsInput tags={['foo', 'bar']} onChange={jest.fn()} />);
-
-      expect(screen.getByText('foo')).toBeInTheDocument();
-      expect(screen.getByText('bar')).toBeInTheDocument();
-    });
-
-    it('renders input field', () => {
-      render(<TagsInput tags={['foo']} onChange={jest.fn()} />);
-
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    let onChange;
-    const renderComponent = (tags = ['foo']) => {
-      onChange = jest.fn();
-      return render(<TagsInput onChange={onChange} tags={tags} />);
-    };
-
-    describe('focus behavior', () => {
-      it('allows user to focus the input', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.click(input);
-
-        expect(input).toHaveFocus();
-      });
-
-      it('allows user to blur the input', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.click(input);
-        expect(input).toHaveFocus();
-
-        await user.tab();
-        expect(input).not.toHaveFocus();
-      });
-    });
-
-    describe('typing in input', () => {
-      it('updates input value when user types', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.type(input, 'boo');
-
-        expect(input).toHaveValue('boo');
-      });
-    });
-
-    describe('adding tags', () => {
-      it('adds new tag when user presses Enter', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.type(input, 'banana');
-        pressKey(input, Keys.ENTER);
-
-        expect(onChange).toHaveBeenCalledWith(['foo', 'banana']);
-      });
-
-      it('does not add duplicate tags', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.type(input, 'foo');
-        pressKey(input, Keys.ENTER);
-
-        expect(onChange).not.toHaveBeenCalled();
-      });
-
-      it('clears input after adding tag', async () => {
-        const user = userEvent.setup();
-        renderComponent();
-
-        const input = screen.getByRole('textbox');
-        await user.type(input, 'banana');
-        pressKey(input, Keys.ENTER);
-
-        expect(input).toHaveValue('');
-      });
-    });
-
-    describe('deleting tags', () => {
-      it('removes tag when user clicks delete button', async () => {
-        const user = userEvent.setup();
-        renderComponent(['foo', 'bar']);
-
-        // Find the delete button for 'foo' tag
-        const deleteButtons = screen.getAllByTestId('CancelIcon');
-        await user.click(deleteButtons[0]);
-
-        expect(onChange).toHaveBeenCalledWith(['bar']);
-      });
-    });
-  });
-});