From 9a6f0b4fb5fea1988f16f962cef2122df0de7985 Mon Sep 17 00:00:00 2001
From: Daniele Rapisarda <info@danielerapisarda.com>
Date: Tue, 19 Oct 2021 10:21:32 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20HDResponsive=20to=20properly=20r?=
 =?UTF-8?q?un=20on=20SSR=20(#844)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :bug: HDResponsive to use window on mounted

* :camera_flash: snapshot update

* :pencil2: typo

* :white_check_mark: removed not suiting test

* :white_check_mark: fixed tests

* :pencil2: typo and lint
---
 src/components/HdResponsive.vue            |  3 ++-
 tests/unit/components/HdResponsive.spec.js | 14 +++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/HdResponsive.vue b/src/components/HdResponsive.vue
index 5ab26b7bb..6a029860c 100644
--- a/src/components/HdResponsive.vue
+++ b/src/components/HdResponsive.vue
@@ -24,8 +24,9 @@ export default {
       this.setListeners();
     },
   },
-  created() {
+  mounted() {
     this.setListeners();
+    this.$forceUpdate();
   },
   methods: {
     /* istanbul ignore next */
diff --git a/tests/unit/components/HdResponsive.spec.js b/tests/unit/components/HdResponsive.spec.js
index a49d7ff42..2f2a14cc6 100644
--- a/tests/unit/components/HdResponsive.spec.js
+++ b/tests/unit/components/HdResponsive.spec.js
@@ -38,7 +38,7 @@ describe('HdResponsive', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('provides "matches" object as part of a scoped slot', () => {
+  it('provides "matches" object as part of a scoped slot', async () => {
     setBreakpoints(BREAKPOINTS);
 
     const wrapper = wrapperBuilder({
@@ -47,6 +47,8 @@ describe('HdResponsive', () => {
       },
     });
 
+    await wrapper.vm.$nextTick();
+
     expect(wrapper.html()).toMatchSnapshot();
   });
 
@@ -62,7 +64,7 @@ describe('HdResponsive', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('breakpoint changes are managed', () => {
+  it('breakpoints set and change are managed', async () => {
     setBreakpoints(BREAKPOINTS);
 
     const mockedSetListeners = jest.fn();
@@ -77,11 +79,17 @@ describe('HdResponsive', () => {
       },
     });
 
+    // first at the mount...
+    expect(mockedSetListeners).toHaveBeenCalledTimes(1);
+
     const modifiedBreakpoints = BREAKPOINTS;
     delete modifiedBreakpoints.s;
 
     wrapper.setProps({ breakpoints: modifiedBreakpoints });
 
-    expect(mockedSetListeners).toHaveBeenCalled();
+    await wrapper.vm.$nextTick();
+
+    // ...then by the watch
+    expect(mockedSetListeners).toHaveBeenCalledTimes(2);
   });
 });