fix: #346 (#347)

* chore: update window-resize-subject

* fix: #346

package.json

@@ -22,7 +22,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "window-resize-subject": "^1.4.4"
+    "window-resize-subject": "^1.5.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.7",

src/composition-api.ts

@@ -23,7 +23,7 @@ export const createUseWindowSize = (getSubject: () => WindowResizeSubject) => {
 
   return () => {
     if (count === 0) {
-      subject.subscribe();
+      subject.subscribe().dispatch();
     }
     increment();
 

tests/integration/issue-346.spec.ts

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import CompositionComponent from '~fixtures/CompositionComponent';
+import { resizeWindow } from '~fixtures/shared';
+
+// https://github.com/mya-ake/vue-window-size/issues/346
+// Resizing before component mounting was not reflected in the component.
+// This separates the test files because the window size of the first import is important.
+
+jest.useFakeTimers();
+
+it('issue #346', async () => {
+  // resize
+  resizeWindow(400, 300);
+
+  // mount
+  const wrapper = shallowMount(CompositionComponent);
+
+  jest.runAllTimers();
+  await nextTick();
+  expect(wrapper.find('#width').text()).toBe('400');
+  expect(wrapper.find('#height').text()).toBe('300');
+});

tests/unit/composition-api.spec.ts

@@ -7,8 +7,10 @@ const mocks = {
   addObserver: jest.fn(),
   subscribe: jest.fn(),
   unsubscribe: jest.fn(),
+  dispatch: jest.fn(),
 };
 mocks.addObserver.mockReturnValue(mocks);
+mocks.subscribe.mockReturnValue(mocks);
 const createTestComponent = (
   useWindowSize: ReturnType<typeof createUseWindowSize>,
 ) =>
@@ -56,15 +58,17 @@ describe('composition api', () => {
       TestComponent = createTestComponent(useWindowSize);
     });
 
-    it('subscribe is called when mounting the component', () => {
+    it('subscribe and dispatch are called when mounting the component', () => {
       shallowMount(TestComponent);
       expect(mocks.subscribe).toBeCalledTimes(1);
+      expect(mocks.dispatch).toBeCalledTimes(1);
     });
 
-    it('subscribe is called only once when multiple components are mounted', () => {
+    it('subscribe and dispatch are called only once when multiple components are mounted', () => {
       shallowMount(TestComponent);
       shallowMount(TestComponent);
       expect(mocks.subscribe).toBeCalledTimes(1);
+      expect(mocks.dispatch).toBeCalledTimes(1);
     });
 
     it('unsubscribe is called when unmounting the component', () => {

yarn.lock

@@ -6045,10 +6045,10 @@ widest-line@^3.1.0:
   dependencies:
     string-width "^4.0.0"
 
-window-resize-subject@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/window-resize-subject/-/window-resize-subject-1.4.4.tgz#aac718af40e51bfe2bf9673225226688e350426a"
-  integrity sha512-lMlCc1Cl2auVu3QbEY1WwKr7Ed+HuBo68WECAHbg/NemzXFlKZ2JezNEIKiEVDq+ketRIA0aeusBkdu4d4JTCg==
+window-resize-subject@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/window-resize-subject/-/window-resize-subject-1.5.0.tgz#a866128119c3899a8c03cfd1b86decf883e595a4"
+  integrity sha512-r+zXdtumr1+De51Lb3P561K+3t6PvEVXq+dTaEhikNY8Hj0UuzkYL3v9jo5TLpPaL7s9gkaX3Sb643HqYT7uSA==
 
 word-wrap@~1.2.3:
   version "1.2.3"