Skip to content

feat(header): enhance track page header layout and content #2597

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(header): enhance track page header layout and content #2597

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a41871b
feat(header): enhance track page header layout and content
rohitpaulk Jan 29, 2025
39f5200
feat: add Rust Primer section with interactive guides
rohitpaulk Jan 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions app/components/track-concept-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<LinkTo
@route="catalog"
class="block hover:bg-gray-50 dark:hover:bg-gray-700/50 py-1.5 -mx-1.5 px-1.5 rounded"
data-test-stage-list-item
...attributes
>
<div class="flex items-center justify-between">
<div class="flex items-center">
<div class="w-2 h-2 {{if @isComplete 'bg-teal-500' 'bg-gray-200 dark:bg-gray-700'}} rounded-full mr-2"></div>

{{! TODO: Qualify all heroicons with solid/outline }}
{{svg-jar "academic-cap-outline" class="w-6 mr-1.5 text-gray-400 dark:text-gray-600"}}
Comment on lines +11 to +12
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Standardize heroicon usage across the codebase

The codebase shows inconsistent usage of the academic-cap icon:

  • app/components/track-concept-item.hbs: Uses academic-cap-outline
  • app/components/course-card.hbs: Uses academic-cap
  • app/components/tracks-page/track-card.hbs: Uses academic-cap
  • app/components/track-page/header.hbs: Uses academic-cap
🔗 Analysis chain

Address TODO comment about heroicons qualification.

The comment indicates a need to qualify heroicons with solid/outline variants.

Run this script to check heroicon usage patterns:

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Check heroicon usage patterns in the codebase
rg --type hbs "svg-jar.*heroicon" app/

Length of output: 40

Script:

#!/bin/bash
# Search for all svg-jar usages
echo "=== All svg-jar usages ==="
rg --type hbs "{{svg-jar" -A 1

echo -e "\n=== Files containing svg-jar ==="
fd --type f --extension hbs --exec grep -l "svg-jar" {}

echo -e "\n=== Looking for academic-cap specifically ==="
rg --type hbs "academic-cap"

echo -e "\n=== Checking for icon documentation ==="
fd "ICON|icon" --type f --extension md

Length of output: 10864


<div class="prose dark:prose-invert prose-sm">
{{@name}}
</div>
</div>

{{#if @isComplete}}
{{svg-jar "check" class="ml-1 w-5 text-teal-500"}}
{{else}}
<div class="flex items-center gap-x-2">
{{!-- <div class="flex items-center">
{{svg-jar "clipboard-check" class="w-4 mr-1 fill-current text-gray-300 dark:text-gray-700"}}

<span class="text-xs text-gray-400 dark:text-gray-600">
4 questions
</span>
</div>

<div class="h-3 w-px bg-gray-200"></div> --}}

<div class="flex items-center">
{{svg-jar "clock" class="w-4 mr-1 fill-current text-gray-300 dark:text-gray-700"}}

<span class="text-xs text-gray-400 dark:text-gray-600">
{{@estimatedReadingTimeInMinutes}} mins
</span>
</div>
</div>
{{/if}}
</div>
</LinkTo>
19 changes: 19 additions & 0 deletions app/components/track-concept-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Component from '@glimmer/component';

interface Signature {
Element: HTMLButtonElement;

Args: {
name: string;
isComplete: boolean;
estimatedReadingTimeInMinutes: number;
};
}
Comment on lines +3 to +11
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix element type in component signature.

The interface specifies HTMLButtonElement but the component template uses <LinkTo> which renders as an anchor element.

Apply this diff to fix the element type:

 interface Signature {
-  Element: HTMLButtonElement;
+  Element: HTMLAnchorElement;

   Args: {
     name: string;
     isComplete: boolean;
     estimatedReadingTimeInMinutes: number;
   };
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
interface Signature {
Element: HTMLButtonElement;
Args: {
name: string;
isComplete: boolean;
estimatedReadingTimeInMinutes: number;
};
}
interface Signature {
Element: HTMLAnchorElement;
Args: {
name: string;
isComplete: boolean;
estimatedReadingTimeInMinutes: number;
};
}


export default class TrackConceptItemComponent extends Component<Signature> {}

declare module '@glint/environment-ember-loose/registry' {
export default interface Registry {
TrackConceptItem: typeof TrackConceptItemComponent;
}
}
72 changes: 47 additions & 25 deletions app/components/track-page/header.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,54 @@
<div class="flex items-center justify-between" ...attributes data-test-track-header>
<div>
<h1 class="text-3xl md:text-5xl text-gray-800 dark:text-gray-50 font-bold tracking-tighter mb-3">{{@language.trackTitle}}</h1>
<div ...attributes data-test-track-header>
<div class="flex items-center justify-between">
<div>
<h1 class="text-3xl md:text-5xl text-gray-800 dark:text-gray-50 font-bold tracking-tighter mb-2">{{@language.trackTitle}}</h1>

<p class="text-gray-600 dark:text-gray-400 mb-4 max-w-xl" data-test-track-header-description>
{{markdown-to-html @language.trackDescriptionMarkdown}}
</p>
<p class="text-gray-600 dark:text-gray-400 mb-4 max-w-xl" data-test-track-header-description>
{{markdown-to-html @language.trackDescriptionMarkdown}}
</p>

<div class="flex items-center flex-wrap-reverse gap-x-2 gap-y-4">
{{#if this.currentUserHasStartedTrack}}
<TrackPage::ResumeTrackButton @language={{@language}} @courses={{@courses}} />
{{else}}
<TrackPage::StartTrackButton @language={{@language}} @courses={{@courses}} />
{{/if}}

{{#if (gt this.topParticipants.length 0)}}
<div class="flex items-center gap-x-3">
<div class="flex items-center">
<div class="flex -space-x-1 hover:space-x-1 items-center">
{{#each this.topParticipants as |user|}}
<TrackPage::Header::TopParticipantAvatar @user={{user}} />
{{/each}}
</div>

<span class="text-xs text-gray-600 dark:text-gray-400 ml-2">Join the best</span>
{{svg-jar "user-group" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
<span class="text-xs text-gray-500">203,192 learners</span>
</div>
<div class="h-3 w-px bg-gray-200"></div>
<div class="flex items-center">
{{svg-jar "terminal" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
<span class="text-xs text-gray-500">248 exercises</span>
</div>
{{/if}}
<div class="h-3 w-px bg-gray-200"></div>
<div class="flex items-center">
{{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
<span class="text-xs text-gray-500">56 concepts</span>
</div>
<div class="h-3 w-px bg-gray-200"></div>
<div class="flex items-center">
{{svg-jar "clipboard-check" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
<span class="text-xs text-gray-500">148 questions</span>
</div>
{{!-- <div class="h-1 w-1 bg-gray-400 rounded-full"></div>
<div class="flex items-center flex-wrap-reverse gap-x-2 gap-y-4">
{{#if (gt this.topParticipants.length 0)}}
<div class="flex items-center">
<div class="flex -space-x-1 hover:space-x-1 items-center">
{{#each this.topParticipants as |user|}}
<TrackPage::Header::TopParticipantAvatar @user={{user}} />
{{/each}}
</div>

<span class="text-xs text-gray-600 dark:text-gray-400 ml-2">Join the best</span>
</div>
{{/if}}
</div> --}}
</div>
</div>
Comment on lines +10 to +44
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace hardcoded statistics with dynamic values.

The statistics section looks great, but the numbers appear to be hardcoded:

  • "203,192 learners"
  • "248 exercises"
  • "56 concepts"
  • "148 questions"

These should be dynamic values from the backend to ensure accuracy.

Would you like me to help create a new component or modify this template to accept these statistics as parameters?


<div class="ml-4 hidden md:block bg-white rounded-full p-2 border-2 border-gray-200 shadow">
<img src="https://raw.githubusercontent.com/rust-lang/rust-artwork/refs/heads/master/logo/rust-logo-blk.svg" class="h-36" />
{{!-- <LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" /> --}}
</div>
Comment on lines +47 to +49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Restore dynamic logo handling.

The hardcoded Rust logo URL makes this component track-specific, whereas the commented-out LanguageLogo component was more flexible. Consider:

  1. Restoring the LanguageLogo component for dynamic track logos
  2. If using direct URLs, pass them as parameters instead of hardcoding
-    <div class="ml-4 hidden md:block bg-white rounded-full p-2 border-2 border-gray-200 shadow">
-      <img src="https://raw.githubusercontent.com/rust-lang/rust-artwork/refs/heads/master/logo/rust-logo-blk.svg" class="h-36" />
-      {{!-- <LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" /> --}}
+    <div class="ml-4 hidden md:block bg-white rounded-full p-2 border-2 border-gray-200 shadow">
+      <LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" />
     </div>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div class="ml-4 hidden md:block bg-white rounded-full p-2 border-2 border-gray-200 shadow">
<img src="https://raw.githubusercontent.com/rust-lang/rust-artwork/refs/heads/master/logo/rust-logo-blk.svg" class="h-36" />
{{!-- <LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" /> --}}
<div class="ml-4 hidden md:block bg-white rounded-full p-2 border-2 border-gray-200 shadow">
<LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" />
</div>

</div>
<div class="ml-4 hidden md:block">
<LanguageLogo @language={{@language}} @variant="teal" class="h-36 dark:opacity-90" />
</div>

<div class="h-px bg-gray-200 dark:bg-white/5 w-full my-8"></div>
</div>
35 changes: 33 additions & 2 deletions app/templates/track.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,41 @@
<div class="container mx-auto lg:max-w-screen-lg pt-6 md:pt-10 pb-10 px-3 md:px-6">
<TrackPage::Header @language={{@model.language}} @courses={{this.sortedCourses}} />

<div class="h-px bg-gray-200 dark:bg-white/5 w-full my-8"></div>

<div class="flex items-start">
<div class="flex-grow">
<div class="bg-white rounded-md shadow-sm border border-gray-200 relative w-full group mb-4 p-4 md:p-6">
<div class="text-lg md:text-xl font-semibold text-gray-800 dark:text-gray-200 flex items-center mb-4">
Rust Primer
</div>

<div class="leading-6 prose dark:prose-invert mb-4">
<p>
New to Rust? Start with these interactive guides to cover the basics.
</p>
</div>

<div>
<TrackConceptItem @name="Defining variables" @isComplete={{false}} @estimatedReadingTimeInMinutes={{2}} />
<TrackConceptItem @name="Printing output" @isComplete={{false}} @estimatedReadingTimeInMinutes={{4}} />
<TrackConceptItem @name="Control flow" @isComplete={{false}} @estimatedReadingTimeInMinutes={{4}} />
<TrackConceptItem @name="Scalar data types" @isComplete={{false}} @estimatedReadingTimeInMinutes={{6}} />
<TrackConceptItem @name="Compound data types" @isComplete={{false}} @estimatedReadingTimeInMinutes={{2}} />
<TrackConceptItem @name="Defining functions" @isComplete={{false}} @estimatedReadingTimeInMinutes={{3}} />
<TrackConceptItem @name="Ownership" @isComplete={{false}} @estimatedReadingTimeInMinutes={{3}} />
<TrackConceptItem @name="Error handling" @isComplete={{false}} @estimatedReadingTimeInMinutes={{3}} />
<TrackConceptItem @name="Modules" @isComplete={{false}} @estimatedReadingTimeInMinutes={{8}} />
<TrackConceptItem @name="Packages" @isComplete={{false}} @estimatedReadingTimeInMinutes={{8}} />
<TrackConceptItem @name="Crates" @isComplete={{false}} @estimatedReadingTimeInMinutes={{12}} />
<TrackConceptItem @name="Generic Types, Traits and Lifetimes" @isComplete={{false}} @estimatedReadingTimeInMinutes={{12}} />
</div>

<div class="leading-6 prose dark:prose-invert mt-4">
<p>
Once you've go the basics down, time to move on to real projects.
</p>
</div>
</div>

<TrackPage::IntroductionAndCourses @language={{@model.language}} @courses={{this.sortedCourses}} class="w-full mb-4" />
</div>

Expand Down
0 ...images/heroicons/outline/academic-cap.svg → ...eroicons/outline/academic-cap-outline.svg
View file
Open in desktop
File renamed without changes
176 changes: 89 additions & 87 deletions tests/acceptance/track-page/view-track-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,118 +12,120 @@ module('Acceptance | track-page | view-track', function (hooks) {

test('it renders for anonymous user', async function (assert) {
testScenario(this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
createTrackLeaderboardEntries(this.server, 'rust', 'redis');

await visit('/tracks/go');
assert.strictEqual(1, 1); // dummy assertion
await visit('/tracks/rust');
await this.pauseTest();
// assert.strictEqual(1, 1); // dummy assertion

await percySnapshot('Track - Anonymous User');

await visit('/tracks/haskell');
assert.strictEqual(1, 1); // dummy assertion
// await percySnapshot('Track - Anonymous User');
Comment on lines +15 to +22
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove debugging code and restore test assertions.

Several issues in the test setup:

  1. pauseTest() should not be committed
  2. Actual assertions are missing (only dummy assertion)
  3. Visual regression testing (Percy snapshot) is disabled
-    createTrackLeaderboardEntries(this.server, 'rust', 'redis');
-    await visit('/tracks/rust');
-    await this.pauseTest();
-    // assert.strictEqual(1, 1); // dummy assertion
-    // await percySnapshot('Track - Anonymous User');
+    createTrackLeaderboardEntries(this.server, 'rust', 'redis');
+    await visit('/tracks/rust');
+    
+    assert.strictEqual(trackPage.header.descriptionText, "Rust mastery exercises. Become your team's resident Rust expert.");
+    assert.true(trackPage.header.isVisible, "Header should be visible");
+    
+    await percySnapshot('Track - Anonymous User');
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
createTrackLeaderboardEntries(this.server, 'rust', 'redis');
await visit('/tracks/go');
assert.strictEqual(1, 1); // dummy assertion
await visit('/tracks/rust');
await this.pauseTest();
// assert.strictEqual(1, 1); // dummy assertion
await percySnapshot('Track - Anonymous User');
await visit('/tracks/haskell');
assert.strictEqual(1, 1); // dummy assertion
// await percySnapshot('Track - Anonymous User');
createTrackLeaderboardEntries(this.server, 'rust', 'redis');
await visit('/tracks/rust');
assert.strictEqual(trackPage.header.descriptionText, "Rust mastery exercises. Become your team's resident Rust expert.");
assert.true(trackPage.header.isVisible, "Header should be visible");
await percySnapshot('Track - Anonymous User');
🧰 Tools
🪛 ESLint

[error] 18-18: Do not commit pauseTest()

(ember/no-pause-test)

[error] 21-22: Delete ⏎

(prettier/prettier)


await percySnapshot('Track (Generic) - Anonymous User');
// await visit('/tracks/haskell');
// assert.strictEqual(1, 1); // dummy assertion

// await percySnapshot('Track (Generic) - Anonymous User');
});

test('it renders the correct description if the track is Go', async function (assert) {
testScenario(this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
// test('it renders the correct description if the track is Go', async function (assert) {
// testScenario(this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');

await visit('/tracks/go');
// await visit('/tracks/go');

assert.strictEqual(
trackPage.header.descriptionText,
'Achieve mastery in advanced Go, by building real-world projects. Featuring goroutines, systems programming, file I/O, and more.',
);
});
// assert.strictEqual(
// trackPage.header.descriptionText,
// 'Achieve mastery in advanced Go, by building real-world projects. Featuring goroutines, systems programming, file I/O, and more.',
// );
// });

test('it renders the correct description if the track is not Go', async function (assert) {
testScenario(this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
// test('it renders the correct description if the track is not Go', async function (assert) {
// testScenario(this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');

await visit('/tracks/python');
// await visit('/tracks/python');

assert.strictEqual(trackPage.header.descriptionText, "Python mastery exercises. Become your team's resident Python expert.");
});
// assert.strictEqual(trackPage.header.descriptionText, "Python mastery exercises. Become your team's resident Python expert.");
// });

test('it renders for logged-in user', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
// test('it renders for logged-in user', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');

await visit('/tracks/go');
assert.strictEqual(1, 1); // dummy assertion
// await visit('/tracks/go');
// assert.strictEqual(1, 1); // dummy assertion

await percySnapshot('Track - Not Started');
});
// await percySnapshot('Track - Not Started');
// });

test('it renders for logged-in user who has started course', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
// test('it renders for logged-in user who has started course', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');

let currentUser = this.server.schema.users.first();
let go = this.server.schema.languages.findBy({ slug: 'go' });
let redis = this.server.schema.courses.findBy({ slug: 'redis' });
// let currentUser = this.server.schema.users.first();
// let go = this.server.schema.languages.findBy({ slug: 'go' });
// let redis = this.server.schema.courses.findBy({ slug: 'redis' });

this.server.create('repository', 'withFirstStageCompleted', {
course: redis,
language: go,
user: currentUser,
});
// this.server.create('repository', 'withFirstStageCompleted', {
// course: redis,
// language: go,
// user: currentUser,
// });

await visit('/tracks/go');
assert.strictEqual(1, 1);
// await visit('/tracks/go');
// assert.strictEqual(1, 1);

await percySnapshot('Track - Started');
});
// await percySnapshot('Track - Started');
// });

test('it renders for logged-in user who has finished one course', async function (assert) {
testScenario(this.server, ['dummy', 'sqlite']);
signIn(this.owner, this.server);
createTrackLeaderboardEntries(this.server, 'go', 'dummy');
// test('it renders for logged-in user who has finished one course', async function (assert) {
// testScenario(this.server, ['dummy', 'sqlite']);
// signIn(this.owner, this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'dummy');

let currentUser = this.server.schema.users.first();
let go = this.server.schema.languages.findBy({ slug: 'go' });
let dummy = this.server.schema.courses.findBy({ slug: 'dummy' });
// let currentUser = this.server.schema.users.first();
// let go = this.server.schema.languages.findBy({ slug: 'go' });
// let dummy = this.server.schema.courses.findBy({ slug: 'dummy' });

this.server.create('repository', 'withAllStagesCompleted', {
course: dummy,
language: go,
user: currentUser,
});
// this.server.create('repository', 'withAllStagesCompleted', {
// course: dummy,
// language: go,
// user: currentUser,
// });

await visit('/tracks/go');
assert.strictEqual(1, 1);
// await visit('/tracks/go');
// assert.strictEqual(1, 1);

await percySnapshot('Track - 1 Course Finished');
});
// await percySnapshot('Track - 1 Course Finished');
// });

test('it excludes alpha courses', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);
// test('it excludes alpha courses', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);

await trackPage.visit({ track_slug: 'javascript' });
assert.notOk(trackPage.cards.mapBy('title').includes('Build your own React'));
});
// await trackPage.visit({ track_slug: 'javascript' });
// assert.notOk(trackPage.cards.mapBy('title').includes('Build your own React'));
// });
Comment on lines +30 to +110
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Restore critical test coverage.

A significant number of important test cases have been commented out, including:

  • Track-specific description rendering
  • Logged-in user states
  • Course completion scenarios
  • Alpha course handling

These tests cover critical user scenarios and edge cases. Instead of removing them, they should be updated to match the new header layout.

Would you like me to help update these test cases to work with the new header implementation?


test('it does not show a challenge if it is deprecated', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');

let currentUser = this.server.schema.users.first();
let go = this.server.schema.languages.findBy({ slug: 'go' });
let docker = this.server.schema.courses.findBy({ slug: 'docker' });
docker.update({ releaseStatus: 'deprecated' });

this.server.create('repository', 'withFirstStageCompleted', {
course: docker,
language: go,
user: currentUser,
});

await visit('/tracks/go');
assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'));
});
// test('it does not show a challenge if it is deprecated', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');

// let currentUser = this.server.schema.users.first();
// let go = this.server.schema.languages.findBy({ slug: 'go' });
// let docker = this.server.schema.courses.findBy({ slug: 'docker' });
// docker.update({ releaseStatus: 'deprecated' });

// this.server.create('repository', 'withFirstStageCompleted', {
// course: docker,
// language: go,
// user: currentUser,
// });

// await visit('/tracks/go');
// assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'));
// });
Comment on lines +112 to +130
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Restore deprecated course visibility test.

The test for ensuring deprecated courses are not displayed is important for maintaining correct course visibility rules. This regression test should be updated rather than removed to prevent accidental display of deprecated courses.

-  // test('it does not show a challenge if it is deprecated', async function (assert) {
+  test('it does not show a challenge if it is deprecated', async function (assert) {
     testScenario(this.server);
     signIn(this.owner, this.server);
     createTrackLeaderboardEntries(this.server, 'go', 'redis');
     
     // ... rest of the test setup ...
     
     await visit('/tracks/go');
-    // assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'));
+    assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'), 'Deprecated course should not be visible');
   });
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// test('it does not show a challenge if it is deprecated', async function (assert) {
// testScenario(this.server);
// signIn(this.owner, this.server);
// createTrackLeaderboardEntries(this.server, 'go', 'redis');
// let currentUser = this.server.schema.users.first();
// let go = this.server.schema.languages.findBy({ slug: 'go' });
// let docker = this.server.schema.courses.findBy({ slug: 'docker' });
// docker.update({ releaseStatus: 'deprecated' });
// this.server.create('repository', 'withFirstStageCompleted', {
// course: docker,
// language: go,
// user: currentUser,
// });
// await visit('/tracks/go');
// assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'));
// });
test('it does not show a challenge if it is deprecated', async function (assert) {
testScenario(this.server);
signIn(this.owner, this.server);
createTrackLeaderboardEntries(this.server, 'go', 'redis');
let currentUser = this.server.schema.users.first();
let go = this.server.schema.languages.findBy({ slug: 'go' });
let docker = this.server.schema.courses.findBy({ slug: 'docker' });
docker.update({ releaseStatus: 'deprecated' });
this.server.create('repository', 'withFirstStageCompleted', {
course: docker,
language: go,
user: currentUser,
});
await visit('/tracks/go');
assert.notOk(trackPage.cards.mapBy('title').includes('Build your own Docker'), 'Deprecated course should not be visible');
});

});
Loading