feat(e2e,playwright):migrate common components help button tests (#51628)

client/src/templates/Challenges/components/tool-panel.tsx

@@ -104,23 +104,36 @@ function ToolPanel({
         </Button>
       )}
       <Dropdown dropup>
-        <Dropdown.Toggle id={'get-help-dropdown'}>
+        <Dropdown.Toggle
+          id={'get-help-dropdown'}
+          data-playwright-test-label='get-help-dropdown'
+        >
           {isMobile ? t('buttons.help') : t('buttons.get-help')}
         </Dropdown.Toggle>
         <Dropdown.Menu>
           {guideUrl ? (
-            <MenuItem href={guideUrl} target='_blank'>
+            <MenuItem
+              href={guideUrl}
+              target='_blank'
+              data-playwright-test-label='get-hint'
+            >
               {t('buttons.get-hint')}{' '}
               <FontAwesomeIcon icon={faExternalLinkAlt} />
               <span className='sr-only'>, {t('aria.opens-new-window')}</span>
             </MenuItem>
           ) : null}
           {videoUrl ? (
-            <MenuItem onClick={openVideoModal}>
+            <MenuItem
+              onClick={openVideoModal}
+              data-playwright-test-label='watch-a-video'
+            >
               {t('buttons.watch-video')}
             </MenuItem>
           ) : null}
-          <MenuItem onClick={openHelpModal}>
+          <MenuItem
+            onClick={openHelpModal}
+            data-playwright-test-label='ask-for-help'
+          >
             {t('buttons.ask-for-help')}
           </MenuItem>
         </Dropdown.Menu>

e2e/help-button.spec.ts

@@ -0,0 +1,42 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('help-button tests for a page with three links (hint, help and video)', () => {
+  test('should render the button, menu and the three links when video is available', async ({
+    page
+  }) => {
+    // visit the page with the video link
+    await page.goto(
+      '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'
+    );
+    //The button is visible
+    const helpButton = page.getByTestId('get-help-dropdown');
+    await expect(helpButton).toBeVisible();
+    //The button is clickable
+    await helpButton.click();
+    //The menu items are visible
+    await expect(page.getByTestId('get-hint')).toBeVisible();
+    await expect(page.getByTestId('ask-for-help')).toBeVisible();
+    await expect(page.getByTestId('watch-a-video')).toBeVisible();
+  });
+});
+
+test.describe('help-button tests for a page with two links when video is not available', () => {
+  test('should render the button, menu and the two links when video is not available', async ({
+    page
+  }) => {
+    // visit the page without the video link
+    await page.goto(
+      '/learn/front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style'
+    );
+    //The button is visible
+    const helpButton = page.getByTestId('get-help-dropdown');
+    await expect(helpButton).toBeVisible();
+    //The button is clickable
+    await helpButton.click();
+    //The menu items are visible
+    await expect(page.getByTestId('get-hint')).toBeVisible();
+    await expect(page.getByTestId('ask-for-help')).toBeVisible();
+    //The video link is hidden
+    await expect(page.getByTestId('watch-a-video')).toBeHidden();
+  });
+});