useKResponsiveWindow update fixing resizing behavior in Learn > Library

CHANGELOG.md

@@ -1,4 +1,4 @@
-<!-- 
+<!--
 
 Changelog Guidelines
 
@@ -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]
@@ -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`
@@ -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:** -

lib/tabs/__tests__/KTabsPanel.spec.js

@@ -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');
   });
 });

lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js

@@ -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 = () =>
@@ -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);
@@ -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);
     });
   });
@@ -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);
     });
   });