test fixes

Author: ZeeCoder

package.json

@@ -24,8 +24,8 @@
   },
   "scripts": {
     "test": "jest --coverage && lerna run test",
+    "test:watch": "jest --watch",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "watch:test": "jest --watch",
     "pretest": "lerna run flow",
     "prettify": "prettier --write 'packages/**/*.js'",
     "bootstrap": "lerna bootstrap"

packages/container-query/src/adjustContainer.js

@@ -72,6 +72,7 @@ export default function adjustContainer(
 
     // Normalise to a single changeSet that can be applied by applyStylesToElements
     const changeSet = changedStyles[selector].addStyle || {};
+
     if (Array.isArray(changedStyles[selector].removeProps)) {
       changedStyles[selector].removeProps.forEach(prop => {
         changeSet[prop] = "";

packages/container-query/src/adjustContainer.spec.js

@@ -1,25 +1,24 @@
 import adjustContainer from "./adjustContainer";
 import containerRegistry from "./containerRegistry";
 import { SELECTOR, QUERIES } from "@zeecoder/container-query-meta-builder";
+import getContainerSize from "./getContainerSize";
+import getChangedStyles from "./getChangedStyles";
 
 jest.mock("./getChangedStyles");
 jest.mock("./getContainerSize");
 
 beforeEach(() => {
-  require("./getChangedStyles").default.mockClear();
-  require("./getContainerSize").default.mockClear();
+  getChangedStyles.mockClear();
+  getContainerSize.mockClear();
 });
 
 test("should ignore call if the element is not registered", () => {
-  const getContainerSize = require("./getContainerSize").default;
   const containerElement = document.createElement("div");
   adjustContainer(containerElement);
   expect(getContainerSize).toHaveBeenCalledTimes(0);
 });
 
 test("should be able to get the container size itself, and ignore empty change sets", () => {
-  const getChangedStyles = require("./getChangedStyles").default;
-  const getContainerSize = require("./getContainerSize").default;
   const containerElement = document.createElement("div");
   const containerSize = { width: 1, height: 2 };
   getContainerSize.mockImplementationOnce(() => containerSize);
@@ -46,8 +45,6 @@ test("should be able to get the container size itself, and ignore empty change s
 });
 
 test("should apply changed styles", () => {
-  const getChangedStyles = require("./getChangedStyles").default;
-  const getContainerSize = require("./getContainerSize").default;
   const containerElement = document.createElement("div");
   const containerChildElement1 = document.createElement("div");
   const containerChildElement2 = document.createElement("div");
@@ -101,8 +98,6 @@ test("should apply changed styles", () => {
 });
 
 test("should respect container boundaries while applying styles", () => {
-  const getChangedStyles = require("./getChangedStyles").default;
-  const getContainerSize = require("./getContainerSize").default;
   const container1 = document.createElement("div");
   const container2 = document.createElement("div");
   const container1Descendant1 = document.createElement("div");

packages/container-query/src/applyStylesToElements.js

@@ -7,7 +7,8 @@ export default function applyStylesToElements(styles, elements) {
 
   for (let i = 0; i < elementsLength; i++) {
     for (let prop in styles) {
-      elements[i].style.setProperty(prop, styles[prop]);
+      elements[i].style[prop] = styles[prop];
+      // Equivalent to setProperty, see: https://devdocs.io/dom/cssstyledeclaration/setproperty
     }
   }
 }

packages/container-query/src/applyStylesToElements.spec.js

@@ -2,14 +2,10 @@ import applyStylesToElements from "./applyStylesToElements";
 
 test("should apply all declarations to all the elements", () => {
   const element1 = {
-    style: {
-      setProperty: jest.fn()
-    }
+    style: {}
   };
   const element2 = {
-    style: {
-      setProperty: jest.fn()
-    }
+    style: {}
   };
 
   const elements = [element1, element2];
@@ -21,17 +17,6 @@ test("should apply all declarations to all the elements", () => {
 
   applyStylesToElements(style, elements);
 
-  expect(element1.style.setProperty).toHaveBeenCalledTimes(2);
-  expect(element1.style.setProperty).toHaveBeenCalledWith("font-size", "42px");
-  expect(element1.style.setProperty).toHaveBeenCalledWith(
-    "line-height",
-    "50px"
-  );
-
-  expect(element2.style.setProperty).toHaveBeenCalledTimes(2);
-  expect(element2.style.setProperty).toHaveBeenCalledWith("font-size", "42px");
-  expect(element2.style.setProperty).toHaveBeenCalledWith(
-    "line-height",
-    "50px"
-  );
+  expect(element1.style).toEqual(style);
+  expect(element2.style).toEqual(style);
 });