Merge pull request #1977 from codecrafters-io/add-demo-route-tests

Add tests for Demo route and components on it

app/components/file-contents-card.hbs

@@ -1,5 +1,6 @@
 <div
   class="bg-white dark:bg-gray-900 shadow-sm rounded border border-gray-300 dark:border-gray-800"
+  data-test-file-contents-card-component
   ...attributes
   {{did-insert this.handleDidInsertContainer}}
 >
@@ -21,11 +22,14 @@
     {{/if}}
 
     {{#if @isCollapsible}}
-      <div class="absolute inset-0 flex items-center justify-center group-hover/file-contents-card-header:opacity-100 opacity-0 transition-opacity">
+      <div
+        class="absolute inset-0 flex items-center justify-center group-hover/file-contents-card-header:opacity-100 opacity-0 transition-opacity"
+        data-test-file-contents-card-header-hover-target
+      >
         {{#if @isCollapsed}}
-          <Pill @color="white">Click to expand</Pill>
+          <Pill @color="white" data-test-file-contents-card-header-expand-button>Click to expand</Pill>
         {{else}}
-          <Pill @color="white">Click to collapse</Pill>
+          <Pill @color="white" data-test-file-contents-card-header-collapse-button>Click to collapse</Pill>
         {{/if}}
       </div>
 
@@ -59,7 +63,7 @@
 
     {{#if @isCollapsible}}
       <div class="flex items-center justify-center my-3">
-        <TertiaryButton @size="small" {{on "click" this.handleCollapseOrExpandButtonClick}}>
+        <TertiaryButton @size="small" data-test-file-contents-card-collapse-button {{on "click" this.handleCollapseOrExpandButtonClick}}>
           Collapse File
         </TertiaryButton>
       </div>

app/templates/application.hbs

@@ -2,7 +2,7 @@
 
 {{page-title "CodeCrafters"}}
 
-<div class="min-h-screen {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}" id="application-container">
+<div class="min-h-screen {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}" id="application-container" data-test-application-container>
   {{#if this.layout.shouldShowHeader}}
     <Header />
   {{/if}}

app/templates/demo.hbs

@@ -8,7 +8,7 @@
       Demo zone for complex components.
     </p>
 
-    <div class="flex mb-8 border-b overflow-x-auto dark:border-gray-700">
+    <div class="flex mb-8 border-b overflow-x-auto dark:border-gray-700" data-test-demo-tab-switcher>
       <LinkTo
         @route="demo.code-mirror"
         role="button"

app/templates/demo/dark-mode-toggle.hbs

@@ -2,21 +2,23 @@
 
 <h3 class="mb-2 dark:text-gray-300">Set localStorage dark mode preference to:</h3>
 
-<DarkModeToggle />
+<div class="inline-flex">
+  <DarkModeToggle />
+</div>
 
 <hr class="my-4 dark:border-gray-700" />
 
 <h3 class="mb-2 dark:text-gray-300">Current localStorage preference:</h3>
 
-<code class="code dark:text-gray-400">
+<code class="code dark:text-gray-400" data-test-current-local-storage-preference>
   {{or this.darkMode.localStoragePreference "null"}}
 </code>
 
 <hr class="my-4 dark:border-gray-700" />
 
 <h3 class="mb-2 dark:text-gray-300">Current system preference:</h3>
 
-<code class="code dark:text-gray-400">
+<code class="code dark:text-gray-400" data-test-current-system-preference>
   {{this.darkMode.systemPreference}}
 </code>
 

tests/acceptance/course-page/view-code-examples-test.js

@@ -173,6 +173,36 @@ module('Acceptance | course-page | view-code-examples', function (hooks) {
     assert.strictEqual(coursePage.codeExamplesTab.solutionCards.length, 2);
   });
 
+  test('can view unchanged files in code examples', async function (assert) {
+    testScenario(this.server);
+    signIn(this.owner, this.server);
+
+    let redis = this.server.schema.courses.findBy({ slug: 'redis' });
+    let python = this.server.schema.languages.findBy({ slug: 'python' });
+
+    createCommunityCourseStageSolution(this.server, redis, 2, python);
+
+    await catalogPage.visit();
+    await catalogPage.clickOnCourse('Build your own Redis');
+    await courseOverviewPage.clickOnStartCourse();
+    await coursePage.sidebar.clickOnStepListItem('Respond to PING');
+    await coursePage.yourTaskCard.clickOnActionButton('Code Examples');
+    await coursePage.previousStepsIncompleteModal.clickOnJustExploringButton();
+
+    assert.strictEqual(coursePage.codeExamplesTab.solutionCards[0].changedFiles.length, 2, 'shows 2 changed files');
+    assert.strictEqual(coursePage.codeExamplesTab.solutionCards[0].unchangedFiles.length, 2, 'shows 2 unchanged files');
+
+    await coursePage.codeExamplesTab.solutionCards[0].unchangedFiles[0].header.click();
+
+    assert.true(coursePage.codeExamplesTab.solutionCards[0].unchangedFiles[0].isPresent, 'FileContentsCard is present');
+    assert.true(coursePage.codeExamplesTab.solutionCards[0].unchangedFiles[0].codeMirror.hasRendered, 'CodeMirror has rendered');
+    assert.strictEqual(
+      coursePage.codeExamplesTab.solutionCards[0].unchangedFiles[0].codeMirror.text,
+      'Unchanged file content',
+      'file content is rendered correctly',
+    );
+  });
+
   test('stage incomplete modal shows up when code examples are viewed before completing a stage', async function (assert) {
     testScenario(this.server);
     signIn(this.owner, this.server);

tests/acceptance/demo-page-test.js

@@ -0,0 +1,23 @@
+import { module, test } from 'qunit';
+import { currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import demoPage from 'codecrafters-frontend/tests/pages/demo-page';
+
+module('Acceptance | demo page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('it works', async function (assert) {
+    await demoPage.visit();
+    assert.strictEqual(currentURL(), '/demo/code-mirror');
+    assert.ok(demoPage.demoTabs.codeMirror.isVisible, 'CodeMirror tab is active by default');
+
+    await demoPage.tabSwitcher.clickOnTab('DarkModeToggle');
+    assert.ok(demoPage.demoTabs.darkModeToggle.component.isVisible, 'DarkModeToggle tab is visible');
+
+    await demoPage.tabSwitcher.clickOnTab('FileContentsCard');
+    assert.ok(demoPage.demoTabs.fileContentsCard.component.isVisible, 'FileContentsCard tab is visible');
+
+    await demoPage.tabSwitcher.clickOnTab('CodeMirror');
+    assert.ok(demoPage.demoTabs.codeMirror.component.isVisible, 'CodeMirror tab is visible');
+  });
+});

tests/acceptance/demo-page/code-mirror-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import demoPage from 'codecrafters-frontend/tests/pages/demo-page';
+
+module('Acceptance | demo page | code-mirror', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('it works', async function (assert) {
+    await demoPage.demoTabs.codeMirror.visit();
+    assert.strictEqual(currentURL(), '/demo/code-mirror', 'URL is correct');
+    assert.ok(demoPage.demoTabs.codeMirror.component.hasRendered, 'component has rendered');
+  });
+});

tests/acceptance/demo-page/dark-mode-toggle-test.js

@@ -0,0 +1,72 @@
+import { module, test } from 'qunit';
+import { currentURL } from '@ember/test-helpers';
+import { run } from '@ember/runloop';
+import { setupApplicationTest } from 'codecrafters-frontend/tests/helpers';
+import applicationPage from 'codecrafters-frontend/tests/pages/application-page';
+import demoPage from 'codecrafters-frontend/tests/pages/demo-page';
+
+function setLocalStoragePreference(darkModeService, preference) {
+  run(() => {
+    darkModeService.localStoragePreference = preference;
+  });
+}
+
+function setSystemPreference(darkModeService, preference) {
+  run(() => {
+    darkModeService.systemPreference = preference;
+  });
+}
+
+module('Acceptance | demo page | dark-mode-toggle', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('it works', async function (assert) {
+    await demoPage.demoTabs.darkModeToggle.visit();
+    assert.strictEqual(currentURL(), '/demo/dark-mode-toggle', 'URL is correct');
+    assert.ok(demoPage.demoTabs.darkModeToggle.component.isVisible, 'component has rendered');
+  });
+
+  test('it shows current localStorage preference', async function (assert) {
+    await demoPage.demoTabs.darkModeToggle.visit();
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'null', 'localStorage preference is null by default');
+    setLocalStoragePreference(this.owner.lookup('service:dark-mode'), 'system');
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'system', "localStorage preference is 'system'");
+    setLocalStoragePreference(this.owner.lookup('service:dark-mode'), 'dark');
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'dark', "localStorage preference is 'dark'");
+    setLocalStoragePreference(this.owner.lookup('service:dark-mode'), 'light');
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'light', "localStorage preference is 'light'");
+  });
+
+  test('it shows current system preference', async function (assert) {
+    await demoPage.demoTabs.darkModeToggle.visit();
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'light');
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentSystemPreference.text, 'light', "system preference is 'light'");
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'dark');
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentSystemPreference.text, 'dark', "system preference is 'dark'");
+  });
+
+  test('it updates localStorage preference after clicking on mode-switching buttons', async function (assert) {
+    await demoPage.demoTabs.darkModeToggle.visit();
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'null', 'localStorage preference is null by default');
+    await demoPage.demoTabs.darkModeToggle.component.clickOnSystemOption();
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'system', "localStorage preference is 'system'");
+    await demoPage.demoTabs.darkModeToggle.component.clickOnDarkOption();
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'dark', "localStorage preference is 'dark'");
+    await demoPage.demoTabs.darkModeToggle.component.clickOnLightOption();
+    assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'light', "localStorage preference is 'light'");
+  });
+
+  test("it adds a '.dark' class to application container when Dark mode is active", async function (assert) {
+    await demoPage.demoTabs.darkModeToggle.visit();
+    assert.notOk(applicationPage.hasDarkClass, 'class .dark is absent by default');
+    await demoPage.demoTabs.darkModeToggle.component.clickOnLightOption();
+    assert.notOk(applicationPage.hasDarkClass, 'class .dark is absent when Light mode is selected');
+    await demoPage.demoTabs.darkModeToggle.component.clickOnDarkOption();
+    assert.ok(applicationPage.hasDarkClass, 'class .dark is present when Dark mode is selected');
+    await demoPage.demoTabs.darkModeToggle.component.clickOnSystemOption();
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'light');
+    assert.notOk(applicationPage.hasDarkClass, 'class .dark is absent when System mode is selected & system preference is Light');
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'dark');
+    assert.ok(applicationPage.hasDarkClass, 'class .dark is present when System mode is selected & system preference is Dark');
+  });
+});