Use getProperty for hasStyle assertions so testing can be done agains…

…t css variables
mainmatter · Apr 8, 2024 · 749f65f · 749f65f
1 parent 8eee131
commit 749f65f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/packages/qunit-dom/lib/__tests__/has-style.ts b/packages/qunit-dom/lib/__tests__/has-style.ts
@@ -8,7 +8,10 @@ describe('assert.dom(...).hasStyle()', () => {
   beforeEach(() => {
     assert = new TestAssertions();
     document.body.innerHTML =
-      '<div class="foo" style="opacity: 1; width: 200px; text-align: center;">quit-dom ftw!</div>';
+      '<div class="foo" style="opacity: 1; width: 200px; text-align: center; --color-text: #FFF;">quit-dom ftw!</div>';
+
+    //@ts-ignore
+    document.querySelector('.foo').style.setProperty('--color-background', '#333');
   });
 
   test('succeeds for correct content', () => {
@@ -63,6 +66,22 @@ describe('assert.dom(...).hasStyle()', () => {
     ]);
   });
 
+  test('succeeds for custom property', () => {
+    assert.dom('.foo').hasStyle({
+      '--color-text': '#FFF',
+      '--color-background': '#333',
+    });
+
+    expect(assert.results).toEqual([
+      {
+        actual: { '--color-text': '#FFF', '--color-background': '#333' },
+        expected: { '--color-text': '#FFF', '--color-background': '#333' },
+        message: 'Element .foo has style "{"--color-text":"#FFF","--color-background":"#333"}"',
+        result: true,
+      },
+    ]);
+  });
+
   test('fails for wrong content', () => {
     assert.dom('.foo').hasStyle({
       opacity: 0,

diff --git a/packages/qunit-dom/lib/assertions.ts b/packages/qunit-dom/lib/assertions.ts
@@ -774,11 +774,13 @@ export default class DOMAssertions {
     }
 
     let result = expectedProperties.every(
-      property => computedStyle[property] === expected[property]
+      property => computedStyle.getPropertyValue(property.toString()) === expected[property]
     );
     let actual: ActualCSSStyleDeclaration = {};
 
-    expectedProperties.forEach(property => (actual[property] = computedStyle[property]));
+    expectedProperties.forEach(
+      property => (actual[property] = computedStyle.getPropertyValue(property.toString()))
+    );
 
     if (!message) {
       let normalizedSelector = selector ? selector.replace(/^:{0,2}/, '::') : '';