From 124cea1a92c99f460bb3245f19164fcc64260a7e Mon Sep 17 00:00:00 2001 From: "C. Fuhrman" Date: Fri, 14 Feb 2025 21:24:36 -0500 Subject: [PATCH] Update preview tests to use unsupported questions Also fixed several issues with the other tests, removed commented code --- .../GiftTemplate/GIFTTemplatePreview.test.tsx | 110 ++++++++++++------ 1 file changed, 74 insertions(+), 36 deletions(-) diff --git a/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx b/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx index 586c8d1..aa4de76 100644 --- a/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/GIFTTemplatePreview.test.tsx @@ -3,49 +3,87 @@ import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview'; +const validQuestions = [ + '::TFTitle::[markdown]Troo statement {TRUE}', + '::SATitle::[markdown]What is the answer? {=ShortAnswerOne =ShortAnswerTwo}', + '::MCQTitle::[markdown]MultiChoice question? {=MQAnswerOne ~MQAnswerTwo#feedback####Gen feedback}', +]; + +const unsupportedQuestions = [ + '::Title::[markdown]Essay {}', + '::Title::[markdown]Matching {}', + '::Title::[markdown]Description', + '$CATEGORY a/b/c' +]; + describe('GIFTTemplatePreview Component', () => { test('renders error message when questions contain invalid syntax', () => { - render(); - const errorMessage = screen.findByText(/Erreur inconnue/i, {}, { timeout: 5000 }); - expect(errorMessage).resolves.toBeInTheDocument(); - }); - test('renders preview when valid questions are provided', () => { - const questions = [ - 'Question 1 { A | B | C }', - 'Question 2 { D | E | F }', - ]; - render(); + render(); const previewContainer = screen.getByTestId('preview-container'); expect(previewContainer).toBeInTheDocument(); + const errorMessage = previewContainer.querySelector('div[label="error-message"]'); + expect(errorMessage).toBeInTheDocument(); }); + + test('renders preview when valid questions are provided, including answers, has no errors', () => { + render(); + const previewContainer = screen.getByTestId('preview-container'); + expect(previewContainer).toBeInTheDocument(); + // Check that all question titles are rendered inside the previewContainer + validQuestions.forEach((question) => { + const title = question.split('::')[1].split('::')[0]; + expect(previewContainer).toHaveTextContent(title); + }); + // There should be no errors + const errorMessage = previewContainer.querySelector('div[label="error-message"]'); + expect(errorMessage).not.toBeInTheDocument(); + // Check that some stems and answers are rendered inside the previewContainer + expect(previewContainer).toHaveTextContent('Troo statement'); + expect(previewContainer).toHaveTextContent('What is the answer?'); + expect(previewContainer).toHaveTextContent('MultiChoice question?'); + expect(previewContainer).toHaveTextContent('Vrai'); + // short answers are stored in a textbox + const answerInputElements = screen.getAllByRole('textbox'); + const giftInputElements = answerInputElements.filter(element => element.classList.contains('gift-input')); + + expect(giftInputElements).toHaveLength(1); + expect(giftInputElements[0]).toHaveAttribute('placeholder', 'ShortAnswerOne, ShortAnswerTwo'); + + // Check for correct answer icon just after MQAnswerOne + const mqAnswerOneElement = screen.getByText('MQAnswerOne'); + const correctAnswerIcon = mqAnswerOneElement.parentElement?.querySelector('[data-testid="correct-icon"]'); + expect(correctAnswerIcon).toBeInTheDocument(); + + // Check for incorrect answer icon just after MQAnswerTwo + const mqAnswerTwoElement = screen.getByText('MQAnswerTwo'); + const incorrectAnswerIcon = mqAnswerTwoElement.parentElement?.querySelector('[data-testid="incorrect-icon"]'); + expect(incorrectAnswerIcon).toBeInTheDocument(); + }); + test('hides answers when hideAnswers prop is true', () => { - const questions = [ - 'Question 1 { A | B | C }', - 'Question 2 { D | E | F }', - ]; - render(); + render(); const previewContainer = screen.getByTestId('preview-container'); expect(previewContainer).toBeInTheDocument(); + expect(previewContainer).toHaveTextContent('Troo statement'); + expect(previewContainer).toHaveTextContent('What is the answer?'); + expect(previewContainer).toHaveTextContent('MultiChoice question?'); + expect(previewContainer).toHaveTextContent('Vrai'); + expect(previewContainer).not.toHaveTextContent('ShortAnswerOne'); + expect(previewContainer).not.toHaveTextContent('ShortAnswerTwo'); + // shouldn't have correct/incorrect icons + const correctAnswerIcon = screen.queryByTestId('correct-icon'); + expect(correctAnswerIcon).not.toBeInTheDocument(); + const incorrectAnswerIcon = screen.queryByTestId('incorrect-icon'); + expect(incorrectAnswerIcon).not.toBeInTheDocument(); }); - // it('renders images correctly', () => { - // const questions = [ - // 'Question 1', - // 'Image 1', - // 'Question 2', - // 'Image 2', - // ]; - // const { getByAltText } = render(); - // const image1 = getByAltText('Image 1'); - // const image2 = getByAltText('Image 2'); - // expect(image1).toBeInTheDocument(); - // expect(image2).toBeInTheDocument(); - // }); - // it('renders non-images correctly', () => { - // const questions = ['Question 1', 'Question 2']; - // const { queryByAltText } = render(); - // const image1 = queryByAltText('Image 1'); - // const image2 = queryByAltText('Image 2'); - // expect(image1).toBeNull(); - // expect(image2).toBeNull(); - // }); + + test('should indicate in the preview that unsupported GIFT questions are not supported', () => { + render(); + const previewContainer = screen.getByTestId('preview-container'); + expect(previewContainer).toBeInTheDocument(); + // find all unsupported errors (should be 4) + const unsupportedMessages = previewContainer.querySelectorAll('div[label="error-message"]'); + expect(unsupportedMessages).toHaveLength(4); + }); + });