59 lines
1.8 KiB
TypeScript
59 lines
1.8 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';
|
|
|
|
// Component to test directive
|
|
@Component({
|
|
template: `
|
|
<h2 highlight="yellow">Something Yellow</h2>
|
|
<h2 highlight>Something Gray</h2>
|
|
<h2>Something White</h2>
|
|
`
|
|
|
|
})
|
|
class TestComponent { }
|
|
|
|
////// Tests //////////
|
|
describe('HighlightDirective', () => {
|
|
|
|
let fixture: ComponentFixture<TestComponent>;
|
|
let h2Des: DebugElement[];
|
|
|
|
beforeEach(() => {
|
|
fixture = TestBed.configureTestingModule({
|
|
declarations: [ HighlightDirective, TestComponent ]
|
|
})
|
|
.createComponent(TestComponent);
|
|
|
|
h2Des = fixture.debugElement.queryAll(By.css('h2'));
|
|
});
|
|
|
|
it('should have `HighlightDirective`', () => {
|
|
// The HighlightDirective listed in <h2> tokens means it is attached
|
|
expect(h2Des[0].providerTokens).toContain(HighlightDirective, 'HighlightDirective');
|
|
});
|
|
|
|
it('should color first <h2> background "yellow"', () => {
|
|
fixture.detectChanges();
|
|
const h2 = h2Des[0].nativeElement as HTMLElement;
|
|
expect(h2.style.backgroundColor).toBe('yellow');
|
|
});
|
|
|
|
it('should color second <h2> background w/ default color', () => {
|
|
fixture.detectChanges();
|
|
const h2 = h2Des[1].nativeElement as HTMLElement;
|
|
expect(h2.style.backgroundColor).toBe(HighlightDirective.defaultColor);
|
|
});
|
|
|
|
it('should NOT color third <h2> (no directive)', () => {
|
|
// no directive
|
|
expect(h2Des[2].providerTokens).not.toContain(HighlightDirective, 'HighlightDirective');
|
|
fixture.detectChanges();
|
|
|
|
const h2 = h2Des[2].nativeElement as HTMLElement;
|
|
expect(h2.style.backgroundColor).toBe('', 'backgroundColor');
|
|
});
|
|
});
|