如何在茉莉花角单元测试中模拟window.screen.width

时间:2018-11-08 09:32:51

标签: angular unit-testing jasmine karma-jasmine chromium

我有一个BreakpointService,它告诉我-根据屏幕宽度-应该在其中显示SidebarMode的SidebarMode(关闭-缩小-打开)。

这是服务的主要部分:

constructor(private breakpointObserver: BreakpointObserver) {
    this.closed$ = this.breakpointObserver.observe(['(min-width: 1024px)']).pipe(
      filter((state: BreakpointState) => !state.matches),
      mapTo(SidebarMode.Closed)
    );

    this.opened$ = this.breakpointObserver.observe(['(min-width: 1366px)']).pipe(
      filter((state: BreakpointState) => state.matches),
      mapTo(SidebarMode.Open)
    );

    const minifiedStart$: Observable<boolean> = this.breakpointObserver.observe(['(min-width: 1024px)']).pipe(map(state => state.matches));

    const minifiedEnd$: Observable<boolean> = this.breakpointObserver.observe(['(max-width: 1366px)']).pipe(map(state => state.matches));

    this.minified$ = minifiedStart$.pipe(
      flatMap(start => minifiedEnd$.pipe(map(end => start && end))),
      distinctUntilChanged(),
      filter(val => val === true),
      mapTo(SidebarMode.Minified)
    );

    this.observer$ = merge(this.closed$, this.minified$, this.opened$);
  }

在这一行中,我可以订阅事件:

this.breakpointService.observe().subscribe();

现在,我想在单元测试中测试不同的模式,但是我不知道

如何在测试中模拟window.screen.width属性

我尝试了几件事,但对我没有任何帮助。

这是我到目前为止的测试设置:

describe('observe()', () => {
    function resize(width: number): void {
      // did not work
      // window.resizeTo(width, window.innerHeight);
      // (<any>window).screen = { width: 700 };
      // spyOn(window, 'screen').and.returnValue(...)
    }

    let currentMode;
    beforeAll(() => {
      service.observe().subscribe(mode => (currentMode = mode));
    });

    it('should return Observable<SidebarMode>', async () => {
      resize(1000);

      expect(Object.values(SidebarMode).includes(SidebarMode[currentMode])).toBeTruthy();
    });

    xit('should return SidebarMode.Closed', async () => {
      resize(600);

      expect(currentMode).toBe(SidebarMode.Closed);
    });

    xit('should return SidebarMode.Minified', async () => {
      resize(1200);

      expect(currentMode).toBe(SidebarMode.Minified);
    });

    xit('should return SidebarMode.Open', async () => {
      resize(2000);

      expect(currentMode).toBe(SidebarMode.Open);
    });
  });

3 个答案:

答案 0 :(得分:2)

我猜BreakPointObserver监听了resize事件,因此也许您可以尝试用茉莉花模拟window.innerWidth / window.outerWidth吗?

spyOnProperty(window, 'innerWidth').and.returnValue(760);

然后您手动触发调整大小事件:

window.dispatchEvent(new Event('resize'));

它看起来像这样:

    it('should mock window inner width', () => {
        spyOnProperty(window, 'innerWidth').and.returnValue(760);
        window.dispatchEvent(new Event('resize'));
    });

答案 1 :(得分:1)

模拟角材料BreakpointObserver

我猜您实际上不是要模拟window.screen,而您实际上是要模拟BreakpointObserver。毕竟,无需测试他们的代码,您只想测试您的代码对BreakpointObserver.observe()返回的具有不同屏幕尺寸的可观察到的内容正确地响应。

有很多不同的方法可以做到这一点。为了说明一种方法,我将STACKBLITZ与您的代码放在一起,显示了如何实现此方法。需要注意的事情与上面的代码不同:

  • 您的代码在构造函数中设置了可观察对象。因此,必须在实例化服务之前更改模拟,因此您将看到对resize()的调用发生在service = TestBed.get(MyService);调用之前。
  • 我用spyObj嘲笑BreakpointObserver,并称其为假货 函数代替BreakpointObserver.observe()方法。这个 虚假函数使用我设置的过滤器并设置了想要的结果 来自各种比赛。他们全都以错误开始,因为 值将根据所需的屏幕尺寸而变化 模拟,并且由您使用的resize()函数设置 在上面的代码中。
  

注意:当然,还有其他方法可以解决此问题。检查角材自己的breakpoints-observer.spec.ts on github。这是比我在这里概述的更好的通用方法,它只是为了测试您提供的功能。

这是新建议的describe函数的StackBlitz中的一个片段:

describe('MyService', () => {
    let service: MyService;
    const matchObj = [ // initially all are false
      { matchStr: '(min-width: 1024px)', result: false },
      { matchStr: '(min-width: 1366px)', result: false },
      { matchStr: '(max-width: 1366px)', result: false }
    ];
    const fakeObserve = (s: string[]): Observable<BreakpointState> => from(matchObj).pipe(
        filter(match => match.matchStr === s[0]),
        map(match => <BreakpointState>{ matches: match.result, breakpoints: {} })
    );
    const bpSpy = jasmine.createSpyObj('BreakpointObserver', ['observe']);
    bpSpy.observe.and.callFake(fakeObserve);
    beforeEach(() => {
        TestBed.configureTestingModule({
            imports: [  ],
            providers: [ MyService, 
            { provide: BreakpointObserver, useValue: bpSpy }
            ]
        });
    });

    it('should be createable', () => {
        service = TestBed.get(MyService);
        expect(service).toBeTruthy();
    });

    describe('observe()', () => {
        function resize(width: number): void {
          matchObj[0].result = (width >= 1024) ? true : false;
          matchObj[1].result = (width >= 1366) ? true : false;
          matchObj[2].result = (width <= 1366) ? true : false;
        }

        it('should return Observable<SidebarMode>', () => {
            resize(1000);
            service = TestBed.get(MyService);
            service.observe().subscribe(mode => {
                expect(Object.values(SidebarMode).includes(SidebarMode[mode])).toBeTruthy();
            });
        });

        it('should return SidebarMode.Closed', () => {
            resize(600);
            service = TestBed.get(MyService);
            service.observe().subscribe(mode => expect(mode).toBe(SidebarMode.Closed));
        });

        it('should return SidebarMode.Minified', () => {
            resize(1200);
            service = TestBed.get(MyService);
            service.observe().subscribe(mode => expect(mode).toBe(SidebarMode.Minified));
        });

        it('should return SidebarMode.Open', () => {
            resize(2000);
            service = TestBed.get(MyService);
            service.observe().subscribe(mode => expect(mode).toBe(SidebarMode.Open));
        });
    });
});

我希望这对您有帮助

答案 2 :(得分:0)

如果查看BreakpointObserver的测试,您会得到答案。您无需模拟BreakpointObserver,而无需模拟注入其中的MediaMatcher。这是我的一项测试。

        let mediaMatcher: FakeMediaMatcher;

        class FakeMediaQueryList {
            /** The callback for change events. */
            private listeners: ((mql: MediaQueryListEvent) => void)[] = [];

            constructor(public matches: boolean, public media: string) {}

            /** Toggles the matches state and "emits" a change event. */
            setMatches(matches: boolean): void {
                this.matches = matches;

                /** Simulate an asynchronous task. */
                setTimeout(() => {
                    // tslint:disable-next-line: no-any
                    this.listeners.forEach((listener) => listener(this as any));
                });
            }

            /** Registers a callback method for change events. */
            addListener(callback: (mql: MediaQueryListEvent) => void): void {
                this.listeners.push(callback);
            }

            /** Removes a callback method from the change events. */
            removeListener(callback: (mql: MediaQueryListEvent) => void): void {
                const index = this.listeners.indexOf(callback);

                if (index > -1) {
                    this.listeners.splice(index, 1);
                }
            }
        }

        @Injectable()
        class FakeMediaMatcher {
            /** A map of match media queries. */
            private queries = new Map<string, FakeMediaQueryList>();

            /** The number of distinct queries created in the media matcher during a test. */
            get queryCount(): number {
                return this.queries.size;
            }

            /** Fakes the match media response to be controlled in tests. */
            matchMedia(query: string): FakeMediaQueryList {
                const mql = new FakeMediaQueryList(true, query);
                this.queries.set(query, mql);
                return mql;
            }

            /** Clears all queries from the map of queries. */
            clear(): void {
                this.queries.clear();
            }

            /** Toggles the matching state of the provided query. */
            setMatchesQuery(query: string, matches: boolean): void {
                const mediaListQuery = this.queries.get(query);
                if (mediaListQuery) {
                    mediaListQuery.setMatches(matches);
                } else {
                    throw Error('This query is not being observed.');
                }
            }
        }

        beforeEach(async () => {
            await TestBed.configureTestingModule({
                providers: [
                    { provide: MediaMatcher, useClass: FakeMediaMatcher },
                ],
            });
        });

        beforeEach(inject([MediaMatcher], (mm: FakeMediaMatcher) => {
            mediaMatcher = mm;
        }));

        afterEach(() => {
            mediaMatcher.clear();
        });

        describe('get isSideNavClosable$', () => {
            beforeEach(() => {
                // (Andrew Alderson Jan 1, 2020) need to do this to register the query
                component.isSideNavClosable$.subscribe();
            });
            it('should emit false when the media query does not match', (done) => {
                mediaMatcher.setMatchesQuery('(max-width: 1280px)', false);

                component.isSideNavClosable$.subscribe((closeable) => {
                    expect(closeable).toBeFalsy();
                    done();
                });
            });
            it('should emit true when the media query does match', (done) => {
                mediaMatcher.setMatchesQuery('(max-width: 1280px)', true);

                component.isSideNavClosable$.subscribe((closeable) => {
                    expect(closeable).toBeTruthy();
                    done();
                });
            });
        });