Debug a failing test

codecrafters-io · Aug 4, 2024 · 1210122 · 1210122
1 parent ce4c241
commit 1210122
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 25 deletions.
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -2,7 +2,7 @@
 
 {{page-title "CodeCrafters"}}
 
-<div class="application-container min-h-screen {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}">
+<div class="application-container min-h-screen {{if this.darkMode.isEnabled 'dark bg-gray-950' 'bg-gray-50'}}" data-test-application-container>
   {{#if this.layout.shouldShowHeader}}
     <Header />
   {{/if}}

diff --git a/tests/acceptance/demo-page/dark-mode-toggle-test.js b/tests/acceptance/demo-page/dark-mode-toggle-test.js
@@ -5,6 +5,18 @@ import { setupAnimationTest } from 'ember-animated/test-support';
 import demoPage from 'codecrafters-frontend/tests/pages/demo-page';
 import { run } from '@ember/runloop';
 
+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);
   setupAnimationTest(hooks);
@@ -18,25 +30,19 @@ module('Acceptance | demo page | dark-mode-toggle', function (hooks) {
   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');
-    run(() => {
-      this.owner.lookup('service:dark-mode').localStoragePreference = 'system';
-    });
+    setLocalStoragePreference(this.owner.lookup('service:dark-mode'), 'system');
     assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentLocalStoragePreference.text, 'system', "localStorage preference is 'system'");
-    run(() => {
-      this.owner.lookup('service:dark-mode').localStoragePreference = 'dark';
-    });
+    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();
-    run(() => {
-      this.owner.lookup('service:dark-mode').systemPreference = 'light';
-    });
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'light');
     assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentSystemPreference.text, 'light', "system preference is 'light'");
-    run(() => {
-      this.owner.lookup('service:dark-mode').systemPreference = 'dark';
-    });
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'dark');
     assert.strictEqual(demoPage.demoTabs.darkModeToggle.currentSystemPreference.text, 'dark', "system preference is 'dark'");
   });
 
@@ -53,19 +59,31 @@ module('Acceptance | demo page | dark-mode-toggle', function (hooks) {
 
   test("it adds a '.dark' class to '.application-container' when Dark mode is active", async function (assert) {
     await demoPage.demoTabs.darkModeToggle.visit();
-    assert.dom('.application-container').hasNoClass('dark', 'class .dark is absent by default');
+
+    throw new Error(`Application container search: ${document.querySelectorAll('[data-test-application-container]').length}`);
+
+    const parents = [];
+    let parent = document.querySelector('[data-test-current-local-storage-preference]');
+    while(parent) {
+      parents.push(`${parent.tagName} -> ${parent.className}`);
+      parent = parent.parentNode;
+    }
+    throw new Error(`Application container search: ${parents.join('\r\n')}`);
+    assert.notOk(demoPage.demoTabs.darkModeToggle.applicationContainer.hasDarkClass, 'class .dark is absent by default');
     await demoPage.demoTabs.darkModeToggle.component.clickOnLightOption();
-    assert.dom('.application-container').hasNoClass('dark', 'class .dark is absent when Light mode is selected');
+    assert.notOk(demoPage.demoTabs.darkModeToggle.applicationContainer.hasDarkClass, 'class .dark is absent when Light mode is selected');
     await demoPage.demoTabs.darkModeToggle.component.clickOnDarkOption();
-    assert.dom('.application-container').hasClass('dark', 'class .dark is present when Dark mode is selected');
+    assert.ok(demoPage.demoTabs.darkModeToggle.applicationContainer.hasDarkClass, 'class .dark is present when Dark mode is selected');
     await demoPage.demoTabs.darkModeToggle.component.clickOnSystemOption();
-    run(() => {
-      this.owner.lookup('service:dark-mode').systemPreference = 'light';
-    });
-    assert.dom('.application-container').hasNoClass('dark', 'class .dark is absent when System mode is selected & system preference is Light');
-    run(() => {
-      this.owner.lookup('service:dark-mode').systemPreference = 'dark';
-    });
-    assert.dom('.application-container').hasClass('dark', 'class .dark is present when System mode is selected & system preference is Dark');
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'light');
+    assert.notOk(
+      demoPage.demoTabs.darkModeToggle.applicationContainer.hasDarkClass,
+      'class .dark is absent when System mode is selected & system preference is Light',
+    );
+    setSystemPreference(this.owner.lookup('service:dark-mode'), 'dark');
+    assert.ok(
+      demoPage.demoTabs.darkModeToggle.applicationContainer.hasDarkClass,
+      'class .dark is present when System mode is selected & system preference is Dark',
+    );
   });
 });
diff --git a/tests/pages/demo-page.ts b/tests/pages/demo-page.ts
@@ -1,4 +1,4 @@
-import { attribute, clickable, collection, create, text, visitable } from 'ember-cli-page-object';
+import { attribute, clickable, collection, create, hasClass, text, visitable } from 'ember-cli-page-object';
 import CodeMirror from 'codecrafters-frontend/tests/pages/components/code-mirror';
 import DarkModeToggle from 'codecrafters-frontend/tests/pages/components/dark-mode-toggle';
 import FileContentsCard from 'codecrafters-frontend/tests/pages/components/file-contents-card';
@@ -30,6 +30,12 @@ export default create({
       visit: visitable('/demo/dark-mode-toggle'),
       component: DarkModeToggle,
 
+      applicationContainer: {
+        scope: '[data-test-application-container]',
+        resetScope: true,
+        hasDarkClass: hasClass('dark'),
+      },
+
       currentLocalStoragePreference: {
         scope: '[data-test-current-local-storage-preference]',
         text: text(),