feat(query): add dom-testing-library query tools

package.json

@@ -41,6 +41,7 @@
  "@angular/platform-browser-dynamic": "^5.2.10",
  "@angular/router": "^5.2.10",
  "core-js": "^2.4.1",
+ "dom-testing-library": "2.1.0",
  "helpful-decorators": "^1.7.2",
  "jquery": "^3.3.1",
  "npm": "^6.1.0",

src/app/app.module.ts

@@ -21,6 +21,7 @@ import { AutoFocusDirective } from "./auto-focus.directive";
 import { FgComponent } from "./fg/fg.component";
 import { ReactiveFormsModule } from "@angular/forms";
 import { AsyncComponent } from "./async/async.component";
+import { DomSelectorsComponent } from "./dom-selectors/dom-selectors.component";
 
 @NgModule({
  declarations: [
@@ -39,7 +40,8 @@ import { AsyncComponent } from "./async/async.component";
  ClickComponent,
  AutoFocusDirective,
  FgComponent,
- AsyncComponent
+ AsyncComponent,
+ DomSelectorsComponent
  ],
  entryComponents: [DynamicComponent],
  imports: [BrowserModule, HttpClientModule, ReactiveFormsModule],

src/app/dom-selectors/dom-selectors.component.spec.ts

@@ -0,0 +1,50 @@
+import { createTestComponentFactory } from "../../lib/src/spectator";
+import { Spectator } from "../../lib/src/internals";
+import {
+ byAltText,
+ byLabel,
+ byPlaceholder,
+ byText,
+ byTitle,
+ byValue
+} from "../../lib/src/dom-selectors";
+import { DomSelectorsComponent } from "./dom-selectors.component";
+
+describe("DomSelectorsComponent", () => {
+ let spectator: Spectator<DomSelectorsComponent>;
+ const createComponent = createTestComponentFactory(DomSelectorsComponent);
+
+ beforeEach(() => {
+ spectator = createComponent();
+ });
+
+ it("should allow querying by text", () => {
+ const element = spectator.query(byText("By text"));
+ expect(element).toHaveId("by-text-p");
+ });
+
+ it("should allow querying by label", () => {
+ const element = spectator.query(byLabel("By label"));
+ expect(element).toHaveId("by-label-input");
+ });
+
+ it("should allow querying by placeholder", () => {
+ const element = spectator.query(byPlaceholder("By placeholder"));
+ expect(element).toHaveId("by-placeholder-input");
+ });
+
+ it("should allow querying by alt text", () => {
+ const element = spectator.query(byAltText("By alt text"));
+ expect(element).toHaveId("by-alt-text-img");
+ });
+
+ it("should allow querying by title", () => {
+ const element = spectator.query(byTitle("By title"));
+ expect(element).toHaveId("by-title-a");
+ });
+
+ it("should allow querying by value", () => {
+ const element = spectator.query(byValue("By value"));
+ expect(element).toHaveId("by-value-input");
+ });
+});

src/app/dom-selectors/dom-selectors.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+ selector: "app-dom-selectors",
+ template: `
+ <p id="by-text-p">By text</p>
+
+ <label for="by-label-input">By label</label>
+ <input type="text" id="by-label-input">
+
+ <input type="text" placeholder="By placeholder" id="by-placeholder-input">
+
+ <img src="" alt="By alt text" id="by-alt-text-img">
+
+ <a href="" title="By title" id="by-title-a"></a>
+ 
+ <input type="text" value="By value" id="by-value-input">
+ `
+})
+export class DomSelectorsComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}