Merge pull request #3078 from codecrafters-io/test-add-language-switch-leaderboard

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

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'),
 });