0958a8da61
Because PhantomJS has been deprecated since March 2018, and `newEvent` is very confusing for newcomers that read the testing documentation, we remove it entirely, and instead assume most, if not all, newcomers will run tests in Chrome as it is the default. Fixes #23370 PR Close #37251
107 lines
3.7 KiB
TypeScript
107 lines
3.7 KiB
TypeScript
import { Component, DebugElement } from '@angular/core';
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
import { By } from '@angular/platform-browser';
|
|
|
|
import { HighlightDirective } from './highlight.directive';
|
|
|
|
// #docregion test-component
|
|
@Component({
|
|
template: `
|
|
<h2 highlight="yellow">Something Yellow</h2>
|
|
<h2 highlight>The Default (Gray)</h2>
|
|
<h2>No Highlight</h2>
|
|
<input #box [highlight]="box.value" value="cyan"/>`
|
|
})
|
|
class TestComponent { }
|
|
// #enddocregion test-component
|
|
|
|
describe('HighlightDirective', () => {
|
|
|
|
let fixture: ComponentFixture<TestComponent>;
|
|
let des: DebugElement[]; // the three elements w/ the directive
|
|
let bareH2: DebugElement; // the <h2> w/o the directive
|
|
|
|
// #docregion selected-tests
|
|
beforeEach(() => {
|
|
fixture = TestBed.configureTestingModule({
|
|
declarations: [ HighlightDirective, TestComponent ]
|
|
})
|
|
.createComponent(TestComponent);
|
|
|
|
fixture.detectChanges(); // initial binding
|
|
|
|
// all elements with an attached HighlightDirective
|
|
des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
|
|
|
|
// the h2 without the HighlightDirective
|
|
bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
|
|
});
|
|
|
|
// color tests
|
|
it('should have three highlighted elements', () => {
|
|
expect(des.length).toBe(3);
|
|
});
|
|
|
|
it('should color 1st <h2> background "yellow"', () => {
|
|
const bgColor = des[0].nativeElement.style.backgroundColor;
|
|
expect(bgColor).toBe('yellow');
|
|
});
|
|
|
|
it('should color 2nd <h2> background w/ default color', () => {
|
|
const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
|
|
const bgColor = des[1].nativeElement.style.backgroundColor;
|
|
expect(bgColor).toBe(dir.defaultColor);
|
|
});
|
|
|
|
it('should bind <input> background to value color', () => {
|
|
// easier to work with nativeElement
|
|
const input = des[2].nativeElement as HTMLInputElement;
|
|
expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');
|
|
|
|
input.value = 'green';
|
|
|
|
// Dispatch a DOM event so that Angular responds to the input value change.
|
|
// In older browsers, such as IE, you might need a CustomEvent instead. See
|
|
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
|
|
input.dispatchEvent(new Event('input'));
|
|
fixture.detectChanges();
|
|
|
|
expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
|
|
});
|
|
|
|
|
|
it('bare <h2> should not have a customProperty', () => {
|
|
expect(bareH2.properties.customProperty).toBeUndefined();
|
|
});
|
|
// #enddocregion selected-tests
|
|
|
|
// Removed on 12/02/2016 when ceased public discussion of the `Renderer`. Revive in future?
|
|
// // customProperty tests
|
|
// it('all highlighted elements should have a true customProperty', () => {
|
|
// const allTrue = des.map(de => !!de.properties['customProperty']).every(v => v === true);
|
|
// expect(allTrue).toBe(true);
|
|
// });
|
|
|
|
// injected directive
|
|
// attached HighlightDirective can be injected
|
|
it('can inject `HighlightDirective` in 1st <h2>', () => {
|
|
const dir = des[0].injector.get(HighlightDirective);
|
|
expect(dir).toBeTruthy();
|
|
});
|
|
|
|
it('cannot inject `HighlightDirective` in 3rd <h2>', () => {
|
|
const dir = bareH2.injector.get(HighlightDirective, null);
|
|
expect(dir).toBe(null);
|
|
});
|
|
|
|
// DebugElement.providerTokens
|
|
// attached HighlightDirective should be listed in the providerTokens
|
|
it('should have `HighlightDirective` in 1st <h2> providerTokens', () => {
|
|
expect(des[0].providerTokens).toContain(HighlightDirective);
|
|
});
|
|
|
|
it('should not have `HighlightDirective` in 3rd <h2> providerTokens', () => {
|
|
expect(bareH2.providerTokens).not.toContain(HighlightDirective);
|
|
});
|
|
});
|