fix: fix query regression and unit testing improvements

angular.json

@@ -162,6 +162,19 @@
  "**/node_modules/**"
  ]
  }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.spec.json",
+ "karmaConfig": "src/karma.conf.js",
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": []
+ }
  }
  }
  }

package.json

@@ -6,9 +6,8 @@
  "ng": "npx ng",
  "start": "npx ng serve",
  "build": "npx ng build",
- "test": "npx ng test",
+ "test": "npx ng test spectator",
  "test:jest": "npx ng run spectator-app:test-jest",
- "test:jest:watch": "npx ng run spectator-app:test-jest --watch",
  "lint": "npx ng lint",
  "e2e": "npx ng e2e",
  "format": "npx prettier --write \"{projects,src}/**/*.ts\"",

projects/spectator/src/lib/globals.ts

@@ -1,7 +1,17 @@
+/**
+ * @deprecated Deprecated in favour of Spectator query methods and Spectator custom matchers
+ *
+ * To be removed in v4
+ */
 export function query(selector: string, parent?) {
  return (parent || document).querySelector(selector);
 }
 
+/**
+ * @deprecated Deprecated in favour of Spectator query methods and Spectator custom matchers
+ *
+ * To be removed in v4
+ */
 export function queryAll(selector: string, parent?) {
  return (parent || document).querySelectorAll(selector);
 }

projects/spectator/src/lib/internals.ts

@@ -15,7 +15,6 @@ import { createMouseEvent } from './event-objects';
 import { typeInElement } from './type-in-element';
 import { patchElementFocus } from './element-focus';
 import { Observable } from 'rxjs';
-import { SpectatorDebugElementNotFoundError } from './errors';
 import { SpyObject } from './mock';
 import { DOMSelector } from './dom-selectors';
 import { Token } from './token';
@@ -67,15 +66,7 @@ export class Spectator<C> {
  query<R>(directive: Type<R>): R;
  query<R>(directiveOrSelector: Type<any> | string, options: { read: Token<R> }): R;
  query<R>(directiveOrSelector: Type<any> | DOMSelector | string, options: { read: Token<R> } = { read: undefined }): R {
- try {
- return _getChild<R>(this.debugElement)(directiveOrSelector, options);
- } catch (err) {
- if (err instanceof SpectatorDebugElementNotFoundError) {
- return null;
- } else {
- throw err;
- }
- }
+ return _getChild<R>(this.debugElement)(directiveOrSelector, options);
  }
 
  queryAll<R extends Element[]>(selector: string | DOMSelector): R;
@@ -290,13 +281,7 @@ export class Spectator<C> {
  */
 export function _getChild<R>(debugElementRoot: DebugElement) {
  return function(directiveOrSelector: Type<R> | DOMSelector | string, options: { read } = { read: undefined }): R {
- const [child] = _getChildren<R>(debugElementRoot)(directiveOrSelector, options);
-
- if (!child) {
- throw new SpectatorDebugElementNotFoundError(`Cannot find a debug element for ${directiveOrSelector}`);
- }
-
- return child;
+ return _getChildren<R>(debugElementRoot)(directiveOrSelector, options)[0] || null;
  };
 }
 
@@ -312,24 +297,20 @@ export function _getChildren<R>(debugElementRoot: DebugElement) {
  return directiveOrSelector.execute(debugElementRoot.nativeElement) as any[];
  }
 
- let debugElement: DebugElement[];
+ let debugElements: DebugElement[];
 
  if (typeof directiveOrSelector === 'string') {
- debugElement = debugElementRoot.queryAll(By.css(directiveOrSelector));
+ debugElements = debugElementRoot.queryAll(By.css(directiveOrSelector));
  } else {
- debugElement = debugElementRoot.queryAll(By.directive(directiveOrSelector));
- }
-
- if (!debugElement) {
- throw new SpectatorDebugElementNotFoundError(`Cannot find a debug element for ${directiveOrSelector}`);
+ debugElements = debugElementRoot.queryAll(By.directive(directiveOrSelector));
  }
 
  if (options.read) {
- return debugElement.map(debug => debug.injector.get(options.read));
+ return debugElements.map(debug => debug.injector.get(options.read));
  } else if (typeof directiveOrSelector === 'string') {
- return debugElement.map(debug => debug.nativeElement);
+ return debugElements.map(debug => debug.nativeElement);
  } else {
- return debugElement.map(debug => debug.componentInstance);
+ return debugElements.map(debug => debug.componentInstance);
  }
  };
 }

projects/spectator/src/lib/mock-directive.ts

@@ -5,6 +5,7 @@ import { Directive, EventEmitter, Type } from '@angular/core';
  * MockDirective({ selector: 'some-directive' });
  * MockDirective({ selector: 'some-directive', inputs: ['some-input', 'some-other-input'] });
  *
+ * @deprecated Deprecated in favour of the `ng-mocks` implementation of `MockDirective`. To be be removed in the next major version.
  */
 export function MockDirective(options: Directive & { identifier?: Type<any> }): Directive {
  const metadata: Directive & { identifier?: Type<any> } = {

src/app/zippy/zippy.component.jest.ts

@@ -13,6 +13,18 @@ describe('ZippyComponent', () => {
  componentProviders: [{ provide: QueryService, useValue: 'componentProviders' }]
  });
 
+ it('should should have a zippy component', () => {
+ host = createHost(`<zippy title="Zippy title"></zippy>`);
+
+ expect('zippy').toExist();
+ expect(host.queryHost('zippy')).toExist();
+ expect(host.query('zippy')).not.toExist();
+
+ expect('.non-existing').not.toExist();
+ expect(host.queryHost('.non-existing')).not.toExist();
+ expect(host.query('.non-existing')).not.toExist();
+ });
+
  it('should display the title', () => {
  host = createHost(`<zippy title="Zippy title"></zippy>`);
  expect(host.query('.zippy__title')).toHaveText('Zippy title');

src/app/zippy/zippy.component.spec.ts

@@ -16,6 +16,18 @@ describe('ZippyComponent', () => {
  componentProviders: [{ provide: QueryService, useValue: 'componentProviders' }]
  });
 
+ it('should should have a zippy component', () => {
+ host = createHost(`<zippy title="Zippy title"></zippy>`);
+
+ expect('zippy').toExist();
+ expect(host.queryHost('zippy')).toExist();
+ expect(host.query('zippy')).not.toExist();
+
+ expect('.non-existing').not.toExist();
+ expect(host.queryHost('.non-existing')).not.toExist();
+ expect(host.query('.non-existing')).not.toExist();
+ });
+
  it('should display the title', () => {
  host = createHost(`<zippy title="Zippy title"></zippy>`);
  expect(host.query('.zippy__title')).toHaveText('Zippy title');

src/jest.config.js

@@ -2,7 +2,7 @@ module.exports = {
  preset: 'jest-preset-angular',
  globals: {
  'ts-jest': {
- tsConfigFile: 'src/tsconfig.spec.json'
+ tsConfig: 'src/tsconfig.jest.json'
  }
  },
  roots: ['src'],

src/tsconfig.jest.json

@@ -0,0 +1,29 @@
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/spec",
+ "module": "commonjs",
+ "baseUrl": "./",
+ "types": [
+ "jest",
+ "node"
+ ],
+ "paths": {
+ "@netbasal/spectator": [
+ "../projects/spectator/src/lib"
+ ],
+ "@netbasal/spectator/jest": [
+ "../projects/spectator/jest/src"
+ ]
+ }
+ },
+ "files": [
+ "test.ts",
+ "polyfills.ts"
+ ],
+ "include": [
+ "**/*.jest.ts",
+ "**/*.d.ts",
+ "../projects/spectator/src/lib/matchers-types.d.ts"
+ ]
+}

src/tsconfig.spec.json

@@ -5,7 +5,7 @@
  "module": "commonjs",
  "baseUrl": "./",
  "types": [
- "jest",
+ "jasmine",
  "node"
  ],
  "paths": {
@@ -23,7 +23,6 @@
  ],
  "include": [
  "**/*.spec.ts",
- "**/*.jest.ts",
  "**/*.d.ts",
  "../projects/spectator/src/lib/matchers-types.d.ts"
  ]