Repository: freeCodeCamp/freeCodeCamp
File: e2e/super-block-page.spec.ts (TypeScript)

Code before:
    }) => {
      test.setTimeout(20000);

      await page.goto('/learn/javascript-algorithms-and-data-structures-v8');

      // The first block is expanded by default
      await expect(
        page.getByRole('button', {
          name: 'Learn Introductory JavaScript by Building a Pyramid Generator'
        })
      ).toHaveAttribute('aria-expanded', 'true');

      await expect(
        page.getByRole('button', {
          name: 'Learn Basic JavaScript by Building a Role Playing Game'
        })
      ).toHaveAttribute('aria-expanded', 'false');

      await page.goto(
        '/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-2'
      );

      // Go back to the super block page
      await page.goto('/learn/javascript-algorithms-and-data-structures-v8');

      await expect(
        page.getByRole('button', {
          name: 'Learn Introductory JavaScript by Building a Pyramid Generator'
        })
      ).toHaveAttribute('aria-expanded', 'false');

      await expect(
        page.getByRole('button', {
          name: 'Learn Basic JavaScript by Building a Role Playing Game'
        })
      ).toHaveAttribute('aria-expanded', 'true');
    });
  });

  test.describe('Super Block in Accordion View', () => {
    test.skip(
      () => process.env.SHOW_UPCOMING_CHANGES !== 'true',
      'The FSD superblock is not available if SHOW_UPCOMING_CHANGES is false'
    );

    test('should expand the correct block when user goes to the page from breadcrumb click', async ({
      page
    }) => {
      await page.goto(`/learn/full-stack-developer/workshop-cafe-menu/step-2`);

      await page

Review comment (performance):
The scenario the test is trying to simulate is: when the user visits a challenge page, then navigates back to the super block page, the super block page would expand the block that the user has just visited.

The test is currently executing two `.goto()` calls:

```js
await page.goto('/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-2');

await page.goto('/learn/javascript-algorithms-and-data-structures-v8');
```

My guess is the calls are too close to each other. The second navigation happens too fast that the app doesn't have a chance to register the `currentChallengeId`, and without that information, the expanded block on the super block page is not reflected correctly.

So the fix here is to wait for the challenge page to load, as an attempt to slow down the navigation.

Code after:
    }) => {
      test.setTimeout(20000);

      await page.goto('/learn/javascript-algorithms-and-data-structures-v8');

      // The first block is expanded by default
      await expect(
        page.getByRole('button', {
          name: 'Learn Introductory JavaScript by Building a Pyramid Generator'
        })
      ).toHaveAttribute('aria-expanded', 'true');

      await expect(
        page.getByRole('button', {
          name: 'Learn Basic JavaScript by Building a Role Playing Game'
        })
      ).toHaveAttribute('aria-expanded', 'false');

      await page.goto(
        '/learn/javascript-algorithms-and-data-structures-v8/learn-basic-javascript-by-building-a-role-playing-game/step-2'
      );

      // Wait for the page to finish loading so that the current challenge ID can be registered.
      await expect(
        page.getByRole('heading', { name: 'Step 2', level: 1 })
      ).toBeVisible();

      // Go back to the super block page
      await page.goto('/learn/javascript-algorithms-and-data-structures-v8');

      await expect(
        page.getByRole('button', {
          name: 'Learn Introductory JavaScript by Building a Pyramid Generator'
        })
      ).toHaveAttribute('aria-expanded', 'false');

      await expect(
        page.getByRole('button', {
          name: 'Learn Basic JavaScript by Building a Role Playing Game'
        })
      ).toHaveAttribute('aria-expanded', 'true');
    });
  });

  test.describe('Super Block in Accordion View', () => {
    test.skip(
      () => process.env.SHOW_UPCOMING_CHANGES !== 'true',
      'The FSD superblock is not available if SHOW_UPCOMING_CHANGES is false'
    );

    test('should expand the correct block when user goes to the page from breadcrumb click', async ({