fix(hasStyle): allow using camelCase properties inside assertion object

mainmatter · Apr 23, 2024 · 7b5892c · 7b5892c
1 parent 056dd10
commit 7b5892c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/qunit-dom/lib/__tests__/has-style.ts b/packages/qunit-dom/lib/__tests__/has-style.ts
@@ -139,4 +139,20 @@ describe('assert.dom(...).hasStyle()', () => {
 
     expect(assert.results.length).toEqual(2);
   });
+
+  test('succeeds for checking styles using camelCase property as argument', () => {
+    assert.dom('.foo').hasStyle({
+      opacity: '1',
+      width: '200px',
+      textAlign: 'center',
+    });
+    expect(assert.results).toEqual([
+      {
+        actual: { opacity: '1', width: '200px', textAlign: 'center' },
+        expected: { opacity: '1', width: '200px', textAlign: 'center' },
+        message: 'Element .foo has style "{"opacity":"1","width":"200px","textAlign":"center"}"',
+        result: true,
+      },
+    ]);
+  });
 });
diff --git a/packages/qunit-dom/lib/assertions.ts b/packages/qunit-dom/lib/assertions.ts
@@ -774,12 +774,16 @@ export default class DOMAssertions {
     }
 
     let result = expectedProperties.every(
-      property => computedStyle.getPropertyValue(property.toString()) === expected[property]
+      property =>
+        (computedStyle.getPropertyValue(property.toString()) || computedStyle[property]) ===
+        expected[property]
     );
     let actual: ActualCSSStyleDeclaration = {};
 
     expectedProperties.forEach(
-      property => (actual[property] = computedStyle.getPropertyValue(property.toString()))
+      property =>
+        (actual[property] =
+          computedStyle.getPropertyValue(property.toString()) || computedStyle[property])
     );
 
     if (!message) {