test: replacing snapshot tests with RTL tests part 11 (#2214)

Author: jacobo-dominguez-wgu

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx

@@ -0,0 +1,49 @@
+import { render, screen, initializeMocks } from '@src/testUtils';
+import { FeedbackBox } from './FeedbackBox';
+
+jest.mock('../../../../../../../sharedComponents/ExpandableTextArea', () => jest.fn(({
+  id, value, setContent, placeholder,
+}) => (
+  <textarea id={id} value={value} placeholder={placeholder} onChange={e => setContent(e.target.value)} />
+)));
+
+const answerWithFeedback = {
+  id: 'A',
+  title: 'Answer 1',
+  correct: true,
+  selectedFeedback: 'some feedback',
+  unselectedFeedback: 'unselectedFeedback',
+  problemType: 'sOMepRObleM',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
+};
+
+const props = {
+  answer: answerWithFeedback,
+  problemType: '',
+  setAnswer: jest.fn(),
+  setSelectedFeedback: jest.fn(),
+  setUnselectedFeedback: jest.fn(),
+  images: {},
+  learningContextId: 'id',
+  isLibrary: false,
+};
+
+describe('FeedbackBox', () => {
+  beforeEach(() => initializeMocks());
+
+  test('renders as expected with default props', () => {
+    render(<FeedbackBox {...props} />);
+    expect(screen.getByText(/Show following feedback when A/)).toBeInTheDocument();
+  });
+  test('renders as expected with a numeric input problem', () => {
+    render(<FeedbackBox {...props} problemType="numericalresponse" />);
+    expect(screen.getByText(/Show following feedback when A/)).toBeInTheDocument();
+    expect(screen.getAllByText(/Show following feedback when A/)).toHaveLength(1);
+  });
+  test('renders as expected with a multi select problem', () => {
+    render(<FeedbackBox {...props} problemType="choiceresponse" />);
+    expect(screen.getAllByText(/Show following feedback when A/)).toHaveLength(2);
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen, initializeMocks } from '@src/testUtils';
+import CardSection from './CardSection';
+
+describe('CardSection', () => {
+  beforeEach(() => initializeMocks());
+  test('renders children when open', () => {
+    render(<CardSection summary="summary" isCardCollapsibleOpen><h1>Section Text</h1></CardSection>);
+    expect(screen.getByText('Section Text')).toBeInTheDocument();
+    expect(screen.queryByText('summary')).not.toBeInTheDocument();
+  });
+
+  test('renders summary when closed', () => {
+    render(<CardSection summary="summary" isCardCollapsibleOpen={false}><h1>Section Text</h1></CardSection>);
+    expect(screen.queryByText('Section Text')).not.toBeInTheDocument();
+    expect(screen.getByText('summary')).toBeInTheDocument();
+  });
+
+  test('renders nothing when closed and not summary', () => {
+    const { container } = render(<CardSection isCardCollapsibleOpen={false}><h1>Not showing text</h1></CardSection>);
+    expect(screen.queryByText('Not showing text')).not.toBeInTheDocument();
+    expect(container.textContent).toBe('');
+  });
+});