test(e2e,playwright):Solution-display-widget (#52208)

client/src/components/SolutionViewer/project-modal.tsx

@@ -22,6 +22,7 @@ const ProjectModal = ({
   const { t } = useTranslation();
   return (
     <Modal
+      data-playwright-test-label='project-solution-viewer-modal'
       aria-labelledby='solution-viewer-modal-title'
       bsSize='large'
       onHide={handleSolutionModalHide}

client/src/components/solution-display-widget/index.tsx

@@ -110,7 +110,10 @@ export function SolutionDisplayWidget({
   );
   const ShowMultifileProjectSolution = (
     <div className='solutions-dropdown'>
-      <Dropdown id={`dropdown-for-${id}-${randomIdSuffix}`}>
+      <Dropdown
+        id={`dropdown-for-${id}-${randomIdSuffix}`}
+        data-playwright-test-label='multifile-dropdown'
+      >
         <Dropdown.Toggle className='btn-invert'>
           {viewText}{' '}
           <span className='sr-only'>
@@ -118,10 +121,18 @@ export function SolutionDisplayWidget({
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu>
-          <MenuItem variant='primary' onClick={showUserCode}>
+          <MenuItem
+            data-playwright-test-label='multifile-dropdown-code'
+            variant='primary'
+            onClick={showUserCode}
+          >
             {viewCode}
           </MenuItem>
-          <MenuItem variant='primary' onClick={showProjectPreview}>
+          <MenuItem
+            data-playwright-test-label='multifile-dropdown-project'
+            variant='primary'
+            onClick={showProjectPreview}
+          >
             {viewProject}
           </MenuItem>
         </Dropdown.Menu>

client/src/templates/Challenges/components/project-preview-modal.tsx

@@ -55,6 +55,7 @@ function ProjectPreviewModal({
 
   return (
     <Modal
+      data-playwright-test-label='project-preview-modal'
       bsSize='lg'
       data-cy='project-preview-modal'
       dialogClassName='project-preview-modal'

e2e/solution-display-widget.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/settings');
+});
+
+test('Multifile dropdown testing', async ({ page }) => {
+  const multifile_dropdown = page.getByTestId('multifile-dropdown');
+  const isVisible = await multifile_dropdown.isVisible();
+  if (isVisible) {
+    await multifile_dropdown.click();
+    const multifile_dropdown_code = page.getByTestId('multifile-dropdown-code');
+    const multifile_dropdown_project = page.getByTestId(
+      'multifile-dropdown-project'
+    );
+    await expect(multifile_dropdown_code).toBeVisible();
+    await expect(multifile_dropdown_project).toBeVisible();
+
+    await multifile_dropdown_code.click();
+    const project_solution_viewer_modal = page.getByTestId(
+      'project-solution-viewer-modal'
+    );
+    await expect(project_solution_viewer_modal).toBeVisible();
+    const close_button = page.locator('button.close');
+    await close_button.click();
+
+    await multifile_dropdown.click();
+    await multifile_dropdown_project.click();
+    const project_preview_modal = page.getByTestId('project-preview-modal');
+    await expect(project_preview_modal).toBeVisible();
+  }
+});
+
+test('Single Solution testing', async ({ page }) => {
+  const solution_button = page.getByRole('button', {
+    name: /Solution for Palindrome Checker/i
+  });
+  const isVisible = await solution_button.isVisible();
+  if (isVisible) {
+    await solution_button.click();
+    const solution_viewer_modal = page.getByTestId(
+      'project-solution-viewer-modal'
+    );
+    await expect(solution_viewer_modal).toBeVisible();
+  }
+});
+
+test('External solution testing', async ({ page }) => {
+  const solution_button = page
+    .getByRole('button', {
+      name: /Solution for Build a Random Quote Machine/i
+    })
+    .first();
+  const isVisible = await solution_button.isVisible();
+  if (isVisible) {
+    const browserContext = page.context();
+
+    const [newPage] = await Promise.all([
+      browserContext.waitForEvent('page'),
+      solution_button.click()
+    ]);
+
+    await newPage.waitForLoadState();
+
+    await expect(newPage).toHaveURL(/^https:\/\/codepen\.io/);
+
+    await newPage.close();
+  }
+});