Adds tests to useKWindowDimensions and useKResponsiveWindow

jest.conf/setup.js

@@ -1,3 +1,4 @@
+import 'mock-match-media/jest-setup.cjs';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
 import * as Aphrodite from 'aphrodite';

lib/__tests__/useKWindowDimensions.spec.js

@@ -0,0 +1,37 @@
+import { defineComponent } from '@vue/composition-api';
+import { mount } from '@vue/test-utils';
+import useKWindowDimensions from '../useKWindowDimensions';
+
+const resizeWindow = (width, height) => {
+  window.innerWidth = width;
+  window.innerHeight = height;
+  window.dispatchEvent(new Event('resize'));
+};
+
+describe('useKWindowDimensions composable', () => {
+  let TestComponent;
+  beforeAll(() => {
+    TestComponent = defineComponent({
+      setup() {
+        return {
+          ...useKWindowDimensions(),
+        };
+      },
+    });
+  });
+
+  it('check if windowWidth and windowHeight properties are initialized on mount', () => {
+    const wrapper = mount(TestComponent);
+    expect(wrapper.vm.windowWidth).toEqual(expect.any(Number));
+    expect(wrapper.vm.windowHeight).toEqual(expect.any(Number));
+  });
+
+  it('check if windowWidth and windowHeight change when window is resized', () => {
+    const wrapper = mount(TestComponent);
+    expect(wrapper.vm.windowWidth).not.toEqual(600);
+    expect(wrapper.vm.windowHeight).not.toEqual(400);
+    resizeWindow(600, 400);
+    expect(wrapper.vm.windowWidth).toEqual(600);
+    expect(wrapper.vm.windowHeight).toEqual(400);
+  });
+});

lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js

@@ -0,0 +1,159 @@
+import { setMedia } from 'mock-match-media';
+import { defineComponent } from '@vue/composition-api';
+import { mount } from '@vue/test-utils';
+import useKResponsiveWindow from '..';
+
+const resizeWindow = (width, height) => {
+  window.innerWidth = width;
+  window.innerHeight = height;
+  window.dispatchEvent(new Event('resize'));
+};
+
+const TestComponent = () =>
+  defineComponent({
+    setup() {
+      return {
+        ...useKResponsiveWindow(),
+      };
+    },
+  });
+
+describe('useKWindowDimensions composable', () => {
+  beforeEach(() => {
+    setMedia({
+      width: '1700px',
+      type: 'screen',
+      orientation: 'landscape',
+    });
+  });
+
+  it('check if returned properties are initialized on mount', () => {
+    resizeWindow(1700, 768);
+    const wrapper = mount(TestComponent());
+    expect(wrapper.vm.windowWidth).toEqual(1700);
+    expect(wrapper.vm.windowHeight).toEqual(768);
+    expect(wrapper.vm.windowBreakpoint).toEqual(7);
+    expect(wrapper.vm.windowIsPortrait).toEqual(false);
+    expect(wrapper.vm.windowIsLandscape).toEqual(true);
+    expect(wrapper.vm.windowGutter).toEqual(24);
+    expect(wrapper.vm.windowIsShort).toEqual(false);
+    expect(wrapper.vm.windowIsLarge).toEqual(true);
+    expect(wrapper.vm.windowIsMedium).toEqual(false);
+    expect(wrapper.vm.windowIsSmall).toEqual(false);
+  });
+
+  it('check if windowBreakpoint is set on width change', () => {
+    setMedia({
+      width: '480px',
+    });
+    const wrapper = mount(TestComponent());
+    expect(wrapper.vm.windowBreakpoint).toEqual(0);
+  });
+
+  describe('check if windowIsSmall is set on windowBreakpoint change', () => {
+    it('windowIsSmall is false if greater than 600px', () => {
+      setMedia({
+        width: '601px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsSmall).toEqual(false);
+    });
+
+    it('windowIsSmall is true if less than or equal to 600px', () => {
+      setMedia({
+        width: '600px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsSmall).toEqual(true);
+    });
+  });
+
+  describe('check if windowIsMedium is set on windowBreakpoint change', () => {
+    it('windowIsMedium is false if less than  or equal to 600px', () => {
+      setMedia({
+        width: '600px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsMedium).toEqual(false);
+    });
+
+    it('windowIsMedium is true if greater than 600px and less than or equal to 840px', () => {
+      setMedia({
+        width: '700px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsMedium).toEqual(true);
+    });
+  });
+
+  describe('check if windowIsLarge is set on windowBreakpoint change', () => {
+    it('windowIsLarge is false if less than to 840px', () => {
+      setMedia({
+        width: '840px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsLarge).toEqual(false);
+    });
+
+    it('windowIsLarge is true if greater than to 840px', () => {
+      setMedia({
+        width: '841px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsLarge).toEqual(true);
+    });
+  });
+
+  describe('check if windowIsShort is set on height change', () => {
+    it('windowIsShort is false if greater than 600px', () => {
+      setMedia({
+        height: '601px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsShort).toEqual(false);
+    });
+
+    it('windowIsShort is true if less than or equal to  600px', () => {
+      setMedia({
+        height: '400px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsShort).toEqual(true);
+    });
+  });
+
+  it('check if windowIsPortrait and windowIsLandscape is set on orientation change', () => {
+    setMedia({
+      orientation: 'portrait',
+    });
+    const wrapper = mount(TestComponent());
+    expect(wrapper.vm.windowIsPortrait).toEqual(true);
+    expect(wrapper.vm.windowIsLandscape).toEqual(false);
+  });
+
+  describe('check if windowGutter is set on windowBreakpoint and windowIsSmall change', () => {
+    it('windowGutter is 16px if windowIsSmall is true', () => {
+      setMedia({
+        width: '600px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowIsSmall).toEqual(true);
+      expect(wrapper.vm.windowGutter).toEqual(16);
+    });
+    it('windowGutter is 16px if windowBreakpoint < 4 and smallest dimension(width, height) is smaller than 600px', () => {
+      setMedia({
+        width: '500px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowBreakpoint).toEqual(1);
+      expect(wrapper.vm.windowGutter).toEqual(16);
+    });
+    it('windowGutter is 24px if windowIsSmall is false, windowBreakpoint > 4 and smallest dimension(width, height) > 600px', () => {
+      setMedia({
+        width: '841px',
+      });
+      const wrapper = mount(TestComponent());
+      expect(wrapper.vm.windowGutter).toEqual(24);
+    });
+  });
+});

package.json

@@ -49,6 +49,7 @@
     "kolibri-tools": "0.15.0-dev.4",
     "lockr": "^0.8.4",
     "material-design-icons": "^3.0.1",
+    "mock-match-media": "^0.3.0",
     "normalize.css": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "nuxt": "2.11.0",

yarn.lock

@@ -4512,6 +4512,11 @@ [email protected], [email protected], css-loader@^3.3.2:
     schema-utils "^2.7.0"
     semver "^6.3.0"
 
+css-mediaquery@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
+  integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
+
 css-modules-loader-core@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
@@ -9956,6 +9961,13 @@ mixin-deep@^1.2.0:
   dependencies:
     minimist "^1.2.5"
 
+mock-match-media@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/mock-match-media/-/mock-match-media-0.3.0.tgz#1fff5e70edaa0a37e7f2b5f1e75fe77aec79a09e"
+  integrity sha512-fT0MDsCcTSITZMyz9w7kU/tFJ/Lmrcrr6EVHS9cfcog46202YKGlpmBAXKzr25XpqMfTyufZJHwMFp+B4IfknQ==
+  dependencies:
+    css-mediaquery "^0.1.2"
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"