Made the runtime work with an invalid config

Author: ZeeCoder

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## 1.2.3 (2017-03-03)
+
+- Made the runtime work with an invalid config
+
 ## 1.2.2 (2017-03-02)
 
 - Improved browser support:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeecoder/container-query",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
   "main": "index.js",
   "author": "Viktor Hubert <rpgmorpheus@gmail.com>",

src/runtime/Container.spec.js

@@ -14,9 +14,11 @@ test('appropriate instantiation', () => {
 
     const containerInstance = new Container(containerElement, config);
     containerInstance.adjust();
+    containerInstance.adjust();
+    containerInstance.adjust();
 
     expect(processConfig).toHaveBeenCalledTimes(1);
-    expect(adjustContainer).toHaveBeenCalledTimes(2);
+    expect(adjustContainer).toHaveBeenCalledTimes(4);
     expect(adjustContainer.mock.calls[0][0]).toBe(containerElement);
     expect(adjustContainer.mock.calls[0][1]).toBe(processedConfig);
     expect(adjustContainer.mock.calls[1][0]).toBe(containerElement);

src/runtime/adjustContainer.js

@@ -8,9 +8,14 @@ import applyStylesToElements from "./applyStylesToElements";
  * provided configuration, if criterion are met.
  *
  * @param {HTMLElement} container
- * @param {Object} config
+ * @param {Object} [config] Expects a configuration object that was processed
+ * (and validated) by `processConfig`
  */
-export default function adjustContainer (container, config) {
+export default function adjustContainer (container, config = null) {
+    if (config === null) {
+        return;
+    }
+
     const containerDimensions = getContainerDimensions(container);
     const queriesLength = config.queries.length;
     const changeSets = {};

src/runtime/adjustContainer.spec.js

@@ -4,10 +4,10 @@ import {
     WIDTH_UNIT,
 } from "../constants";
 
+jest.mock('./getContainerDimensions');
+
 const container = {
     style: {},
-    clientWidth: 99,
-    clientHeight: 100,
     querySelectorAll: () => [ containerElement ],
 };
 
@@ -76,9 +76,18 @@ const config = {
     ],
 };
 
+beforeEach(() => {
+    require('./getContainerDimensions').default.mockClear();
+});
+
 test('The container and its elements should be properly adjusted with the defaults', () => {
+    const getContainerDimensionsMock = require('./getContainerDimensions').default.mockImplementation(() => {
+        return { width: 99, height: 100 };
+    });
+
     adjustContainer(container, config);
 
+    expect(getContainerDimensionsMock).toHaveBeenCalledTimes(1);
     expect(container.style).toEqual({
         borderWidth: 'calc(10px + 9.9px)',
     });
@@ -92,10 +101,13 @@ test('The container and its elements should be properly adjusted with the defaul
 
 describe('query styles should be applied, then removed when conditions no longer apply', () => {
     test('Apply query styles with width >= 100', () => {
-        container.clientWidth = 100;
+        const getContainerDimensionsMock = require('./getContainerDimensions').default.mockImplementation(() => {
+            return { width: 100, height: 100 };
+        });
 
         adjustContainer(container, config);
 
+        expect(getContainerDimensionsMock).toHaveBeenCalledTimes(1);
         expect(container.style).toEqual({
             borderWidth: 'calc(20px + 20px)',
         });
@@ -108,10 +120,13 @@ describe('query styles should be applied, then removed when conditions no longer
     });
 
     test('Apply query styles with height >= 200', () => {
-        container.clientHeight = 200;
+        const getContainerDimensionsMock = require('./getContainerDimensions').default.mockImplementation(() => {
+            return { width: 100, height: 200 };
+        });
 
         adjustContainer(container, config);
 
+        expect(getContainerDimensionsMock).toHaveBeenCalledTimes(1);
         expect(container.style).toEqual({
             borderWidth: 'calc(40px + 20px)',
         });
@@ -124,11 +139,13 @@ describe('query styles should be applied, then removed when conditions no longer
     });
 
     test('Remove all query styles, resetting back to the defaults', () => {
-        container.clientWidth = 99;
-        container.clientHeight = 99;
+        const getContainerDimensionsMock = require('./getContainerDimensions').default.mockImplementation(() => {
+            return { width: 99, height: 99 };
+        });
 
         adjustContainer(container, config);
 
+        expect(getContainerDimensionsMock).toHaveBeenCalledTimes(1);
         expect(container.style).toEqual({
             borderWidth: 'calc(9.9px + 9.9px)',
         });
@@ -140,3 +157,11 @@ describe('query styles should be applied, then removed when conditions no longer
         });
     });
 });
+
+test("shouldn't adjust if the configuration is null (invalid)", () => {
+    const getContainerDimensionsMock = require('./getContainerDimensions').default.mockImplementation(() => { console.log('called') });
+
+    adjustContainer(container);
+
+    expect(getContainerDimensionsMock).toHaveBeenCalledTimes(0);
+});

src/runtime/processConfig.js

@@ -8,9 +8,19 @@ import getConditionFunction from './getConditionFunction';
  *
  * @param {Object} origConfig
  *
- * @returns {Object}
+ * @returns {Object|null} Return null for invalid configurations
  */
 export default function processConfig (origConfig) {
+    // Validate configuration before processing
+    if (
+        typeof origConfig !== 'object' ||
+        typeof origConfig.selector !== 'string' ||
+        !Array.isArray(origConfig.queries)
+    ) {
+        return null;
+    }
+
+    // Configuration seems valid, process it
     let config = objectAssign({}, origConfig);
 
     config.queries.forEach((queryData) => {

src/runtime/processConfig.spec.js

@@ -10,11 +10,12 @@ test('should turn conditions to functions', () => {
         .mockImplementationOnce(() => () => 3);
 
     const origConfig = {
+        selector: '.some-container',
         queries: [
             { conditions: [ [ 'orientation', ':', 'landscape' ] ] },
             { conditions: [ [ 'orientation', ':', 'portrait' ] ] },
             { conditions: [ [ 'width', '>', 100 ] ] },
-        ]
+        ],
     };
 
     const processedConfig = processConfig(origConfig);
@@ -31,3 +32,12 @@ test('should turn conditions to functions', () => {
     expect(typeof processedConfig.queries[2].conditionFunction).toBe('function');
     expect(processedConfig.queries[2].conditionFunction()).toBe(3);
 });
+
+test('should return null for invalid configurations', () => {
+    expect(processConfig()).toEqual(null);
+    expect(processConfig({})).toEqual(null);
+    expect(processConfig([])).toEqual(null);
+    expect(processConfig('')).toEqual(null);
+    expect(processConfig(false)).toEqual(null);
+    expect(processConfig(42)).toEqual(null);
+});