Skip to content

Commit

Permalink
Improves test descriptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@akolson
akolson committed Oct 14, 2022
1 parent 6dc1d50 commit 94abe9e
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 22 deletions.
1 change: 0 additions & 1 deletion jest.conf/setup.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'mock-match-media/jest-setup.cjs';
import 'regenerator-runtime/runtime';
import '@testing-library/jest-dom';
import * as Aphrodite from 'aphrodite';
Expand Down
101 changes: 80 additions & 21 deletions lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'mock-match-media/jest-setup.cjs';
import { setMedia } from 'mock-match-media';
import { defineComponent } from '@vue/composition-api';
import { mount } from '@vue/test-utils';
Expand All @@ -18,7 +19,7 @@ const TestComponent = () =>
},
});

describe('useKWindowDimensions composable', () => {
describe('useKResponsiveWindow composable', () => {
beforeEach(() => {
setMedia({
width: '1700px',
Expand All @@ -42,24 +43,82 @@ describe('useKWindowDimensions composable', () => {
expect(wrapper.vm.windowIsSmall).toEqual(false);
});

it('check if windowBreakpoint is set on width change', () => {
setMedia({
width: '480px',
describe('check if windowBreakpoint is set on width change', () => {
it('windowBreakpoint is 0 if width <= 480px', () => {
setMedia({
width: '400px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(0);
});

it('windowBreakpoint is 1 if 480px < width <= 600px', () => {
setMedia({
width: '540px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(1);
});

it('windowBreakpoint is 2 if 600px < width <= 840px', () => {
setMedia({
width: '800px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(2);
});

it('windowBreakpoint is 3 if 840px < width <= 944px', () => {
setMedia({
width: '944px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(3);
});

it('windowBreakpoint is 4 if 944px < width <= 1264px', () => {
setMedia({
width: '1264px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(4);
});

it('windowBreakpoint is 5 if 1264px < width <= 1424px', () => {
setMedia({
width: '1424px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(5);
});

it('windowBreakpoint is 6 if 1424px < width <= 1584px', () => {
setMedia({
width: '1584px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(6);
});

it('windowBreakpoint is 7 if width >= 1601px', () => {
setMedia({
width: '1800px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowBreakpoint).toEqual(7);
});
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', () => {
describe('check if windowIsSmall is set on width change', () => {
it('windowIsSmall is false if width > 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', () => {
it('windowIsSmall is true if width <= 600px', () => {
setMedia({
width: '600px',
});
Expand All @@ -68,16 +127,16 @@ describe('useKWindowDimensions composable', () => {
});
});

describe('check if windowIsMedium is set on windowBreakpoint change', () => {
it('windowIsMedium is false if less than or equal to 600px', () => {
describe('check if windowIsMedium is set on width change', () => {
it('windowIsMedium is false if width <= 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', () => {
it('windowIsMedium is true if 600px < width >= 840px', () => {
setMedia({
width: '700px',
});
Expand All @@ -86,16 +145,16 @@ describe('useKWindowDimensions composable', () => {
});
});

describe('check if windowIsLarge is set on windowBreakpoint change', () => {
it('windowIsLarge is false if less than to 840px', () => {
describe('check if windowIsLarge is set on width change', () => {
it('windowIsLarge is false if width <= 840px', () => {
setMedia({
width: '840px',
});
const wrapper = mount(TestComponent());
expect(wrapper.vm.windowIsLarge).toEqual(false);
});

it('windowIsLarge is true if greater than to 840px', () => {
it('windowIsLarge is true if width > 840px', () => {
setMedia({
width: '841px',
});
Expand All @@ -105,15 +164,15 @@ describe('useKWindowDimensions composable', () => {
});

describe('check if windowIsShort is set on height change', () => {
it('windowIsShort is false if greater than 600px', () => {
it('windowIsShort is false if height > 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', () => {
it('windowIsShort is true if height <= 600px', () => {
setMedia({
height: '400px',
});
Expand All @@ -131,24 +190,24 @@ describe('useKWindowDimensions composable', () => {
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', () => {
describe('check if windowGutter is set on width change', () => {
it('windowGutter is 16px if windowIsSmall is true(width <= 600px)', () => {
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', () => {
it('windowGutter is 16px if windowBreakpoint < 4(width < 1264px) 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', () => {
it('windowGutter is 24px if windowIsSmall is false(width > 600px)', () => {
setMedia({
width: '841px',
});
Expand Down

0 comments on commit 94abe9e

Please sign in to comment.