test(acceptance): add language switch test on leaderboard page

Refactor leaderboard page test helper by extracting language dropdown
into its own component and enhancing entries collection to include
username text. Add a new acceptance test to verify that users can
switch between Rust and Python leaderboards, ensuring the URL updates
correctly and leaderboard entries reflect the selected language.

This improves test coverage for multi-language support and ensures UI
correctness when changing the leaderboard language.

Author: rohitpaulk

app/components/leaderboard-page/entries-table/row.hbs

@@ -12,7 +12,13 @@
           <AvatarImage @user={{@entry.user}} class="h-6 w-6 rounded-full border border-gray-300" />
         </div>
         <div class="text-xs font-mono max-w-[12ch] sm:max-w-[16ch] truncate {{if this.isCurrentUser 'text-teal-600' 'text-gray-600'}}">
-          <a href={{@entry.user.codecraftersProfileUrl}} target="_blank" class="hover:underline hover:text-gray-800" rel="noopener noreferrer">
+          <a
+            href={{@entry.user.codecraftersProfileUrl}}
+            target="_blank"
+            class="hover:underline hover:text-gray-800"
+            rel="noopener noreferrer"
+            data-test-username
+          >
             {{@entry.user.username}}
           </a>
         </div>

app/components/leaderboard-page/header.hbs

@@ -17,7 +17,6 @@
     @requestedLanguage={{@selectedLanguage}}
     @selectedLanguage={{@selectedLanguage}}
     @shouldShowAllLanguagesOption={{false}}
-    @onRequestedLanguageChange={{(noop)}}
-    @onDidInsertDropdown={{(noop)}}
+    @onRequestedLanguageChange={{this.handleRequestedLanguageChange}}
   />
 </div>

app/components/leaderboard-page/header.ts

@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import type Store from '@ember-data/store';
 import type LanguageModel from 'codecrafters-frontend/models/language';
+import type RouterService from '@ember/routing/router-service';
+import type Store from '@ember-data/store';
 
 interface Signature {
   Element: HTMLDivElement;
@@ -12,6 +14,7 @@ interface Signature {
 }
 
 export default class LeaderboardPageHeader extends Component<Signature> {
+  @service declare router: RouterService;
   @service declare store: Store;
 
   get sortedLanguagesForDropdown(): LanguageModel[] {
@@ -20,6 +23,11 @@ export default class LeaderboardPageHeader extends Component<Signature> {
       .sortBy('sortPositionForTrack')
       .filter((language) => language.stagesCount > 0);
   }
+
+  @action
+  handleRequestedLanguageChange(language: LanguageModel) {
+    this.router.transitionTo('leaderboard', language.slug);
+  }
 }
 
 declare module '@glint/environment-ember-loose/registry' {

tests/acceptance/leaderboard-page/view-test.js

@@ -1,12 +1,12 @@
-import { currentURL } from '@ember/test-helpers';
-import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
-import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
 import leaderboardPage from 'codecrafters-frontend/tests/pages/leaderboard-page';
-import { signInAsStaff } from 'codecrafters-frontend/tests/support/authentication-helpers';
+import percySnapshot from '@percy/ember';
+import testScenario from 'codecrafters-frontend/mirage/scenarios/test';
+import { currentURL } from '@ember/test-helpers';
+import { module, test } from 'qunit';
 import { setupAnimationTest } from 'ember-animated/test-support';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
 import { setupWindowMock } from 'ember-window-mock/test-support';
-import { module, test } from 'qunit';
-import percySnapshot from '@percy/ember';
+import { signInAsStaff } from 'codecrafters-frontend/tests/support/authentication-helpers';
 
 module('Acceptance | leaderboard-page | view', function (hooks) {
   setupApplicationTest(hooks);
@@ -74,7 +74,55 @@ module('Acceptance | leaderboard-page | view', function (hooks) {
     await percySnapshot('Leaderboard Page');
   });
 
-  // Test that one can switch languages
+  test('can switch languages', async function (assert) {
+    signInAsStaff(this.owner, this.server);
+
+    // Create leaderboards for multiple languages
+    const rustLanguage = this.server.schema.languages.all().models.find((language) => language.slug === 'rust');
+    const pythonLanguage = this.server.schema.languages.all().models.find((language) => language.slug === 'python');
+
+    // Create sample data for both languages
+    const sampleUserData = [
+      { username: 'rust-user-1', score: 1000, leaderboard: rustLanguage.leaderboard },
+      { username: 'rust-user-2', score: 800, leaderboard: rustLanguage.leaderboard },
+      { username: 'python-user-1', score: 900, leaderboard: pythonLanguage.leaderboard },
+      { username: 'python-user-2', score: 700, leaderboard: pythonLanguage.leaderboard },
+    ];
+
+    for (const sampleUserDatum of sampleUserData) {
+      let user = this.server.schema.users.all().models.find((user) => user.username === sampleUserDatum.username);
+
+      user ||= this.server.create('user', {
+        username: sampleUserDatum.username,
+        avatarUrl: `https://github.com/${sampleUserDatum.username}.png`,
+      });
+
+      // Create entries for both languages
+      this.server.create('leaderboard-entry', {
+        leaderboard: sampleUserDatum.leaderboard,
+        user: user,
+        score: sampleUserDatum.score,
+        scoreUpdatesCount: Math.floor(sampleUserDatum.score / 10),
+        relatedCourseSlugs: ['redis', 'shell'],
+      });
+    }
+
+    // Start on Rust leaderboard
+    await leaderboardPage.visit({ language_slug: 'rust' });
+    assert.strictEqual(currentURL(), '/leaderboards/rust');
+    assert.strictEqual(leaderboardPage.entriesTable.entries.length, 2, '2 Rust entries should be shown');
+    assert.strictEqual(leaderboardPage.entriesTable.entries[0].username, 'rust-user-1', 'first entry should be rust-user-1');
+    assert.strictEqual(leaderboardPage.entriesTable.entries[1].username, 'rust-user-2', 'second entry should be rust-user-2');
+
+    // Switch to Python leaderboard
+    await leaderboardPage.languageDropdown.toggle();
+    await leaderboardPage.languageDropdown.clickOnLink('Python');
+    assert.strictEqual(currentURL(), '/leaderboards/python', 'URL should change to Python leaderboard');
+    assert.strictEqual(leaderboardPage.entriesTable.entries.length, 2, '2 Python entries should be shown');
+    assert.strictEqual(leaderboardPage.entriesTable.entries[0].username, 'python-user-1', 'first entry should be python-user-1');
+    assert.strictEqual(leaderboardPage.entriesTable.entries[1].username, 'python-user-2', 'second entry should be python-user-2');
+  });
+
   // Test that surrounding entries are shown if user is not within top 10
   // Test that surrounding entries are not shown if user is within top 10
 });

tests/pages/leaderboard-page.ts

@@ -1,17 +1,17 @@
 import { collection, text, visitable } from 'ember-cli-page-object';
 import createPage from 'codecrafters-frontend/tests/support/create-page';
+import LanguageDropdown from './components/language-dropdown';
 
 export default createPage({
   description: text('[data-test-leaderboard-description]'),
 
   entriesTable: {
-    entries: collection('[data-test-leaderboard-entry-row]'),
-  },
-
-  languageDropdown: {
-    scope: '[data-test-language-dropdown]',
+    entries: collection('[data-test-leaderboard-entry-row]', {
+      username: text('[data-test-username]'),
+    }),
   },
 
+  languageDropdown: LanguageDropdown,
   title: text('[data-test-leaderboard-title]'),
   visit: visitable('/leaderboards/:language_slug'),
 });