fix(client): add better navigation for navigating back to blocks (#64027)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2025-12-17 20:36:23 +01:00
parent 4d8b38489c
commit 8034515276
5 changed files with 213 additions and 69 deletions
@@ -0,0 +1,92 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Block Navigation - Hash Updates', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('should update URL hash when clicking on a challenge link in a grid layout', async ({
+    page
+  }) => {
+    await page.goto(
+      '/learn/javascript-algorithms-and-data-structures-v8/#learn-introductory-javascript-by-building-a-pyramid-generator'
+    );
+
+    // Verify the hash is set correctly
+    await expect(page).toHaveURL(
+      /#learn-introductory-javascript-by-building-a-pyramid-generator$/
+    );
+
+    // Click on step 1 in the grid - the accessible name includes the sr-only text
+    const step1Link = page.getByRole('link', { name: 'Step 1 Not Passed' });
+    await expect(step1Link).toBeVisible();
+    await step1Link.click();
+
+    // Wait for navigation
+    await page.waitForURL(/step-1$/);
+
+    // Go back to verify the hash persists in history
+    await page.goBack();
+    await expect(page).toHaveURL(
+      /#learn-introductory-javascript-by-building-a-pyramid-generator$/
+    );
+  });
+
+  test('should update URL hash when clicking on a certification project', async ({
+    page
+  }) => {
+    await page.goto('/learn/javascript-algorithms-and-data-structures-v8');
+
+    // Click on the certification project link
+    const projectLink = page.getByRole('link', {
+      name: 'Build a Palindrome Checker Project Certification Project, Not completed'
+    });
+    await expect(projectLink).toBeVisible();
+    await projectLink.click();
+
+    // Wait for navigation
+    await page.waitForURL(/build-a-palindrome-checker$/);
+
+    // Go back to verify the hash persists in history
+    await page.goBack();
+    await expect(page).toHaveURL(/#build-a-palindrome-checker-project$/);
+  });
+
+  test('should update URL hash when clicking on a challenge in accordion layout (v9)', async ({
+    page
+  }) => {
+    await page.goto('/learn/javascript-v9');
+
+    await page.getByRole('button', { name: 'Build a Greeting Bot' }).click();
+
+    // Click on step 1 in the accordion
+    const step1Link = page.getByRole('link', { name: 'Step 1 Not Passed' });
+    await expect(step1Link).toBeVisible();
+    await step1Link.click();
+
+    // Wait for navigation
+    await page.waitForURL(/step-1$/);
+
+    // Go back to verify the hash persists in history
+    await page.goBack();
+    await expect(page).toHaveURL(/#workshop-greeting-bot$/);
+  });
+
+  test('should update URL hash when clicking on a certification project in accordion layout (v9)', async ({
+    page
+  }) => {
+    await page.goto('/learn/javascript-v9');
+
+    // Click on the certification project link
+    const projectLink = page.getByRole('link', {
+      name: 'Build a Markdown to HTML Converter'
+    });
+    await expect(projectLink).toBeVisible();
+    await projectLink.click();
+
+    // Wait for navigation
+    await page.waitForURL(/build-a-markdown-to-html-converter$/);
+
+    // Go back to verify the hash persists in history
+    await page.goBack();
+    await expect(page).toHaveURL(/#lab-markdown-to-html-converter$/);
+  });
+});