@pie-lib/render-ui 4.35.3-next.0 → 4.35.3-next.155

package/src/__tests__/readable.test.jsx

@@ -1,24 +1,23 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import Readable from '../readable';
 
 describe('Readable', () => {
-  let wrapper;
-
-  describe('renders fine', () => {
-    it('renders child unaltered', () => {
-      wrapper = mount(
+  describe('rendering', () => {
+    it('renders child with data-pie-readable attribute set to true', () => {
+      const { container } = render(
         <Readable>
           <div>text</div>
         </Readable>,
       );
-      expect(wrapper.find('div')).toHaveLength(1);
-      expect(wrapper.html().includes('data-pie-readable="true"')).toEqual(true);
-      expect(wrapper.html().includes('text')).toEqual(true);
-      expect(wrapper).toMatchSnapshot();
+
+      expect(screen.getByText('text')).toBeInTheDocument();
+      const div = container.querySelector('div');
+      expect(div).toHaveAttribute('data-pie-readable', 'true');
     });
-    it('renders children unaltered', () => {
-      wrapper = mount(
+
+    it('renders multiple children with data-pie-readable attribute', () => {
+      const { container } = render(
         <Readable>
           <div>
             <div>text1</div>
@@ -26,14 +25,17 @@ describe('Readable', () => {
           </div>
         </Readable>,
       );
-      expect(wrapper.find('div')).toHaveLength(3);
-      expect(wrapper.html().includes('data-pie-readable="true"')).toEqual(true);
-      expect(wrapper.html().includes('text1')).toEqual(true);
-      expect(wrapper.html().includes('text3')).toEqual(false);
-      expect(wrapper).toMatchSnapshot();
+
+      expect(screen.getByText('text1')).toBeInTheDocument();
+      expect(screen.getByText('text2')).toBeInTheDocument();
+      expect(screen.queryByText('text3')).not.toBeInTheDocument();
+
+      const parentDiv = container.querySelector('div');
+      expect(parentDiv).toHaveAttribute('data-pie-readable', 'true');
     });
-    it('renders with false tag', () => {
-      wrapper = mount(
+
+    it('renders with data-pie-readable set to false when false prop is provided', () => {
+      const { container } = render(
         <Readable false>
           <div>
             <div>text1</div>
@@ -41,14 +43,17 @@ describe('Readable', () => {
           </div>
         </Readable>,
       );
-      expect(wrapper.find('div')).toHaveLength(3);
-      expect(wrapper.html().includes('data-pie-readable="false"')).toEqual(true);
-      expect(wrapper.html().includes('text1')).toEqual(true);
-      expect(wrapper.html().includes('text3')).toEqual(false);
-      expect(wrapper).toMatchSnapshot();
+
+      expect(screen.getByText('text1')).toBeInTheDocument();
+      expect(screen.getByText('text2')).toBeInTheDocument();
+      expect(screen.queryByText('text3')).not.toBeInTheDocument();
+
+      const parentDiv = container.querySelector('div');
+      expect(parentDiv).toHaveAttribute('data-pie-readable', 'false');
     });
-    it('renders even with specific true tag', () => {
-      wrapper = mount(
+
+    it('renders with data-pie-readable set to false when false={true}', () => {
+      const { container } = render(
         <Readable false={true}>
           <div>
             <div>text1</div>
@@ -56,9 +61,9 @@ describe('Readable', () => {
           </div>
         </Readable>,
       );
-      expect(wrapper.find('div')).toHaveLength(3);
-      expect(wrapper.html().includes('data-pie-readable="false"')).toEqual(true);
-      expect(wrapper).toMatchSnapshot();
+
+      const parentDiv = container.querySelector('div');
+      expect(parentDiv).toHaveAttribute('data-pie-readable', 'false');
     });
   });
 });

package/src/__tests__/response-indicators.test.jsx

@@ -1,16 +1,111 @@
 import React from 'react';
-import debug from 'debug';
-import renderer from 'react-test-renderer';
-import { Correct } from '../response-indicators';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Correct, Incorrect, PartiallyCorrect, NothingSubmitted } from '../response-indicators';
+
+// Mock the icons
+jest.mock('@pie-lib/icons', () => ({
+  Correct: () => <span data-testid="correct-icon">Correct Icon</span>,
+  Incorrect: () => <span data-testid="incorrect-icon">Incorrect Icon</span>,
+  PartiallyCorrect: () => <span data-testid="partially-correct-icon">Partially Correct Icon</span>,
+  NothingSubmitted: () => <span data-testid="nothing-submitted-icon">Nothing Submitted Icon</span>,
+}));
+
+// Mock the Feedback component
+jest.mock('../feedback', () => {
+  return function Feedback({ feedback, correctness }) {
+    return (
+      <div data-testid="feedback-content">
+        <div>{feedback}</div>
+        <div>{correctness}</div>
+      </div>
+    );
+  };
+});
 
 describe('response-indicators', () => {
-  it('snapshot  - no feedback ', () => {
-    const tree = renderer.create(<Correct />).toJSON();
-    expect(tree).toMatchSnapshot();
+  describe('Correct indicator', () => {
+    it('renders correct icon without feedback', () => {
+      render(<Correct />);
+      expect(screen.getByTestId('correct-icon')).toBeInTheDocument();
+    });
+
+    it('renders correct icon with feedback', () => {
+      render(<Correct feedback="Great job!" />);
+      expect(screen.getByTestId('correct-icon')).toBeInTheDocument();
+    });
+
+    it('shows feedback popover when icon is clicked', async () => {
+      const user = userEvent.setup();
+      render(<Correct feedback="Great job!" />);
+
+      const icon = screen.getByTestId('correct-icon');
+      await user.click(icon);
+
+      expect(screen.getByTestId('feedback-content')).toBeInTheDocument();
+      expect(screen.getByText('Great job!')).toBeInTheDocument();
+      expect(screen.getByText('correct')).toBeInTheDocument();
+    });
+
+    it('does not show popover when there is no feedback', async () => {
+      const user = userEvent.setup();
+      render(<Correct />);
+
+      const icon = screen.getByTestId('correct-icon');
+      await user.click(icon);
+
+      expect(screen.queryByTestId('feedback-content')).not.toBeInTheDocument();
+    });
   });
 
-  it('snapshot  - with feedback ', () => {
-    const tree = renderer.create(<Correct feedback="hi" />).toJSON();
-    expect(tree).toMatchSnapshot();
+  describe('Incorrect indicator', () => {
+    it('renders incorrect icon', () => {
+      render(<Incorrect />);
+      expect(screen.getByTestId('incorrect-icon')).toBeInTheDocument();
+    });
+
+    it('shows feedback with incorrect correctness', async () => {
+      const user = userEvent.setup();
+      render(<Incorrect feedback="Try again" />);
+
+      await user.click(screen.getByTestId('incorrect-icon'));
+
+      expect(screen.getByText('Try again')).toBeInTheDocument();
+      expect(screen.getByText('incorrect')).toBeInTheDocument();
+    });
+  });
+
+  describe('PartiallyCorrect indicator', () => {
+    it('renders partially correct icon', () => {
+      render(<PartiallyCorrect />);
+      expect(screen.getByTestId('partially-correct-icon')).toBeInTheDocument();
+    });
+
+    it('shows feedback with partially-correct correctness', async () => {
+      const user = userEvent.setup();
+      render(<PartiallyCorrect feedback="Almost there" />);
+
+      await user.click(screen.getByTestId('partially-correct-icon'));
+
+      expect(screen.getByText('Almost there')).toBeInTheDocument();
+      expect(screen.getByText('partially-correct')).toBeInTheDocument();
+    });
+  });
+
+  describe('NothingSubmitted indicator', () => {
+    it('renders nothing submitted icon', () => {
+      render(<NothingSubmitted />);
+      expect(screen.getByTestId('nothing-submitted-icon')).toBeInTheDocument();
+    });
+
+    it('shows feedback with nothing-submitted correctness', async () => {
+      const user = userEvent.setup();
+      render(<NothingSubmitted feedback="Please submit an answer" />);
+
+      await user.click(screen.getByTestId('nothing-submitted-icon'));
+
+      expect(screen.getByText('Please submit an answer')).toBeInTheDocument();
+      expect(screen.getByText('nothing-submitted')).toBeInTheDocument();
+    });
   });
 });

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

@@ -1,34 +1,50 @@
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 import { UiLayout } from '../index';
 
 describe('UiLayout', () => {
-  let wrapper;
   const mockClasses = { extraCSSRules: 'extra-class' };
   const fontSizeFactor = 1.5;
 
   // Mock `getComputedStyle` to return a specific root font size.
-  jest.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
-    fontSize: '16px', // Default font size for root
-  }));
+  beforeAll(() => {
+    jest.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+      fontSize: '16px', // Default font size for root
+    }));
+  });
 
-  wrapper = mount(<UiLayout classes={mockClasses} fontSizeFactor={fontSizeFactor} />);
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
 
   it('renders correctly', () => {
-    expect(wrapper.exists()).toBe(true);
+    const { container } = render(<UiLayout classes={mockClasses} fontSizeFactor={fontSizeFactor} />);
+    expect(container.firstChild).toBeInTheDocument();
   });
 
   it('applies the correct classes', () => {
-    const div = wrapper.find('.extra-class');
-    expect(div.exists()).toBe(true);
+    const { container } = render(<UiLayout className="custom-class" classes={mockClasses} fontSizeFactor={fontSizeFactor} />);
+    const div = container.querySelector('.custom-class');
+    expect(div).toBeInTheDocument();
   });
 
   it('computes style correctly based on fontSizeFactor', () => {
-    const div = wrapper.find('.extra-class');
+    const { container } = render(<UiLayout classes={mockClasses} fontSizeFactor={fontSizeFactor} />);
+    const div = container.firstChild;
 
     // Get the style property of the rendered div
-    const computedStyle = div.getDOMNode().style;
-    // Assert the computed font size
+    const computedStyle = div.style;
+    // Assert the computed font size (16px * 1.5 = 24px)
     expect(computedStyle.fontSize).toBe('24px');
   });
+
+  it('renders children when provided', () => {
+    const { container } = render(
+      <UiLayout classes={mockClasses} fontSizeFactor={fontSizeFactor}>
+        <div className="test-child">Test Content</div>
+      </UiLayout>,
+    );
+
+    expect(container.querySelector('.test-child')).toBeInTheDocument();
+  });
 });

package/src/__tests__/withUndoReset.test.jsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import withUndoReset from '../withUndoReset';
-import { mount, shallow } from 'enzyme';
-import { shallowChild } from '@pie-lib/test-utils';
 
 describe('withUndoReset', () => {
-  let wrapper;
   let defaultProps;
+  let onSessionChange;
+
   const WrappedClass = class WrappedComponent extends React.Component {
     onSessionChange = (session) => {
       this.props.onSessionChange(session);
@@ -20,7 +21,6 @@ describe('withUndoReset', () => {
 
     onRemoveLastItem = () => {
       const newItems = [...this.props.session.items];
-
       newItems.pop();
 
       this.onSessionChange({
@@ -31,13 +31,23 @@ describe('withUndoReset', () => {
 
     render() {
       const { session } = this.props;
-      const items = session.items || {};
+      const items = session.items || [];
 
       return (
-        <div>
-          {items.map((item) => (
-            <span key={item.id}>{item.id}</span>
-          ))}
+        <div data-testid="wrapped-component">
+          <button data-testid="add-item" onClick={() => this.onAddItem({ id: Date.now() })}>
+            Add Item
+          </button>
+          <button data-testid="remove-item" onClick={() => this.onRemoveLastItem()}>
+            Remove Item
+          </button>
+          <div data-testid="items-container">
+            {items.map((item) => (
+              <span key={item.id} data-testid={`item-${item.id}`}>
+                {item.id}
+              </span>
+            ))}
+          </div>
         </div>
       );
     }
@@ -45,210 +55,122 @@ describe('withUndoReset', () => {
 
   const Component = withUndoReset(WrappedClass);
 
-  describe('retains internal component functionality', () => {
-    beforeEach(() => {
-      defaultProps = {
-        session: {
-          items: [],
-        },
-        onSessionChange: jest.fn(),
-      };
+  beforeEach(() => {
+    onSessionChange = jest.fn();
+    defaultProps = {
+      session: {
+        items: [],
+      },
+      onSessionChange,
+    };
+  });
+
+  describe('HOC functionality', () => {
+    it('renders the wrapped component', () => {
+      render(<Component {...defaultProps} />);
+      expect(screen.getByTestId('wrapped-component')).toBeInTheDocument();
     });
 
-    it('moves past HoC and returns the rendered component using enzyme', () => {
-      wrapper = mount(<Component {...defaultProps} />);
-      expect(wrapper.find(WrappedClass).length).toEqual(1);
-      expect(wrapper.find(WrappedClass).props()).toEqual(
-        expect.objectContaining({
-          session: { items: [] },
-        }),
-      );
+    it('renders undo and reset buttons', () => {
+      render(<Component {...defaultProps} />);
+      expect(screen.getByText(/Undo/i)).toBeInTheDocument();
+      expect(screen.getByText(/Start Over/i)).toBeInTheDocument();
     });
 
-    it('contains the reset logic container', () => {
-      wrapper = mount(<Component {...defaultProps} />);
-      expect(wrapper.html().includes('Start Over')).toEqual(true);
-      expect(wrapper.html().includes('Undo')).toEqual(true);
+    it('passes session props to wrapped component', () => {
+      render(<Component {...defaultProps} />);
+      const itemsContainer = screen.getByTestId('items-container');
+      expect(itemsContainer).toBeInTheDocument();
     });
+  });
 
-    it('can interact with session', () => {
-      wrapper = mount(<Component {...defaultProps} />);
-
-      expect(wrapper.find('span').length).toEqual(2);
-
-      wrapper
-        .find(WrappedClass)
-        .instance()
-        .onAddItem({ id: 1 });
-
-      expect(
-        wrapper
-          .find(WrappedClass)
-          .html()
-          .includes('span'),
-      ).toEqual(true);
-
-      wrapper
-        .find(WrappedClass)
-        .instance()
-        .onRemoveLastItem();
-
-      expect(
-        wrapper
-          .find(WrappedClass)
-          .html()
-          .includes('span'),
-      ).toEqual(false);
+  describe('undo functionality', () => {
+    it('undo button is disabled when there are no changes', () => {
+      render(<Component {...defaultProps} />);
+      const undoButton = screen.getByText(/Undo/i).closest('button');
+      expect(undoButton).toBeDisabled();
     });
 
-    it('can undo changes in the session', () => {
-      wrapper = shallowChild(Component, defaultProps, 1)();
-      const instance = wrapper.instance();
+    it('undo button is enabled after a change', async () => {
+      const user = userEvent.setup();
+      render(<Component {...defaultProps} />);
 
-      instance.onSessionChange({
-        items: [
-          {
-            id: 2,
-          },
-        ],
-      });
+      const addButton = screen.getByTestId('add-item');
+      await user.click(addButton);
 
-      instance.onSessionChange({
-        items: [
-          {
-            id: 2,
-          },
-          {
-            id: 3,
-          },
-        ],
-      });
+      const undoButton = screen.getByText(/Undo/i).closest('button');
+      expect(undoButton).toBeEnabled();
+    });
 
-      expect(wrapper.state().changes).toEqual([
-        {
-          items: [
-            {
-              id: 2,
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              id: 2,
-            },
-            {
-              id: 3,
-            },
-          ],
-        },
-      ]);
-
-      expect(wrapper.state().session).toEqual({
-        items: [
-          {
-            id: 2,
-          },
-          {
-            id: 3,
-          },
-        ],
-      });
+    it('undoes changes when undo button is clicked', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(<Component {...defaultProps} />);
 
-      instance.onUndo();
-
-      expect(wrapper.state().changes).toEqual([
-        {
-          items: [
-            {
-              id: 2,
-            },
-          ],
-        },
-      ]);
-
-      expect(wrapper.state().session).toEqual({
-        items: [
-          {
-            id: 2,
-          },
-        ],
-      });
+      // Add an item
+      const addButton = screen.getByTestId('add-item');
+      await user.click(addButton);
 
-      instance.onUndo();
+      // Get the actual item ID from the onSessionChange call
+      const addedItem = onSessionChange.mock.calls[0][0].items[0];
 
-      expect(wrapper.state().changes).toEqual([]);
+      // Update props to reflect the change
+      const updatedProps = {
+        ...defaultProps,
+        session: { items: [addedItem] },
+      };
+      rerender(<Component {...updatedProps} />);
 
-      expect(wrapper.state().session).toEqual({
-        items: [],
-      });
+      expect(screen.getByTestId(`item-${addedItem.id}`)).toBeInTheDocument();
+
+      // Click undo
+      const undoButton = screen.getByText(/Undo/i).closest('button');
+      await user.click(undoButton);
 
-      expect(wrapper.find(WrappedClass).html()).toEqual('<div></div>');
+      // Should call onSessionChange with previous session
+      expect(onSessionChange).toHaveBeenCalledWith({ items: [] });
     });
+  });
 
-    it('can reset changes in the session', () => {
-      wrapper = shallowChild(Component, defaultProps, 1)();
-      const instance = wrapper.instance();
+  describe('reset functionality', () => {
+    it('reset button is disabled when there are no changes', () => {
+      render(<Component {...defaultProps} />);
+      const resetButton = screen.getByText(/Start Over/i).closest('button');
+      expect(resetButton).toBeDisabled();
+    });
 
-      instance.onSessionChange({
-        items: [
-          {
-            id: 2,
-          },
-        ],
-      });
+    it('reset button is enabled after a change', async () => {
+      const user = userEvent.setup();
+      render(<Component {...defaultProps} />);
 
-      instance.onSessionChange({
-        items: [
-          {
-            id: 2,
-          },
-          {
-            id: 3,
-          },
-        ],
-      });
+      const addButton = screen.getByTestId('add-item');
+      await user.click(addButton);
 
-      expect(wrapper.state().changes).toEqual([
-        {
-          items: [
-            {
-              id: 2,
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              id: 2,
-            },
-            {
-              id: 3,
-            },
-          ],
-        },
-      ]);
-
-      expect(wrapper.state().session).toEqual({
-        items: [
-          {
-            id: 2,
-          },
-          {
-            id: 3,
-          },
-        ],
-      });
+      const resetButton = screen.getByText(/Start Over/i).closest('button');
+      expect(resetButton).toBeEnabled();
+    });
 
-      instance.onReset();
+    it('resets all changes when reset button is clicked', async () => {
+      const user = userEvent.setup();
+      const { rerender } = render(<Component {...defaultProps} />);
 
-      expect(wrapper.state().changes).toEqual([]);
+      // Make multiple changes
+      const addButton = screen.getByTestId('add-item');
+      await user.click(addButton);
+      await user.click(addButton);
 
-      expect(wrapper.state().session).toEqual({
-        items: [],
-      });
+      // Update props to reflect the changes
+      const updatedProps = {
+        ...defaultProps,
+        session: { items: [{ id: 1 }, { id: 2 }] },
+      };
+      rerender(<Component {...updatedProps} />);
+
+      // Click reset
+      const resetButton = screen.getByText(/Start Over/i).closest('button');
+      await user.click(resetButton);
 
-      expect(wrapper.find(WrappedClass).html()).toEqual('<div></div>');
+      // Should call onSessionChange with initial session
+      expect(onSessionChange).toHaveBeenCalledWith({ items: [] });
     });
   });
 });