|  | 
|  | 1 | +import { Component, DebugElement } from '@angular/core'; | 
|  | 2 | +import { ComponentFixture, TestBed } from '@angular/core/testing'; | 
| 1 | 3 | import { CardImgDirective } from './card-img.directive'; | 
| 2 |  | -import { TestBed } from '@angular/core/testing'; | 
|  | 4 | +import { By } from '@angular/platform-browser'; | 
|  | 5 | + | 
|  | 6 | +@Component({ | 
|  | 7 | +  imports: [CardImgDirective], | 
|  | 8 | +  template: ` <div [cCardImg]="orientation"></div> ` | 
|  | 9 | +}) | 
|  | 10 | +export class TestComponent { | 
|  | 11 | +  orientation: 'top' | 'bottom' | 'start' | 'end' | undefined = undefined; | 
|  | 12 | +} | 
| 3 | 13 | 
 | 
| 4 | 14 | describe('CardImgDirective', () => { | 
|  | 15 | +  let component: TestComponent; | 
|  | 16 | +  let fixture: ComponentFixture<TestComponent>; | 
|  | 17 | +  let debugElement: DebugElement; | 
|  | 18 | + | 
|  | 19 | +  beforeEach(() => { | 
|  | 20 | +    TestBed.configureTestingModule({ | 
|  | 21 | +      imports: [TestComponent] | 
|  | 22 | +    }).compileComponents(); | 
|  | 23 | +    fixture = TestBed.createComponent(TestComponent); | 
|  | 24 | +    component = fixture.componentInstance; | 
|  | 25 | +    debugElement = fixture.debugElement.query(By.directive(CardImgDirective)); | 
|  | 26 | +    fixture.detectChanges(); // initial binding | 
|  | 27 | +  }); | 
|  | 28 | + | 
| 5 | 29 |   it('should create an instance', () => { | 
| 6 | 30 |     TestBed.runInInjectionContext(() => { | 
| 7 | 31 |       const directive = new CardImgDirective(); | 
| 8 | 32 |       expect(directive).toBeTruthy(); | 
| 9 | 33 |     }); | 
| 10 | 34 |   }); | 
|  | 35 | + | 
|  | 36 | +  it('should have css classes', () => { | 
|  | 37 | +    component.orientation = 'start'; | 
|  | 38 | +    fixture.detectChanges(); | 
|  | 39 | +    expect(debugElement.nativeElement).toHaveClass('rounded-start'); | 
|  | 40 | +    component.orientation = 'end'; | 
|  | 41 | +    fixture.detectChanges(); | 
|  | 42 | +    expect(debugElement.nativeElement).toHaveClass('rounded-end'); | 
|  | 43 | +    component.orientation = 'top'; | 
|  | 44 | +    fixture.detectChanges(); | 
|  | 45 | +    expect(debugElement.nativeElement).toHaveClass('card-img-top'); | 
|  | 46 | +    component.orientation = 'bottom'; | 
|  | 47 | +    fixture.detectChanges(); | 
|  | 48 | +    expect(debugElement.nativeElement).toHaveClass('card-img-bottom'); | 
|  | 49 | +  }); | 
| 11 | 50 | }); | 
0 commit comments