Hi,
How can I test that my component is transcluding the content?
For example:
import {Component, Input} from '@angular/core';
@Component({
selector: 'my-com',
template: `
<div>
<h1 class="title">{title}</h1>
<div class="content">
<ng-content></ng-content>
</div>
</div>
`
})
export class MyComponent {
@Input() title: string = '';
}
I need to test that MyComponent is binding the title and transcluding the
content:
import { ComponentFixture, TestBed} from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { MyComponent } from 'path/to/mycomponent';
let comp: MyComponent;
let fixture: ComponentFixture<MyComponent>;
describe('MyComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ MyComponent ]
});
fixture = TestBed.createComponent(MyComponent);
comp = fixture.componentInstance;
fixture.detectChanges();
});
it('should create the component', () => {
expect(comp).toBeTruthy();
});
it('should bind the title', () => {
let de: DebugElement = fixture.debugElement.query(By.css('.title'));
let el: HTMLElement = de.nativeElement;
const myTitle: string = 'myTitle';
comp.title = myTitle;
fixture.detectChanges();
expect(el.textContent).toBe(myTitle);
});
});
Now, how can I set the content to my component?
it('should transclude the content', () => {
let de: DebugElement = fixture.debugElement.query(By.css('.content'));
let el: HTMLElement = de.nativeElement;
const myContent: string = '<div id="test"></div>';
comp.CONTENT = myContent; //how to set content ¿?
fixture.detectChanges();
expect(el.children[0].id).toBe('test');
});
In angular 1, I think we need to do a custom $compile. Something like:
$compile('<my-com><div id="test"></div></my-com>')(scope);
Thanks!
--
You received this message because you are subscribed to the Google Groups
"Angular" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
