Improve coverage

Author: jorrit

.eslintrc.json

@@ -1,6 +1,9 @@
  {
    "extends": "airbnb",
    "parser": "babel-eslint",
+   "env": {
+     "browser": true
+   },
    "rules": {
      "react/jsx-filename-extension": 0,
      "import/no-extraneous-dependencies": 0

package.json

@@ -15,6 +15,7 @@
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.3.0",
     "gh-pages": "^1.0.0",
+    "match-media-mock": "^0.1.0",
     "nwb": "^0.18.10",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",

src/index.js

@@ -27,8 +27,7 @@ const getClassNameOrStyleProps = (classNameOrStyle, componentState) => {
 };
 
 const inBrowser = typeof window !== 'undefined';
-// eslint-disable-next-line no-undef
-const matchMedia = inBrowser ? window.matchMedia : null;
+const matchMedia = inBrowser && window.matchMedia !== null;
 
 class HyperResponsiveTable extends Component {
   static propTypes = {
@@ -70,17 +69,10 @@ class HyperResponsiveTable extends Component {
   }
 
   componentWillUnmount() {
-    const self = this;
-    this.setState((state) => {
-      if (state.mql) {
-        state.mql.removeListener(self.handleMatch);
-        return {
-          ...state,
-          mql: null,
-        };
-      }
-      return state;
-    });
+    const { mql } = this.state;
+    if (mql) {
+      mql.removeListener(this.handleMatch);
+    }
   }
 
   updateQuery = (props) => {
@@ -89,7 +81,7 @@ class HyperResponsiveTable extends Component {
     let narrow = false;
     const { breakpoint } = props;
     if (matchMedia) {
-      mql = matchMedia(typeof breakpoint === 'string' ? breakpoint : `screen and (min-width: ${breakpoint}px)`);
+      mql = window.matchMedia(typeof breakpoint === 'string' ? breakpoint : `screen and (min-width: ${breakpoint}px)`);
       mql.addListener(this.handleMatch);
       narrow = !mql.matches;
     }

tests/index-test.js

@@ -1,36 +1,42 @@
 import expect from 'expect';
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
+import matchMediaMock from 'match-media-mock';
 
 import Component from '../src/';
 
+const matchMedia = matchMediaMock.create();
+window.matchMedia = matchMedia;
+
+const headers = {
+  a: 'A',
+  b: 'B',
+};
+const rows = [
+  {
+    a: 'A 1',
+    b: 'B 1',
+  },
+  {
+    a: 'A 2',
+    b: 'B 2',
+  },
+];
+const keyGetter = r => r.a;
+
 describe('Component', () => {
   let node;
 
   beforeEach(() => {
+    matchMedia.setConfig({ type: 'screen', width: 1200 });
     node = document.createElement('div');
   });
 
   afterEach(() => {
     unmountComponentAtNode(node);
   });
 
-  it('wide', () => {
-    const headers = {
-      a: 'A',
-      b: 'B',
-    };
-    const rows = [
-      {
-        a: 'A 1',
-        b: 'B 1',
-      },
-      {
-        a: 'A 2',
-        b: 'B 2',
-      },
-    ];
-    const keyGetter = r => r.a;
+  it('low integer breakpoint should give wide styled table', () => {
     const breakpoint = 300;
     const props = { headers, rows, keyGetter, breakpoint };
 
@@ -42,22 +48,7 @@ describe('Component', () => {
     });
   });
 
-  it('narrow', () => {
-    const headers = {
-      a: 'A',
-      b: 'B',
-    };
-    const rows = [
-      {
-        a: 'A 1',
-        b: 'B 1',
-      },
-      {
-        a: 'A 2',
-        b: 'B 2',
-      },
-    ];
-    const keyGetter = r => r.a;
+  it('high integer breakpoint should give narrow styled table', () => {
     const breakpoint = 3000;
     const props = { headers, rows, keyGetter, breakpoint };
 
@@ -68,4 +59,71 @@ describe('Component', () => {
       expect(node.querySelectorAll('tbody').length).toEqual(2);
     });
   });
+
+  it('low media query breakpoint should give wide styled table', () => {
+    const breakpoint = 'screen and (min-width: 1000px)';
+    const props = { headers, rows, keyGetter, breakpoint };
+
+    render(<Component {...props} />, node, () => {
+      expect(node.querySelectorAll('table').length).toEqual(1);
+      expect(node.querySelectorAll('tr').length).toEqual(3);
+      expect(node.querySelectorAll('thead').length).toEqual(1);
+      expect(node.querySelectorAll('tbody').length).toEqual(1);
+    });
+  });
+
+  it('tableStyling function value should give dynamic class when string is returned', () => {
+    const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
+    const props = { headers, rows, keyGetter, tableStyling };
+
+    render(<Component {...props} breakpoint={3000} />, node, () => {
+      expect(node.querySelectorAll('table.narrow').length).toEqual(1);
+      expect(node.querySelectorAll('table.wide').length).toEqual(0);
+      expect(node.querySelector('table').getAttribute('style')).toEqual(null);
+    });
+
+    render(<Component {...props} breakpoint={300} />, node, () => {
+      expect(node.querySelectorAll('table.narrow').length).toEqual(0);
+      expect(node.querySelectorAll('table.wide').length).toEqual(1);
+      expect(node.querySelector('table').getAttribute('style')).toEqual(null);
+    });
+  });
+
+  it('tableStyling object value should give style attribute', () => {
+    const breakpoint = 3000;
+    const tableStyling = { color: 'red' };
+    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+
+    render(<Component {...props} />, node, () => {
+      const table = node.querySelector('table');
+      expect(table.getAttribute('style')).toEqual('color: red;');
+      expect(table.getAttribute('class')).toEqual(null);
+    });
+  });
+
+  it('wide to narrow change should trigger tableStyling function call', () => {
+    const breakpoint = 1000;
+    const tableStyling = opts => (opts.narrow ? 'narrow' : 'wide');
+    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+
+    render(<Component {...props} />, node, () => {
+      const table = node.querySelector('table');
+      expect(table.getAttribute('class')).toEqual('wide');
+
+      matchMedia.setConfig({ type: 'screen', width: 900 });
+      expect(table.getAttribute('class')).toEqual('narrow');
+    });
+  });
+
+  it('invalid tableStyling should give no class or style attribute', () => {
+    const breakpoint = 1000;
+    const tableStyling = 1234;
+    const props = { headers, rows, keyGetter, breakpoint, tableStyling };
+
+    render(<Component {...props} />, node, () => {
+      const table = node.querySelector('table');
+      expect(table.getAttribute('class')).toEqual(null);
+      expect(table.getAttribute('style')).toEqual(null);
+    });
+  });
 });