Skip to content

Commit

Permalink
Refactor utils for window resize tests into module.
Browse files Browse the repository at this point in the history 
Update all tests to use window resize test utils.
  • Loading branch information
@rtibbles
rtibbles committed Mar 18, 2024
1 parent 82b2de2 commit e970d51
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 96 deletions.
21 changes: 21 additions & 0 deletions jest.conf/testUtils.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import 'mock-match-media/jest-setup.cjs';
import { setMedia } from 'mock-match-media';

export const resizeWindow = (width, height = 768) => {
window.innerWidth = width;
window.innerHeight = height;
window.dispatchEvent(new Event('resize'));
setMedia({
width: `${width}px`,
height: `${height}px`,
});
};

export const testAfterResize = testFunction => {
let animationFrameId;
const assertAfterResize = () => {
testFunction();
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(assertAfterResize);
};
67 changes: 15 additions & 52 deletions lib/composables/useKResponsiveWindow/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,7 @@ 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 = 768) => {
window.innerWidth = width;
window.innerHeight = height;
window.dispatchEvent(new Event('resize'));
setMedia({
width: `${width}px`,
height: `${height}px`,
});
};
import { resizeWindow, testAfterResize } from '../../../../jest.conf/testUtils';

const TestComponent = () =>
defineComponent({
Expand All @@ -36,7 +27,6 @@ describe('useKResponsiveWindow composable', () => {
resizeWindow(1700);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowProperties = () => {
expect(wrapper.vm.windowWidth).toEqual(1700);
expect(wrapper.vm.windowHeight).toEqual(768);
Expand All @@ -48,106 +38,89 @@ describe('useKResponsiveWindow composable', () => {
expect(wrapper.vm.windowIsLarge).toEqual(true);
expect(wrapper.vm.windowIsMedium).toEqual(false);
expect(wrapper.vm.windowIsSmall).toEqual(false);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowProperties);
testAfterResize(checkWindowProperties);
});

describe('check if windowBreakpoint is set on width change', () => {
it('windowBreakpoint is 0 if width <= 480px', async () => {
resizeWindow(400);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(0);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 1 if 480px < width <= 600px', async () => {
resizeWindow(540);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(1);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 2 if 600px < width <= 840px', async () => {
resizeWindow(800);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(2);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 3 if 840px < width <= 944px', async () => {
resizeWindow(944);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(3);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 4 if 944px < width <= 1264px', async () => {
resizeWindow(1264);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(4);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 5 if 1264px < width <= 1424px', async () => {
resizeWindow(1424);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(5);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 6 if 1424px < width <= 1584px', async () => {
resizeWindow(1584);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(6);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});

it('windowBreakpoint is 7 if width >= 1601px', async () => {
resizeWindow(1800);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowBreakpoint = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(7);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowBreakpoint);
testAfterResize(checkWindowBreakpoint);
});
});

Expand All @@ -156,12 +129,10 @@ describe('useKResponsiveWindow composable', () => {
resizeWindow(601);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowIsSmall = () => {
expect(wrapper.vm.windowIsSmall).toEqual(false);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowIsSmall);
testAfterResize(checkWindowIsSmall);
});

it('windowIsSmall is true if width <= 600px', async () => {
Expand All @@ -184,12 +155,10 @@ describe('useKResponsiveWindow composable', () => {
resizeWindow(700);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowIsMedium = () => {
expect(wrapper.vm.windowIsMedium).toEqual(true);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowIsMedium);
testAfterResize(checkWindowIsMedium);
});
});

Expand All @@ -205,12 +174,10 @@ describe('useKResponsiveWindow composable', () => {
resizeWindow(841);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowIsLarge = () => {
expect(wrapper.vm.windowIsLarge).toEqual(true);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowIsLarge);
testAfterResize(checkWindowIsLarge);
});
});

Expand Down Expand Up @@ -253,24 +220,20 @@ describe('useKResponsiveWindow composable', () => {
resizeWindow(500, 500);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowProperties = () => {
expect(wrapper.vm.windowBreakpoint).toEqual(1);
expect(wrapper.vm.windowGutter).toEqual(16);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowProperties);
testAfterResize(checkWindowProperties);
});
it('windowGutter is 24px if windowIsSmall is false(width > 600px)', async () => {
resizeWindow(841);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
let animationFrameId;
const checkWindowGutter = () => {
expect(wrapper.vm.windowGutter).toEqual(24);
animationFrameId = cancelAnimationFrame(animationFrameId);
};
animationFrameId = requestAnimationFrame(checkWindowGutter);
testAfterResize(checkWindowGutter);
});
});
});
14 changes: 9 additions & 5 deletions lib/grids/test/KFixedGrid.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { shallowMount } from '@vue/test-utils';
import KFixedGrid from '../KFixedGrid';
import { resizeWindow, testAfterResize } from '../../../jest.conf/testUtils';

function makeWrapper(options) {
return shallowMount(KFixedGrid, options);
Expand Down Expand Up @@ -39,13 +40,16 @@ describe('KFixedGrid component', () => {
'%d x %d (%s) windows should have gutter size %d and %dpx margins',
async (...args) => {
const [width, height, , gutter, margins] = args;
resizeWindow(width, height);
const wrapper = makeWrapper({ propsData: {} });
wrapper.vm._updateWindow({ width, height });
await wrapper.vm.$nextTick();
expect(wrapper.vm.actualGutterSize).toEqual(gutter);
if (margins) {
assertMarginSize(wrapper, margins);
}
const checkGutterProperties = () => {
expect(wrapper.vm.actualGutterSize).toEqual(gutter);
if (margins) {
assertMarginSize(wrapper, margins);
}
};
testAfterResize(checkGutterProperties);
}
);

Expand Down
8 changes: 6 additions & 2 deletions lib/grids/test/KFixedGridItem.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { shallowMount } from '@vue/test-utils';
import { resizeWindow, testAfterResize } from '../../../jest.conf/testUtils';
import KFixedGridItem from '../KFixedGridItem';
import allowableUnits from './units';
import { makeWrapperSmall, makeWrapperMedium, makeWrapperLarge } from './wrapper';
Expand Down Expand Up @@ -48,7 +49,10 @@ describe('KFixedGridItem component', () => {

it('should handle text-based span', () => {
const wrapper = makeWrapperMedium(KFixedGridItem, { span: '4' });
wrapper.vm._updateWindow({ width: 700, height: 700 });
expect(wrapper.classes()[1]).toEqual('pure-u-12-24');
resizeWindow(700, 700);
const checkSpan = () => {
expect(wrapper.classes()[1]).toEqual('pure-u-4-24');
};
testAfterResize(checkSpan);
});
});
52 changes: 31 additions & 21 deletions lib/grids/test/KGrid.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { shallowMount } from '@vue/test-utils';
import { resizeWindow, testAfterResize } from '../../../jest.conf/testUtils';
import KGrid from '../KGrid';

function makeWrapper(options) {
Expand All @@ -8,35 +9,44 @@ function makeWrapper(options) {
describe('KGrid component', () => {
it('grid should have 4 columns on small screens', async () => {
const wrapper = makeWrapper({ propsData: {} });
wrapper.vm._updateWindow({ width: 400, height: 400 });
resizeWindow(400, 400);
await wrapper.vm.$nextTick();
expect(wrapper.vm).toMatchObject({
windowIsSmall: true,
windowIsMedium: false,
windowIsLarge: false,
windowGridColumns: 4,
});
const checkGridColumns = () => {
expect(wrapper.vm).toMatchObject({
windowIsSmall: true,
windowIsMedium: false,
windowIsLarge: false,
windowGridColumns: 4,
});
};
testAfterResize(checkGridColumns);
});
it('grid should have 8 columns on medium screens', async () => {
const wrapper = makeWrapper({ propsData: {} });
wrapper.vm._updateWindow({ width: 700, height: 700 });
resizeWindow(700, 700);
await wrapper.vm.$nextTick();
expect(wrapper.vm).toMatchObject({
windowIsSmall: false,
windowIsMedium: true,
windowIsLarge: false,
windowGridColumns: 8,
});
const checkGridColumns = () => {
expect(wrapper.vm).toMatchObject({
windowIsSmall: false,
windowIsMedium: true,
windowIsLarge: false,
windowGridColumns: 8,
});
};
testAfterResize(checkGridColumns);
});
it('grid should have 12 columns on large screens', async () => {
const wrapper = makeWrapper({ propsData: {} });
wrapper.vm._updateWindow({ width: 900, height: 900 });
resizeWindow(900, 900);
await wrapper.vm.$nextTick();
expect(wrapper.vm).toMatchObject({
windowIsSmall: false,
windowIsMedium: false,
windowIsLarge: true,
windowGridColumns: 12,
});
const checkGridColumns = () => {
expect(wrapper.vm).toMatchObject({
windowIsSmall: false,
windowIsMedium: false,
windowIsLarge: true,
windowGridColumns: 12,
});
};
testAfterResize(checkGridColumns);
});
});
Loading

0 comments on commit e970d51

Please sign in to comment.