Merge pull request #2418 from codecrafters-io/rename-second-stage-card

rename second stage instructions card

app/components/course-page/course-stage-step/second-stage-instructions-card.hbs → app/components/course-page/course-stage-step/second-stage-tutorial-card.hbs

@@ -1,4 +1,4 @@
-<CoursePage::InstructionsCard @title="How to pass this stage" id="second-stage-instructions-card" ...attributes>
+<CoursePage::InstructionsCard @title="How to pass this stage" id="second-stage-tutorial-card" ...attributes>
   <:content>
     <div class="prose dark:prose-invert mb-5">
       <p>
@@ -14,22 +14,22 @@
 
     <ExpandableStepList @steps={{this.steps}} @onManualStepComplete={{this.handleStepCompletedManually}} class="scroll-mt-32" as |stepList|>
       {{#if (eq stepList.expandedStep.id "read-instructions")}}
-        <CoursePage::CourseStageStep::SecondStageInstructionsCard::ReadInstructionsStep
+        <CoursePage::CourseStageStep::SecondStageTutorialCard::ReadInstructionsStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.readInstructionsStepIsComplete}}
           @shouldRecommendLanguageGuide={{@shouldRecommendLanguageGuide}}
         />
       {{else if (eq stepList.expandedStep.id "implement-solution")}}
-        <CoursePage::CourseStageStep::SecondStageInstructionsCard::ImplementSolutionStep
+        <CoursePage::CourseStageStep::SecondStageTutorialCard::ImplementSolutionStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.implementSolutionStepIsComplete}}
           @shouldRecommendLanguageGuide={{@shouldRecommendLanguageGuide}}
           @shouldShowSolution={{@shouldShowSolution}}
         />
       {{else if (eq stepList.expandedStep.id "run-tests")}}
-        <CoursePage::CourseStageStep::SecondStageInstructionsCard::RunTestsStep
+        <CoursePage::CourseStageStep::SecondStageTutorialCard::RunTestsStep
           @repository={{@repository}}
           @courseStage={{@courseStage}}
           @isComplete={{this.runTestsStepIsComplete}}

app/components/course-page/course-stage-step/second-stage-instructions-card.ts → app/components/course-page/course-stage-step/second-stage-tutorial-card.ts

@@ -55,7 +55,7 @@ class RunTestsStep extends BaseStep implements Step {
   }
 }
 
-export default class SecondStageInstructionsCardComponent extends Component<Signature> {
+export default class SecondStageTutorialCardComponent extends Component<Signature> {
   @service declare coursePageState: CoursePageStateService;
   @service declare store: Store;
 
@@ -116,6 +116,6 @@ export default class SecondStageInstructionsCardComponent extends Component<Sign
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::CourseStageStep::SecondStageInstructionsCard': typeof SecondStageInstructionsCardComponent;
+    'CoursePage::CourseStageStep::SecondStageTutorialCard': typeof SecondStageTutorialCardComponent;
   }
 }

app/components/course-page/course-stage-step/second-stage-instructions-card/implement-solution-step.ts → app/components/course-page/course-stage-step/second-stage-tutorial-card/implement-solution-step.ts

@@ -32,6 +32,6 @@ export default class ImplementSolutionStepComponent extends Component<Signature>
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::CourseStageStep::SecondStageInstructionsCard::ImplementSolutionStep': typeof ImplementSolutionStepComponent;
+    'CoursePage::CourseStageStep::SecondStageTutorialCard::ImplementSolutionStep': typeof ImplementSolutionStepComponent;
   }
 }

app/components/course-page/course-stage-step/second-stage-instructions-card/read-instructions-step.ts → app/components/course-page/course-stage-step/second-stage-tutorial-card/read-instructions-step.ts

@@ -17,6 +17,6 @@ export default class ReadInstructionsStepComponent extends Component<Signature>
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::CourseStageStep::SecondStageInstructionsCard::ReadInstructionsStep': typeof ReadInstructionsStepComponent;
+    'CoursePage::CourseStageStep::SecondStageTutorialCard::ReadInstructionsStep': typeof ReadInstructionsStepComponent;
   }
 }

app/components/course-page/course-stage-step/second-stage-instructions-card/run-tests-step.ts → app/components/course-page/course-stage-step/second-stage-tutorial-card/run-tests-step.ts

@@ -26,6 +26,6 @@ export default class RunTestsStepComponent extends Component<Signature> {
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {
-    'CoursePage::CourseStageStep::SecondStageInstructionsCard::RunTestsStep': typeof RunTestsStepComponent;
+    'CoursePage::CourseStageStep::SecondStageTutorialCard::RunTestsStep': typeof RunTestsStepComponent;
   }
 }

app/templates/course/stage/instructions.hbs

@@ -37,7 +37,7 @@
     {{/if}}
 
     {{#if @model.courseStage.isSecond}}
-      <CoursePage::CourseStageStep::SecondStageInstructionsCard
+      <CoursePage::CourseStageStep::SecondStageTutorialCard
         @repository={{@model.activeRepository}}
         @courseStage={{@model.courseStage}}
         @shouldRecommendLanguageGuide={{this.shouldShowLanguageGuide}}

tests/acceptance/course-page/complete-second-stage-test.js

@@ -37,52 +37,52 @@ module('Acceptance | course-page | complete-second-stage', function (hooks) {
     await catalogPage.visit();
     await catalogPage.clickOnCourse('Build your own Dummy');
 
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is not complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is not expanded');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is not complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isExpanded, 'Second step is not expanded');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[2].isComplete, 'Third step is not complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[2].isExpanded, 'Third step is not expanded');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is not complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is not expanded');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is not complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isExpanded, 'Second step is not expanded');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[2].isComplete, 'Third step is not complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[2].isExpanded, 'Third step is not expanded');
 
-    await coursePage.secondStageInstructionsCard.steps[0].click();
+    await coursePage.secondStageTutorialCard.steps[0].click();
 
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is not complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is expanded');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is not complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is expanded');
 
     await coursePage.clickOnHeaderTabLink('Code Examples');
     await coursePage.clickOnHeaderTabLink('Instructions');
 
     // TODO: See if we can retain expanded/collapsed state after switching tabs?
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is not complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is collapsed');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is not complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is collapsed');
 
-    await coursePage.secondStageInstructionsCard.steps[0].click();
-    await coursePage.secondStageInstructionsCard.clickOnCompleteStepButton();
+    await coursePage.secondStageTutorialCard.steps[0].click();
+    await coursePage.secondStageTutorialCard.clickOnCompleteStepButton();
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is collapsed');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is not complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isExpanded, 'Second step is expanded');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is collapsed');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is not complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isExpanded, 'Second step is expanded');
 
     await coursePage.clickOnHeaderTabLink('Code Examples');
     await coursePage.clickOnHeaderTabLink('Instructions');
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is not complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isExpanded, 'Second step is expanded');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is not complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isExpanded, 'Second step is expanded');
 
-    await coursePage.secondStageInstructionsCard.clickOnCompleteStepButton();
+    await coursePage.secondStageTutorialCard.clickOnCompleteStepButton();
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[2].isComplete, 'Third step is not complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[2].isComplete, 'Third step is not complete');
 
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is collapsed');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isExpanded, 'Second step is collapsed');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[2].isExpanded, 'Third step is expanded');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is collapsed');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isExpanded, 'Second step is collapsed');
+    assert.ok(coursePage.secondStageTutorialCard.steps[2].isExpanded, 'Third step is expanded');
 
     // Asserts that we don't show the "To run tests again..." message for a system submission
-    assert.contains(coursePage.secondStageInstructionsCard.steps[2].instructions, 'To run tests, make changes to your code');
+    assert.contains(coursePage.secondStageTutorialCard.steps[2].instructions, 'To run tests, make changes to your code');
 
     this.server.create('submission', 'withSuccessStatus', {
       repository: repository,
@@ -92,12 +92,12 @@ module('Acceptance | course-page | complete-second-stage', function (hooks) {
     await Promise.all(window.pollerInstances.map((poller) => poller.forcePoll()));
     await finishRender();
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[2].isComplete, 'Third step is complete');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[0].isExpanded, 'First step is collapsed');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[1].isExpanded, 'Second step is collapsed');
-    assert.notOk(coursePage.secondStageInstructionsCard.steps[2].isExpanded, 'Third step is collapsed');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[2].isComplete, 'Third step is complete');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[0].isExpanded, 'First step is collapsed');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[1].isExpanded, 'Second step is collapsed');
+    assert.notOk(coursePage.secondStageTutorialCard.steps[2].isExpanded, 'Third step is collapsed');
 
     assert.ok(coursePage.testRunnerCard.isExpanded, 'Test runner card is expanded');
     await coursePage.testRunnerCard.clickOnMarkStageAsCompleteButton();
@@ -134,9 +134,9 @@ module('Acceptance | course-page | complete-second-stage', function (hooks) {
     await Promise.all(window.pollerInstances.map((poller) => poller.forcePoll()));
     await finishRender();
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[2].isComplete, 'Third step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[2].isComplete, 'Third step is complete');
 
     assert.ok(coursePage.testRunnerCard.isExpanded, 'Test runner card is expanded');
     assert.notOk(coursePage.testRunnerCard.markStageAsCompleteButton.isVisible, 'Mark stage as complete button is not visible');

tests/acceptance/course-page/complete-stage-without-changes-test.js

@@ -74,9 +74,9 @@ module('Acceptance | course-page | complete-stage-without-changes', function (ho
     await Promise.all(window.pollerInstances.map((poller) => poller.forcePoll()));
     await finishRender();
 
-    assert.ok(coursePage.secondStageInstructionsCard.steps[0].isComplete, 'First step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[1].isComplete, 'Second step is complete');
-    assert.ok(coursePage.secondStageInstructionsCard.steps[2].isComplete, 'Third step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[0].isComplete, 'First step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[1].isComplete, 'Second step is complete');
+    assert.ok(coursePage.secondStageTutorialCard.steps[2].isComplete, 'Third step is complete');
 
     assert.ok(coursePage.testRunnerCard.isExpanded, 'Test runner card is expanded');
     assert.notOk(coursePage.testRunnerCard.markStageAsCompleteButton.isVisible, 'Mark stage as complete button is not visible');

tests/acceptance/course-page/course-stage-solutions-test.js

@@ -39,17 +39,17 @@ module('Acceptance | course-page | course-stage-solutions', function (hooks) {
     await catalogPage.visit();
     await catalogPage.clickOnCourse('Build your own Redis');
 
-    await coursePage.secondStageInstructionsCard.clickOnExpandStepButton();
-    await coursePage.secondStageInstructionsCard.clickOnCompleteStepButton();
+    await coursePage.secondStageTutorialCard.clickOnExpandStepButton();
+    await coursePage.secondStageTutorialCard.clickOnCompleteStepButton();
   });
 
   test('can view solution', async function (assert) {
-    assert.ok(coursePage.secondStageInstructionsCard.hasRevealSolutionButton, 'Expect reveal solution button to be visible');
+    assert.ok(coursePage.secondStageTutorialCard.hasRevealSolutionButton, 'Expect reveal solution button to be visible');
     await percySnapshot('Second Stage Solution - Before Reveal');
 
-    await coursePage.secondStageInstructionsCard.clickOnRevealSolutionButton();
-    assert.false(coursePage.secondStageInstructionsCard.hasRevealSolutionButton, 'Expect reveal solution button to be hidden');
-    assert.ok(coursePage.secondStageInstructionsCard.hasFileDiffCard, 'Expect file diff card to be visible');
+    await coursePage.secondStageTutorialCard.clickOnRevealSolutionButton();
+    assert.false(coursePage.secondStageTutorialCard.hasRevealSolutionButton, 'Expect reveal solution button to be hidden');
+    assert.ok(coursePage.secondStageTutorialCard.hasFileDiffCard, 'Expect file diff card to be visible');
     await percySnapshot('Second Stage Solution - After Reveal');
   });
 });

tests/pages/components/course-page/course-stage-step/second-stage-instructions-card.ts → tests/pages/components/course-page/course-stage-step/second-stage-tutorial-card.ts

@@ -7,7 +7,7 @@ export default {
   hasFileDiffCard: isVisible('[data-test-file-diff-card]'),
   hasRevealSolutionButton: isVisible('[data-test-reveal-solution-button]'),
   hasScreencastsLink: isVisible('[data-test-screencasts-link]'),
-  scope: '#second-stage-instructions-card',
+  scope: '#second-stage-tutorial-card',
 
   scrollIntoView() {
     return document.querySelector(this.scope)!.scrollIntoView();

tests/pages/course-page.js

@@ -11,7 +11,7 @@ import Leaderboard from 'codecrafters-frontend/tests/pages/components/course-pag
 import PrivateLeaderboardFeatureSuggestion from 'codecrafters-frontend/tests/pages/components/private-leaderboard-feature-suggestion';
 import RepositoryDropdown from 'codecrafters-frontend/tests/pages/components/course-page/repository-dropdown';
 import RepositorySetupCard from 'codecrafters-frontend/tests/pages/components/course-page/repository-setup-card';
-import SecondStageInstructionsCard from 'codecrafters-frontend/tests/pages/components/course-page/course-stage-step/second-stage-instructions-card';
+import SecondStageTutorialCard from 'codecrafters-frontend/tests/pages/components/course-page/course-stage-step/second-stage-tutorial-card';
 import Sidebar from 'codecrafters-frontend/tests/pages/components/course-page/sidebar';
 import TestResultsBar from 'codecrafters-frontend/tests/pages/components/course-page/test-results-bar';
 import YourTaskCard from 'codecrafters-frontend/tests/pages/components/course-page/course-stage-step/your-task-card';
@@ -200,7 +200,7 @@ export default create({
     scope: '[data-test-progress-banner-modal]',
   },
 
-  secondStageInstructionsCard: SecondStageInstructionsCard,
+  secondStageTutorialCard: SecondStageTutorialCard,
 
   shareProgressModal: {
     clickOnCopyButton: clickable('[data-test-copy-button]'),