Skip to content

Commit

Permalink
Merge pull request #453 from thanksameeelian/side-panel-opening-after…
Browse files Browse the repository at this point in the history 
…-resizing

useKResponsiveWindow update fixing resizing behavior in Learn > Library
  • Loading branch information
@rtibbles
rtibbles authored Oct 2, 2023
2 parents 9ea4bae + a3729f8 commit ab03c5e
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 190 deletions.
15 changes: 12 additions & 3 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!--
<!--
Changelog Guidelines
Expand Down Expand Up @@ -43,6 +43,15 @@ Changelog is rather internal in nature. See release notes for the public overvie

## Version 1.5.x

- [#453]
- **Description:** Fix sidepanel opening in Kolibri Library page after resizing window
- **Products impact:** bugfix
- **Addresses:** https://github.com/learningequality/kolibri/issues/11212
- **Components:** `useKResponsiveWindow` (composable)
- **Breaking:** no
- **Impacts a11y:** no
- **Guidance:** -

<!-- Release notes prepared for all items below -->

- [#449]
Expand Down Expand Up @@ -214,7 +223,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
[#426]: https://github.com/learningequality/kolibri-design-system/pull/426

- [#426]
- **Description:** Fix `KTabsList` focus state
- **Description:** Fix `KTabsList` focus state
- **Products impact:** bugfix
- **Addresses:** -
- **Components:** `KTabsList`, `KTabs`
Expand Down Expand Up @@ -338,7 +347,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
- **Description:** Fix `KDropdownMenu` not showing after its refactor in [#346] by adding missing template tags to `KButton`
- **Products impact:** bugfix
- **Addresses:** https://github.com/learningequality/kolibri/issues/9754
- **Components:** `KDropdownMenu`, `KButton`
- **Components:** `KDropdownMenu`, `KButton`
- **Breaking:** no
- **Impacts a11y:** no
- **Guidance:** -
Expand Down
5 changes: 5 additions & 0 deletions lib/tabs/__tests__/KTabsPanel.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,17 @@ describe(`KTabsPanel`, () => {

// switch to a tab which has no focusable elements
wrapper.setProps({ activeTabId: 'lessonsTab' });

// Need to wait two ticks - initial value change is in response to a watcher on the updated prop,
// and then the value is only updated after the nextTick
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(wrapper.attributes('tabindex')).toBe('0');

// switch to a tab with a focusable element
wrapper.setProps({ activeTabId: 'groupsTab' });
await wrapper.vm.$nextTick();
await wrapper.vm.$nextTick();
expect(wrapper.attributes('tabindex')).toBe('-1');
});
});
130 changes: 59 additions & 71 deletions lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,14 @@ import { defineComponent } from '@vue/composition-api';
import { mount } from '@vue/test-utils';
import useKResponsiveWindow from '..';

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

const TestComponent = () =>
Expand All @@ -28,9 +32,10 @@ describe('useKResponsiveWindow composable', () => {
});
});

it('check if returned properties are initialized on mount', () => {
resizeWindow(1700, 768);
it('check if returned properties are initialized on mount', async () => {
resizeWindow(1700);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowWidth).toEqual(1700);
expect(wrapper.vm.windowHeight).toEqual(768);
expect(wrapper.vm.windowBreakpoint).toEqual(7);
Expand All @@ -44,121 +49,107 @@ describe('useKResponsiveWindow composable', () => {
});

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

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

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

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

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

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

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

it('windowBreakpoint is 7 if width >= 1601px', () => {
setMedia({
width: '1800px',
});
it('windowBreakpoint is 7 if width >= 1601px', async () => {
resizeWindow(1800);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowBreakpoint).toEqual(7);
});
});

describe('check if windowIsSmall is set on width change', () => {
it('windowIsSmall is false if width > 600px', () => {
setMedia({
width: '601px',
});
it('windowIsSmall is false if width > 600px', async () => {
resizeWindow(601);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsSmall).toEqual(false);
});

it('windowIsSmall is true if width <= 600px', () => {
setMedia({
width: '600px',
});
it('windowIsSmall is true if width <= 600px', async () => {
resizeWindow(600);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsSmall).toEqual(true);
});
});

describe('check if windowIsMedium is set on width change', () => {
it('windowIsMedium is false if width <= 600px', () => {
setMedia({
width: '600px',
});
it('windowIsMedium is false if width <= 600px', async () => {
resizeWindow(600);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsMedium).toEqual(false);
});

it('windowIsMedium is true if 600px < width >= 840px', () => {
setMedia({
width: '700px',
});
it('windowIsMedium is true if 600px < width <= 840px', async () => {
resizeWindow(700);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsMedium).toEqual(true);
});
});

describe('check if windowIsLarge is set on width change', () => {
it('windowIsLarge is false if width <= 840px', () => {
setMedia({
width: '840px',
});
it('windowIsLarge is false if width <= 840px', async () => {
resizeWindow(840);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsLarge).toEqual(false);
});

it('windowIsLarge is true if width > 840px', () => {
setMedia({
width: '841px',
});
it('windowIsLarge is true if width > 840px', async () => {
resizeWindow(841);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsLarge).toEqual(true);
});
});
Expand Down Expand Up @@ -191,27 +182,24 @@ describe('useKResponsiveWindow composable', () => {
});

describe('check if windowGutter is set on width change', () => {
it('windowGutter is 16px if windowIsSmall is true(width <= 600px)', () => {
setMedia({
width: '600px',
});
it('windowGutter is 16px if windowIsSmall is true(width <= 600px)', async () => {
resizeWindow(600);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowIsSmall).toEqual(true);
expect(wrapper.vm.windowGutter).toEqual(16);
});
it('windowGutter is 16px if windowBreakpoint < 4(width < 1264px) and smallest dimension(width, height) is smaller than 600px', () => {
setMedia({
width: '500px',
});
it('windowGutter is 16px if windowBreakpoint < 4(width < 1264px) and smallest dimension(width, height) is smaller than 600px', async () => {
resizeWindow(500, 500);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowBreakpoint).toEqual(1);
expect(wrapper.vm.windowGutter).toEqual(16);
});
it('windowGutter is 24px if windowIsSmall is false(width > 600px)', () => {
setMedia({
width: '841px',
});
it('windowGutter is 24px if windowIsSmall is false(width > 600px)', async () => {
resizeWindow(841);
const wrapper = mount(TestComponent());
await wrapper.vm.$nextTick();
expect(wrapper.vm.windowGutter).toEqual(24);
});
});
Expand Down
Loading

0 comments on commit ab03c5e

Please sign in to comment.