101 lines
3.4 KiB
TypeScript
101 lines
3.4 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';
|
|
import { newEvent } from '../../testing';
|
|
|
|
// #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"', () => {
|
|
expect(des[0].styles['backgroundColor']).toBe('yellow');
|
|
});
|
|
|
|
it('should color 2nd <h2> background w/ default color', () => {
|
|
const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
|
|
expect(des[1].styles['backgroundColor']).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');
|
|
|
|
// dispatch a DOM event so that Angular responds to the input value change.
|
|
input.value = 'green';
|
|
input.dispatchEvent(newEvent('input'));
|
|
fixture.detectChanges();
|
|
|
|
expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
|
|
});
|
|
|
|
// 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);
|
|
});
|
|
|
|
it('bare <h2> should not have a customProperty', () => {
|
|
expect(bareH2.properties['customProperty']).toBeUndefined();
|
|
});
|
|
// #enddocregion selected-tests
|
|
|
|
// 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);
|
|
});
|
|
});
|