chore: import upstream snapshot with attribution

tools/challenge-parser/parser/plugins/add-video-question.test.js

@@ -0,0 +1,268 @@
+import { describe, beforeAll, beforeEach, it, expect } from 'vitest';
+import parseFixture from '../__fixtures__/parse-fixture';
+import addVideoQuestion from './add-video-question';
+
+describe('add-video-question plugin', () => {
+  let simpleAST,
+    videoAST,
+    multipleQuestionAST,
+    videoOutOfOrderAST,
+    videoWithAudioAST,
+    chineseVideoAST,
+    enUsVideoAST,
+    esVideoAST,
+    videoWithSolutionAboveNumberOfAnswersAST,
+    videoWithFeedbackTwiceInARow,
+    videoWithCorrectAnswerWithFeedback;
+  const plugin = addVideoQuestion();
+  let file = { data: {} };
+
+  beforeAll(async () => {
+    simpleAST = await parseFixture('simple.md');
+    videoAST = await parseFixture('with-video-question.md');
+    multipleQuestionAST = await parseFixture(
+      'with-multiple-video-questions.md'
+    );
+    videoOutOfOrderAST = await parseFixture(
+      'with-video-question-out-of-order.md'
+    );
+    videoWithAudioAST = await parseFixture('with-video-question-audio.md');
+    videoWithSolutionAboveNumberOfAnswersAST = await parseFixture(
+      'with-video-question-solution-above-number-of-answers.md'
+    );
+    videoWithFeedbackTwiceInARow = await parseFixture(
+      'with-video-question-feedback-twice-in-a-row.md'
+    );
+    videoWithCorrectAnswerWithFeedback = await parseFixture(
+      'with-video-question-correct-answer-with-feedback.md'
+    );
+    chineseVideoAST = await parseFixture('with-chinese-mcq.md');
+    enUsVideoAST = await parseFixture('with-en-us-mcq.md');
+    esVideoAST = await parseFixture('with-es-mcq.md');
+  });
+
+  beforeEach(() => {
+    file = { data: {} };
+  });
+
+  it('returns a function', () => {
+    expect(typeof plugin).toEqual('function');
+  });
+
+  it('adds a `questions` property to `file.data`', () => {
+    plugin(videoAST, file);
+
+    expect('questions' in file.data).toBe(true);
+  });
+
+  const checkQuestion = question => {
+    expect(question).toHaveProperty('text');
+    expect(typeof question.text).toBe('string');
+    expect(question).toHaveProperty('solution');
+    expect(typeof question.solution).toBe('number');
+    expect(question).toHaveProperty('answers');
+    expect(Array.isArray(question.answers)).toBe(true);
+    expect(typeof question.answers[0]).toBe('object');
+    expect(question.answers[0]).toHaveProperty('answer');
+    expect(question.answers[0].answer).toBeTruthy();
+    expect(question.answers[0]).toHaveProperty('feedback');
+    expect(question.answers[0]).toHaveProperty('audioId');
+  };
+
+  it('should generate a questions array from a video challenge AST', () => {
+    plugin(videoAST, file);
+    const testArr = file.data.questions;
+    expect(Array.isArray(testArr)).toBe(true);
+    expect(testArr.length).toBe(1);
+
+    checkQuestion(testArr[0]);
+  });
+
+  it('should include multiple questions if present', () => {
+    plugin(multipleQuestionAST, file);
+    const testArr = file.data.questions;
+    expect(Array.isArray(testArr)).toBe(true);
+    expect(testArr.length).toBe(2);
+    for (const testObject of testArr) {
+      checkQuestion(testObject);
+    }
+  });
+
+  it('should convert question and answer markdown into html', () => {
+    plugin(videoAST, file);
+    const testObject = file.data.questions[0];
+    expect(Object.keys(testObject).length).toBe(3);
+    expect(testObject.text).toBe(
+      '<p>Question line 1</p>\n' +
+        `<pre><code class="language-js">  var x = 'y';\n` +
+        '</code></pre>'
+    );
+    expect(testObject.solution).toBe(3);
+    expect(testObject.answers[0]).toStrictEqual({
+      answer: '<p>Some inline <code>code</code></p>',
+      feedback: '<p>That is not correct.</p>',
+      audioId: null
+    });
+    expect(testObject.answers[1]).toStrictEqual({
+      answer: `<p>Some <em>italics</em></p>
+<p>A second answer paragraph.</p>`,
+      feedback: null,
+      audioId: null
+    });
+    expect(testObject.answers[2]).toStrictEqual({
+      answer: '<p><code> code in </code> code tags</p>',
+      feedback: null,
+      audioId: null
+    });
+  });
+
+  // TODO: consider testing for more specific messages.  Ideally we them to say
+  // 'The md is missing "x"', so it's obvious how to fix things.
+  it('should throw if the subheadings are outside the question heading', () => {
+    expect.assertions(1);
+    expect(() => plugin(videoOutOfOrderAST, file)).toThrow(
+      'question text is missing in questions section'
+    );
+  });
+
+  it('should throw if solution is higher than the number of answers', () => {
+    expect.assertions(1);
+    expect(() =>
+      plugin(videoWithSolutionAboveNumberOfAnswersAST, file)
+    ).toThrow('solution must be within range of number of answers: 1-3');
+  });
+
+  it('should throw if answer has more than one feedback section', () => {
+    expect.assertions(1);
+    expect(() => plugin(videoWithFeedbackTwiceInARow, file)).toThrow(
+      'answer 2 has multiple feedback sections'
+    );
+  });
+
+  it('should throw if correct answer has feedback section', () => {
+    expect.assertions(1);
+    expect(() => plugin(videoWithCorrectAnswerWithFeedback, file)).toThrow(
+      'answer selected as solution cannot have feedback section'
+    );
+  });
+
+  it('should NOT throw if there is no question', () => {
+    expect.assertions(1);
+    expect(() => plugin(simpleAST, file)).not.toThrow();
+  });
+
+  it('should extract audioId from answers when present', () => {
+    plugin(videoWithAudioAST, file);
+
+    const testObject = file.data.questions[0];
+
+    expect(testObject.answers[0]).toStrictEqual({
+      answer: '<p>Some inline <code>code</code></p>',
+      feedback: '<p>That is not correct.</p>',
+      audioId: 'answer1-audio'
+    });
+
+    expect(testObject.answers[1]).toStrictEqual({
+      answer: `<p>Some <em>italics</em></p>
+<p>A second answer paragraph.</p>`,
+      feedback: null,
+      audioId: 'answer2-audio'
+    });
+
+    expect(testObject.answers[2]).toStrictEqual({
+      answer: '<p><code> code in </code> code tags</p>',
+      feedback: null,
+      audioId: null
+    });
+  });
+
+  it('should match the video snapshot', () => {
+    plugin(videoAST, file);
+    expect(file.data).toMatchSnapshot();
+  });
+
+  it('should render Chinese inline code as ruby in question text, answers, and feedback', async () => {
+    const zhFile = { data: { lang: 'zh-CN' } };
+
+    plugin(chineseVideoAST, zhFile);
+
+    const question = zhFile.data.questions[0];
+
+    expect(question.text).toBe(
+      '<p>Question text containing <ruby>汉字<rp>(</rp><rt>hàn zì</rt><rp>)</rp></ruby>.</p>'
+    );
+
+    const answer1 = question.answers[0];
+    expect(answer1.answer).toContain(
+      '<ruby>你好<rp>(</rp><rt>nǐ hǎo</rt><rp>)</rp></ruby>'
+    );
+
+    const answer2 = question.answers[1];
+    expect(answer2.answer).toContain(
+      '<ruby>请<rp>(</rp><rt>qǐng</rt><rp>)</rp></ruby>'
+    );
+    expect(answer2.feedback).toBe(
+      '<p><ruby>请<rp>(</rp><rt>qǐng</rt><rp>)</rp></ruby> is not correct.</p>'
+    );
+
+    const answer3 = question.answers[2];
+    expect(answer3.answer).toContain(
+      '<ruby>请问<rp>(</rp><rt>qǐng wèn</rt><rp>)</rp></ruby>'
+    );
+
+    const answer4 = question.answers[3];
+    expect(answer4.answer).toContain(
+      '<ruby>问<rp>(</rp><rt>wèn</rt><rp>)</rp></ruby>'
+    );
+  });
+
+  it('should render inline code as spans in question text, answers, and feedback for en-US', async () => {
+    const enUsFile = { data: { lang: 'en-US' } };
+
+    plugin(enUsVideoAST, enUsFile);
+
+    const question = enUsFile.data.questions[0];
+
+    expect(question.text).toBe(
+      '<p>Question text containing <span class="highlighted-text">highlighted text</span>.</p>'
+    );
+
+    const answer1 = question.answers[0];
+    expect(answer1.answer).toBe(
+      '<p><span class="highlighted-text">correct answer</span></p>'
+    );
+
+    const answer2 = question.answers[1];
+    expect(answer2.answer).toBe(
+      '<p><span class="highlighted-text">wrong answer</span></p>'
+    );
+    expect(answer2.feedback).toBe(
+      '<p>Feedback text containing <span class="highlighted-text">highlighted text</span>.</p>'
+    );
+  });
+
+  it('should render inline code as spans in question text, answers, and feedback for es', async () => {
+    const esFile = { data: { lang: 'es' } };
+
+    plugin(esVideoAST, esFile);
+
+    const question = esFile.data.questions[0];
+
+    expect(question.text).toBe(
+      '<p>Question text containing <span class="highlighted-text">texto resaltado</span>.</p>'
+    );
+
+    const answer1 = question.answers[0];
+    expect(answer1.answer).toBe(
+      '<p><span class="highlighted-text">correct answer</span></p>'
+    );
+
+    const answer2 = question.answers[1];
+    expect(answer2.answer).toBe(
+      '<p><span class="highlighted-text">wrong answer</span></p>'
+    );
+    expect(answer2.feedback).toBe(
+      '<p>Feedback text containing <span class="highlighted-text">texto resaltado</span>.</p>'
+    );
+  });
+});