Toggle the navbar when changing browser width

2 files changed, 38 insertions, 4 deletions

diff --git a/spec/frontend/__mocks__/match_media_mock.js b/spec/frontend/__mocks__/match_media_mock.js
new file mode 100644
index 00000000..0f2d0192
--- /dev/null
+++ b/spec/frontend/__mocks__/match_media_mock.js
@@ -0,0 +1,15 @@
+/**
+ * Mock matchMedia since it is not available in JSDOM.
+ * https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+ */
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
diff --git a/spec/frontend/default/components/navigation_toggle_spec.js b/spec/frontend/default/components/navigation_toggle_spec.js
index 67dd0338..5eacf0d8 100644
--- a/spec/frontend/default/components/navigation_toggle_spec.js
+++ b/spec/frontend/default/components/navigation_toggle_spec.js
@@ -3,6 +3,7 @@
  */
 
 import { mount } from '@vue/test-utils';
+import '../../__mocks__/match_media_mock';
 import NavigationToggle from '../../../../content/frontend/default/components/navigation_toggle.vue';
 
 describe('component: Navigation Toggle', () => {
@@ -24,10 +25,6 @@ describe('component: Navigation Toggle', () => {
     expect(wrapper.find('.label').text()).toEqual('Collapse sidebar');
   });
 
-  it('renders two arrow icons', () => {
-    expect(wrapper.findAll('.arrow').length).toEqual(2);
-  });
-
   it('toggles the navigation when the navigation toggle is clicked', () => {
     const findMenu = () => document.querySelector(`.${className}`);
     jest.spyOn(findMenu().classList, 'toggle');
@@ -35,4 +32,26 @@ describe('component: Navigation Toggle', () => {
     wrapper.find('.nav-toggle').trigger('click');
     expect(findMenu().classList.toggle).toHaveBeenCalledWith('active');
   });
+
+  it('toggles the navigation when changing breakpoints', () => {
+    // Mock an event of the media query returning negative.
+    // This represents the browser not matching "max-width: 1199px,"
+    // meaning we have rezised up to a large window.
+    wrapper.setData({ width: 500 }); // Mock the starting width.
+    let mockChangeMatchMediaEvent = {
+      matches: false,
+    };
+    // Expect an open menu for large windows.
+    wrapper.vm.responsiveToggle(mockChangeMatchMediaEvent);
+    expect(wrapper.vm.open).toBe(true);
+
+    // Mock resizing down to a small window, where max-width:1199px is true.
+    wrapper.setData({ width: 1200 }); // Mock starting width.
+    mockChangeMatchMediaEvent = {
+      matches: true,
+    };
+    // The menu should be closed.
+    wrapper.vm.responsiveToggle(mockChangeMatchMediaEvent);
+    expect(wrapper.vm.open).toBe(false);
+  });
 });