Checkbox + Dropdown Question Tests

components/application/FormQuestion.tsx

@@ -1,13 +1,14 @@
 import { QuestionDefinition, QuestionType } from '../../common/types';
 import ShortTextQuestion from '../questions/short-test-question/ShortTextQuestion';
 import LongTextQuestion from '../questions/long-text-question/LongTextQuestion';
-import DropdownQuestion from '../questions/DropdownQuestion';
-import CheckboxesQuestion from '../questions/CheckboxesQuestion';
 import FileUploadQuestion from '../questions/file-upload-question/FileUploadQuestion';
 import { assertUnreachable } from '../../common/utils/utils';
 import React from 'react';
 import { FormInstance } from 'antd';
+import DropdownQuestion from '../questions/dropdown-question/DropdownQuestion';
+import CheckboxesQuestion from '../questions/checkboxes-question/CheckboxesQuestion';
 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const getQuestionComponentFromType = (type: QuestionType) => {
   switch (type) {
     case QuestionType.ShortText:

components/questions/checkboxes-question/CheckboxesQuestion.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+import CheckboxesQuestion from './CheckboxesQuestion';
+import { Checkboxes, QuestionResponse, QuestionType } from '../../../common/types';
+import { Form } from 'antd';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+describe('CheckboxesQuestion component', () => {
+  const n = (name: string) => ({ name });
+  const exampleContent = 'Your top two most proficient languages. Select at least 1, but no more than 2.';
+  const exampleQuestion: Checkboxes = {
+    field: 'education',
+    type: QuestionType.Checkboxes,
+    id: '1',
+    content: exampleContent,
+    minNumber: 1,
+    maxNumber: 2,
+    options: ['English', 'Java', 'Typescript', 'Japanese'].map(n),
+    required: true,
+  };
+
+  const CheckboxesQuestionWrapper = () => {
+    const form = Form.useForm<Record<string, QuestionResponse>>()[0];
+
+    return <CheckboxesQuestion question={exampleQuestion} form={form} disabled={false} />;
+  };
+
+  it('renders', () => {
+    render(<CheckboxesQuestionWrapper />);
+    const confirmedDialogText = screen.getByTestId('checkboxes-question');
+
+    expect(confirmedDialogText.textContent).toContain(exampleContent);
+    expect(confirmedDialogText.textContent).toContain("English");
+    expect(confirmedDialogText.textContent).toContain("Java");
+    expect(confirmedDialogText.textContent).toContain("Typescript");
+    expect(confirmedDialogText.textContent).toContain("Japanese");
+  });
+});

components/questions/CheckboxesQuestion.tsx → components/questions/checkboxes-question/CheckboxesQuestion.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Checkboxes, QuestionResponse } from '../../common/types';
+import { Checkboxes, QuestionResponse } from '../../../common/types';
 import { Checkbox, Form, FormInstance, Row } from 'antd';
 
 type CheckboxesProps = {
@@ -15,7 +15,7 @@ const CheckboxesQuestion: FC<CheckboxesProps> = ({
   const options: string[] = [];
   question.options.map((o) => options.push(o.name));
   return (
-    <Form.Item
+    <Form.Item data-testid="checkboxes-question"
       className="question"
       name={question.id}
       label={question.content}

components/questions/dropdown-question/DropdownQuestion.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, it } from '@jest/globals';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import DropdownQuestion from './DropdownQuestion';
+import { Dropdown, QuestionResponse, QuestionType } from '../../../common/types';
+import { Form } from 'antd';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+describe('CheckboxesQuestion component', () => {
+  const n = (name: string) => ({ name });
+  const exampleContent = 'How old are you?';
+  const exampleQuestion: Dropdown = {
+    field: 'adult',
+    type: QuestionType.Dropdown,
+    id: '1',
+    content: exampleContent,
+    options: ['1', '2', '3', '4+'].map(n),
+    required: true,
+  };
+
+  const DropdownQuestionWrapper = () => {
+    const form = Form.useForm<Record<string, QuestionResponse>>()[0];
+
+    return <DropdownQuestion question={exampleQuestion} form={form} disabled={false} />;
+  };
+
+  const DisabledDropdownQuestionWrapper = () => {
+    const form = Form.useForm<Record<string, QuestionResponse>>()[0];
+
+    return <DropdownQuestion question={exampleQuestion} form={form} disabled={true} />;
+  };
+
+  it('renders', () => {
+    render(<DropdownQuestionWrapper />);
+    const confirmedDialogText = screen.getByTestId('dropdown-question');
+
+    expect(confirmedDialogText.textContent).toContain(exampleContent);
+    expect(confirmedDialogText.textContent).toContain("Select");
+  });
+
+  // it('renders the correct dropdown values', async () => {
+  //   render(<DropdownQuestionWrapper />);
+  //   const confirmedDialogText = screen.getByTestId('dropdown-question');
+
+  //   if (confirmedDialogText instanceof Element) {
+  //     fireEvent.mouseDown(confirmedDialogText);
+  //   }
+  //   await waitFor(() => expect(screen.getAllByText('1')).toHaveLength(2));
+
+  //   if (confirmedDialogText instanceof Element) {
+  //     fireEvent.mouseDown(confirmedDialogText);
+  //   }
+  //   await waitFor(() => expect(screen.getAllByText('2')).toHaveLength(2));
+  // });
+
+  it('does not render options when clicked, if it is disabled', async () => {
+    render(<DisabledDropdownQuestionWrapper />);
+    const confirmedDialogText = screen.getByTestId('dropdown-question').firstElementChild;
+
+    if (confirmedDialogText instanceof Element) {
+      fireEvent.mouseDown(confirmedDialogText);
+    }
+    await waitFor(() => expect(screen.getAllByText('1')).toHaveLength(0));
+  });
+});

components/questions/DropdownQuestion.tsx → components/questions/dropdown-question/DropdownQuestion.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Dropdown as DropdownType, QuestionResponse } from '../../common/types';
+import { Dropdown as DropdownType, QuestionResponse } from '../../../common/types';
 import { FormInstance, Select, Form } from 'antd';
 
 type DropdownProps = {
@@ -9,7 +9,7 @@ type DropdownProps = {
 };
 const DropdownQuestion: FC<DropdownProps> = ({ question, form, disabled }) => {
   return (
-    <Form.Item
+    <Form.Item data-testid="dropdown-question"
       className="question"
       name={question.id}
       wrapperCol={{ span: 8 }}

jest.config.ts

@@ -36,7 +36,7 @@ module.exports = {
     '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
   },
   transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts', "@testing-library/jest-dom/extend-expect"],
 };
 
 export {};