feat(dom-spectator): add elem query with root opt for DOMSelector (#273)

projects/spectator/src/lib/base/dom-spectator.ts

@@ -46,8 +46,14 @@ export abstract class DomSpectator<I> extends BaseSpectator {
  public query<R>(directive: Type<R>): R | null;
  public query<R>(directiveOrSelector: Type<any> | string, options: { read: Token<R> }): R | null;
  public query<R>(directiveOrSelector: QueryType, options?: QueryOptions<R>): R | Element | null {
- if ((options || {}).root && isString(directiveOrSelector)) {
- return document.querySelector(directiveOrSelector);
+ if ((options || {}).root) {
+ if (isString(directiveOrSelector)) {
+ return document.querySelector(directiveOrSelector);
+ }
+
+ if (directiveOrSelector instanceof DOMSelector) {
+ return directiveOrSelector.execute(document as any)[0] || null;
+ }
  }
 
  return getChildren<R>(this.debugElement)(directiveOrSelector, options)[0] || null;
@@ -57,8 +63,14 @@ export abstract class DomSpectator<I> extends BaseSpectator {
  public queryAll<R>(directive: Type<R>): R[];
  public queryAll<R>(directiveOrSelector: Type<any> | string, options: { read: Token<R> }): R[];
  public queryAll<R>(directiveOrSelector: QueryType, options?: QueryOptions<R>): R[] | Element[] {
- if ((options || {}).root && isString(directiveOrSelector)) {
- return Array.from(document.querySelectorAll(directiveOrSelector));
+ if ((options || {}).root) {
+ if (isString(directiveOrSelector)) {
+ return Array.from(document.querySelectorAll(directiveOrSelector));
+ }
+
+ if (directiveOrSelector instanceof DOMSelector) {
+ return directiveOrSelector.execute(document as any);
+ }
  }
 
  return getChildren<R>(this.debugElement)(directiveOrSelector, options);
@@ -68,10 +80,20 @@ export abstract class DomSpectator<I> extends BaseSpectator {
  public queryLast<R>(directive: Type<R>): R | null;
  public queryLast<R>(directiveOrSelector: Type<any> | string, options: { read: Token<R> }): R | null;
  public queryLast<R>(directiveOrSelector: QueryType, options?: QueryOptions<R>): R | Element | null {
- if ((options || {}).root && isString(directiveOrSelector)) {
- return document.querySelector(directiveOrSelector);
+ let result: (R | Element)[] = [];
+
+ if ((options || {}).root) {
+ if (isString(directiveOrSelector)) {
+ result = Array.from(document.querySelectorAll(directiveOrSelector));
+ }
+
+ if (directiveOrSelector instanceof DOMSelector) {
+ result = directiveOrSelector.execute(document as any);
+ }
+ } else {
+ result = getChildren<R>(this.debugElement)(directiveOrSelector, options);
  }
- const result = getChildren<R>(this.debugElement)(directiveOrSelector, options);
+
  if (result && result.length) {
  return result[result.length - 1];
  }

projects/spectator/test/zippy/zippy.component.spec.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { fakeAsync, tick } from '@angular/core/testing';
-import { createHostFactory, SpectatorWithHost } from '@ngneat/spectator';
+import { fakeAsync } from '@angular/core/testing';
+import { createHostFactory, SpectatorWithHost, byText } from '@ngneat/spectator';
 
 import { QueryService } from '../query.service';
 import { CalcComponent } from '../calc/calc.component';
@@ -191,9 +191,49 @@ describe('With Custom Host Component', () => {
  expect(host.component.updatedAsync).not.toBeFalsy();
  }));
 
- it('should query from root', () => {
+ it('should query from root by string selector', () => {
  host = createHost(`<zippy [title]="title"></zippy>`);
  const head = host.query('head', { root: true });
  expect(head).toBeDefined();
  });
+
+ describe('Queries with "root: true" param', () => {
+ const title = 'Some Zippy page title';
+
+ beforeEach(() => {
+ host = createHost(`<zippy [title]="title"></zippy>`);
+
+ host.component.setPageTitle(title);
+ });
+
+ it('should query from root by title string selector', () => {
+ const titleElement = host.query('title', { root: true });
+ expect((<Element>titleElement).textContent).toBe(title);
+ });
+
+ it('should query from root by DOMSelector selector', () => {
+ const titleElement = host.query(byText(title), { root: true });
+ expect((<Element>titleElement).textContent).toBe(title);
+ });
+
+ it('should query all from root by title string selector', () => {
+ const titleElements = host.queryAll('title', { root: true });
+ expect(titleElements[0].textContent).toBe(title);
+ });
+
+ it('should query all from root by DOMSelector selector', () => {
+ const titleElements = host.queryAll(byText(title), { root: true });
+ expect(titleElements[0].textContent).toBe(title);
+ });
+
+ it('should query last from root by title string selector', () => {
+ const lastTitleElement = host.queryLast('title', { root: true });
+ expect((<Element>lastTitleElement).textContent).toBe(title);
+ });
+
+ it('should query last from root by DOMSelector selector', () => {
+ const lastTitleElement = host.queryLast(byText(title), { root: true });
+ expect((<Element>lastTitleElement).textContent).toBe(title);
+ });
+ });
 });

projects/spectator/test/zippy/zippy.component.ts

@@ -1,4 +1,5 @@
 import { Component, HostListener, Input } from '@angular/core';
+import { Title } from '@angular/platform-browser';
 
 import { QueryService } from '../query.service';
 
@@ -32,7 +33,7 @@ export class ZippyComponent {
  public visible = false;
  public updatedAsync = false;
 
- constructor(private readonly queryService: QueryService) {}
+ constructor(private readonly queryService: QueryService, private titleService: Title) {}
 
  @HostListener('keyup.esc') public onEsc(): void {
  this.toggle();
@@ -47,4 +48,8 @@ export class ZippyComponent {
  this.updatedAsync = true;
  }, 5000);
  }
+
+ public setPageTitle(title: string): void {
+ this.titleService.setTitle(title);
+ }
 }