✨ Quiz and Playwright Updates (#133)

Author: payapula

.env.example

@@ -0,0 +1 @@
+PLAYWRIGHT_EXECUTION_ENV="PROD" # "DEV" or "PROD"

README.md

@@ -94,6 +94,20 @@ Sitemap file gets updated automatically by this awesome package - [next-sitemap]
 
 ## 🧪 Playwright Tests
 
+### Introduction
+
+- In Github Actions, we are using docker images to run the tests.
+- Refer to [PR that updates playwright actions](https://github.com/payapula/blog/pull/111/commits/b78b8864abbe3b979f7c1a3c8be1476c588f1872)
+- [Playwright documentation link](https://playwright.dev/docs/ci#via-containers)
+- This ensures the screenshot testing is consistent in local and in CI environments.
+
+### Env Variables
+
+- To properly switch environments, we have `.env.local` file.
+- Refer to `.env.example` file and `playwright.config.ts` file to know how this env file is being read.
+- DEV mode will use `html` report, compared to `list` report in production.
+- In order to test Production URL, update the `.env.local` file appropriately and do `npx playwright test`.
+
 ### Screenshots
 
 Its tricky to generate screenshots when tests are running in Github actions.
@@ -109,6 +123,10 @@ screenshots via docker in local.
 
 Run `npx playwright test --update-snapshots`, it will generate new screenshot files for `-darwin.png`
 
+> [!NOTE]  
+> These screenshots are not validated in Github actions, as we are using docker container to run the
+> test in Github actions. This `-darwin.png` screenshots are only for local testing purposes.
+
 ##### For CI (linux)
 
 1. On root of the project directory, open a terminal (/blog).

_quiz/react-is-just-javascript.mdx

@@ -34,7 +34,7 @@ keywords: 'React,Javascript,Beginner'
     </Choise>
   </Choises>
   <Answer>
-      There are no magic here. 
+      As expected in Javascript. 
   </Answer>
 </QuestionSet>
 <QuestionSet>
@@ -67,7 +67,7 @@ keywords: 'React,Javascript,Beginner'
     </Choise>
   </Choises>
   <Answer>
-    Again, No magic. React would render a `div` with the children "Hello World".
+     React would render a `div` with the children "Hello World".
   </Answer>
 </QuestionSet>
 <QuestionSet>
@@ -94,8 +94,6 @@ keywords: 'React,Javascript,Beginner'
     </Choise>
   </Choises>
   <Answer>
-    `React.createElement("h1", null, "Hello World")`
-
     Since we have `Hello World` string, the third argument of createElement would be a simple "string".
   </Answer>
 </QuestionSet>

components/mdx/components/quiz/question-set.tsx

@@ -20,17 +20,23 @@ export function QuestionSet({
 }: QuestionSetProps) {
     const [value, setValue] = React.useState('');
     const validAnswer = React.useRef<string>();
+    const validAnswerText = React.useRef<string>();
 
     const [Question, Choises, Answer] = Children.toArray(children);
 
     //@ts-ignore
     const choiseElements = Children.map(Choises.props.children, (child, index) => {
         if (child.props?.isAnswer) {
             validAnswer.current = index.toString();
+            validAnswerText.current = child.props.children;
         }
+        const value = index.toString();
+        const ariaLabel = `label_${value}`;
         return (
-            <RadioItem value={index.toString()} disabled={answerSubmitted}>
-                <div className="flex items-baseline [&>p]:mt-0">{child.props.children}</div>
+            <RadioItem value={value} disabled={answerSubmitted} ariaLabel={ariaLabel}>
+                <div className="flex items-baseline [&>p]:mt-0" id={ariaLabel}>
+                    {child.props.children}
+                </div>
             </RadioItem>
         );
     });
@@ -63,11 +69,42 @@ export function QuestionSet({
                 </QuizNavigationButton>
             </form>
             {answerSubmitted && <AnswerStatus isCorrect={isCorrect} />}
-            {answerSubmitted ? Answer : null}
+            {answerSubmitted && (
+                <AnswerReveal answerText={validAnswerText.current} isCorrect={isCorrect} />
+            )}
+            {answerSubmitted ? <AnswerMeta answerMeta={Answer} /> : null}
         </CardWrapper>
     );
 }
 
+function AnswerReveal({
+    answerText,
+    isCorrect
+}: {
+    isCorrect: boolean;
+    answerText: React.ReactNode;
+}) {
+    const userChoseCorrectAnswer = isCorrect;
+    const textMessage = userChoseCorrectAnswer
+        ? `✅ You chose the correct answer`
+        : `Oops! The correct answer is `;
+    return (
+        <div className="mt-5 flex flex-col items-start gap-1">
+            <p className="text-center font-bold">{textMessage}</p>
+            {answerText}
+        </div>
+    );
+}
+
+function AnswerMeta({ answerMeta }: { answerMeta: React.ReactNode }) {
+    return (
+        <div className="mt-5">
+            <p className="text-left font-bold">Explanation:</p>
+            {answerMeta}
+        </div>
+    );
+}
+
 function AnswerStatus({ isCorrect }: { isCorrect: boolean }) {
     return (
         <p className="mt-5 text-center font-bold">

components/shadcn/radio-item.tsx

@@ -5,16 +5,17 @@ import { cn } from '@/lib/utils';
 export function RadioItem({
     children,
     disabled,
-    value
+    value,
+    ariaLabel
 }: {
     value: string;
     disabled: boolean;
     children: React.ReactNode;
+    ariaLabel: string;
 }) {
     return (
         <div>
             <Label
-                htmlFor={value}
                 /**
                  * labelChecked is styled from globals.css
                  */
@@ -26,7 +27,7 @@ export function RadioItem({
                 <RadioGroupItem
                     disabled={disabled}
                     value={value}
-                    id={value}
+                    aria-labelledby={ariaLabel}
                     className={cn(
                         `data-checked:scale-150 data-checked:bg-teal-300  dark:data-checked:bg-orange-700`,
                         {

package-lock.json

@@ -29,6 +29,7 @@
         "clsx": "^2.1.1",
         "cross-env": "^7.0.3",
         "date-fns": "2.10.0",
+        "dotenv": "^16.4.5",
         "git-date-extractor": "^4.0.1",
         "gray-matter": "4.0.2",
         "next": "^12.2.3",

package.json

@@ -1,13 +1,16 @@
 import { defineConfig, devices } from '@playwright/test';
+import dotenv from 'dotenv';
+import path from 'path';
 import siteConfig from 'configs/site-configs';
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
+ * https://playwright.dev/docs/test-parameterize#env-files
  */
-// require('dotenv').config();
+dotenv.config({ path: path.resolve(__dirname, '.env.local') });
 
-const IS_DEV_MODE = false;
+const IS_DEV_MODE = process.env.PLAYWRIGHT_EXECUTION_ENV === 'DEV';
 const BUILD_PORT = 3002;
 
 /**

playwright.config.ts

@@ -24,7 +24,7 @@ test('Quiz Page Navigation Tests', async ({ page }) => {
     await expect(page.getByRole('button', { name: 'Submit' })).toBeEnabled();
     await page.getByRole('button', { name: 'Submit' }).click();
     await assertIncorrectAnswer(page);
-    await testVisible(page.getByText('There are no magic here.'));
+    await testVisible(page.getByText('As expected in Javascript.'));
     await moveToNextPage(page);
 
     await page.locator('label').filter({ hasText: '<div>Hello World</div>' }).click();