fix(cdk): respect client size in TUI_WINDOW_SIZE (#6329)

taiga-family · Dec 25, 2023 · 120dd8e · 120dd8e
1 parent 1983340
commit 120dd8e
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 46 deletions.
diff --git a/projects/cdk/tokens/window-size.ts b/projects/cdk/tokens/window-size.ts
@@ -13,8 +13,16 @@ export const TUI_WINDOW_SIZE = new InjectionToken<Observable<ClientRect>>(
             return tuiTypedFromEvent(w, 'resize').pipe(
                 startWith(null),
                 map(() => {
-                    const width = Math.max(w.innerWidth, w.visualViewport?.width || 0);
-                    const height = Math.max(w.innerHeight, w.visualViewport?.height || 0);
+                    const width = Math.max(
+                        w.document.documentElement.clientWidth || 0,
+                        w.innerWidth || 0,
+                        w.visualViewport?.width || 0,
+                    );
+                    const height = Math.max(
+                        w.document.documentElement.clientHeight || 0,
+                        w.innerHeight || 0,
+                        w.visualViewport?.height || 0,
+                    );
 
                     return {
                         width,

diff --git a/projects/core/services/test/breakpoint.service.spec.ts b/projects/core/services/test/breakpoint.service.spec.ts
@@ -1,58 +1,74 @@
 import {TestBed} from '@angular/core/testing';
 import {WINDOW} from '@ng-web-apis/common';
-
-import {TuiMedia} from '../../interfaces';
-import {TUI_MEDIA} from '../../tokens';
-import {TuiBreakpointService} from '../breakpoint.service';
+import {TuiBreakpointService} from '@taiga-ui/core';
+import {first} from 'rxjs/operators';
 
 describe('TuiBreakpointService', () => {
-    const mock: HTMLDivElement = document.createElement('div');
-    let service: TuiBreakpointService;
-    const mediaMock: TuiMedia = {
-        mobile: 768,
-        desktopSmall: 1024,
-        desktopLarge: 1280,
-    };
-
-    const windowMock: any = {
-        matchMedia: jest
-            .fn()
-            .mockReturnValue({...mock, matches: true, media: '(max-width: 767px)'}),
+    const windowMock = {
+        matchMedia: jest.fn().mockReturnValue({
+            ...document.createElement('div'),
+            matches: true,
+            media: '(max-width: 767px)',
+        }),
         innerWidth: 700,
-    };
-
-    beforeEach(async () => {
-        TestBed.configureTestingModule({
-            providers: [
-                TuiBreakpointService,
-                {
-                    provide: TUI_MEDIA,
-                    useValue: mediaMock,
-                },
-                {
-                    provide: WINDOW,
-                    useValue: windowMock,
-                },
-            ],
+    } as unknown as Window;
+
+    let service: TuiBreakpointService;
+
+    describe('<meta name="viewport" content="width=device-width">', () => {
+        beforeEach(async () => {
+            await TestBed.configureTestingModule({
+                providers: [
+                    TuiBreakpointService,
+                    {
+                        provide: WINDOW,
+                        useValue: {
+                            ...windowMock,
+                            document: {documentElement: {clientWidth: 700}},
+                        },
+                    },
+                ],
+            }).compileComponents();
+
+            service = TestBed.inject(TuiBreakpointService);
         });
-        await TestBed.compileComponents();
-        service = TestBed.inject(TuiBreakpointService);
-    });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
+        it('should emit mobile', () => {
+            const observerMock = jest.fn();
 
-    it('should create', () => {
-        expect(service).toBeTruthy();
+            service.pipe(first()).subscribe(observerMock);
+
+            expect(observerMock).toHaveBeenCalledWith('mobile');
+        });
     });
 
-    it('should emit the current breakpoint name when subscribed to', () => {
-        const observerMock = jest.fn();
+    describe('<meta name="viewport" content="width=1024px">', () => {
+        beforeEach(async () => {
+            await TestBed.configureTestingModule({
+                providers: [
+                    TuiBreakpointService,
+                    {
+                        provide: WINDOW,
+                        useValue: {
+                            ...windowMock,
+                            document: {documentElement: {clientWidth: 1024}},
+                        },
+                    },
+                ],
+            }).compileComponents();
 
-        const subscription = service.subscribe(observerMock);
+            service = TestBed.inject(TuiBreakpointService);
+        });
 
-        expect(observerMock).toHaveBeenCalledWith('mobile');
-        subscription.unsubscribe();
+        it('should emit desktopLarge', () => {
+            const observerMock = jest.fn();
+
+            service.pipe(first()).subscribe(observerMock);
+            expect(observerMock).toHaveBeenCalledWith('desktopLarge');
+        });
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
     });
 });