Repository: freeCodeCamp/freeCodeCamp
File: e2e/editor-tabs.spec.ts (TypeScript)

Code before:
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

test('should toggle editor visibility based on aria-expanded attribute', async ({
  page
}) => {
  const tabLocator = page.locator('div.monaco-editor-tabs button').first();
  const isExpandedBeforeClick = await tabLocator.getAttribute('aria-expanded');
  if (isExpandedBeforeClick === 'true') {
    await tabLocator.click();
    const isExpandedAfterClick = await tabLocator.getAttribute('aria-expanded');
    expect(isExpandedAfterClick).toBe('false');
  } else {
    await tabLocator.click();
    const isExpandedAfterClick = await tabLocator.getAttribute('aria-expanded');
    expect(isExpandedAfterClick).toBe('true');
  }
});

test('toggling the button should toggle the appearance of the corresponding ReflexElement', async ({
  page
}) => {
  const tabsLocator = await page.locator('div.monaco-editor-tabs button').all();
  for (const tab of tabsLocator) {
    const tabFileKey = await tab.getAttribute('data-cy');
    if (tabFileKey) {
      const fileKey = tabFileKey.replace('editor-tab-', '');

      const ariaExpandedBeforeClick = await tab.getAttribute('aria-expanded');
      const reflexElementBeforeClick = page.locator(
        `div[data-cy="editor-container-${fileKey}"]`
      );

      if (ariaExpandedBeforeClick === 'true') {
        await expect(reflexElementBeforeClick).toBeVisible();
      } else {
        await expect(reflexElementBeforeClick).toBeHidden();
      }

      await tab.click();

      const ariaExpandedAfterClick = await tab.getAttribute('aria-expanded');
      const reflexElementAfterClick = page.locator(
        `div[data-cy="editor-container-${fileKey}"]`
      );

      if (ariaExpandedAfterClick === 'true') {
        await expect(reflexElementAfterClick).toBeVisible();
      } else {
        await expect(reflexElementAfterClick).toBeHidden();

Review comment (suggestion):
`data-cy` is an attribute associated with Cypress, but we are working with Playwright here, so we shouldn't have these two mixed up.

We recommend using `getByRole` and `getByText` to query the elements: https://contribute.freecodecamp.org/#/how-to-add-playwright-tests?id=-identifying-a-dom-element.

Code after:
    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
  );
});

test('should toggle editor visibility correctly', async ({ page }) => {
  const htmlTabToggle = page.getByRole('button', { name: 'index.html Editor' });
  const cssTabToggle = page.getByRole('button', { name: 'styles.css Editor' });
  const htmlTab = page.getByTestId('editor-container-indexhtml');
  const cssTab = page.getByTestId('editor-container-stylescss');

  await expect(htmlTabToggle).toBeVisible();
  // HTML tab is opened by default
  await expect(htmlTabToggle).toHaveAttribute('aria-expanded', 'true');
  await expect(htmlTab).toBeVisible();
  await htmlTabToggle.click();
  await expect(htmlTabToggle).toHaveAttribute('aria-expanded', 'false');
  await expect(htmlTab).not.toBeVisible();

  await expect(cssTabToggle).toBeVisible();
  // CSS tab is not opened by default
  await expect(cssTabToggle).toHaveAttribute('aria-expanded', 'false');
  await expect(cssTab).not.toBeVisible();
  await cssTabToggle.click();
  await expect(cssTabToggle).toHaveAttribute('aria-expanded', 'true');
  await expect(cssTab).toBeVisible();
});