2016-06-23 12:47:54 -04:00
|
|
|
/**
|
|
|
|
* @license
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
*
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
*/
|
|
|
|
|
2016-08-23 13:52:40 -04:00
|
|
|
import {Component, Directive, ElementRef, Input, NO_ERRORS_SCHEMA, QueryList, ViewChild, ViewChildren} from '@angular/core';
|
2016-08-17 18:05:22 -04:00
|
|
|
import {TestBed} from '@angular/core/testing';
|
2016-05-26 13:18:31 -04:00
|
|
|
|
2017-12-15 19:28:41 -05:00
|
|
|
{
|
2016-05-26 13:18:31 -04:00
|
|
|
describe('ViewChild', () => {
|
2016-08-17 18:05:22 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
TestBed.configureTestingModule({
|
2016-08-23 13:52:40 -04:00
|
|
|
declarations: [ViewChildTypeSelectorComponent, ViewChildStringSelectorComponent, Simple],
|
|
|
|
schemas: [NO_ERRORS_SCHEMA],
|
2016-08-17 18:05:22 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support type selector', () => {
|
|
|
|
TestBed.overrideComponent(
|
|
|
|
ViewChildTypeSelectorComponent,
|
|
|
|
{set: {template: `<simple [marker]="'1'"></simple><simple [marker]="'2'"></simple>`}});
|
|
|
|
const view = TestBed.createComponent(ViewChildTypeSelectorComponent);
|
|
|
|
|
|
|
|
view.detectChanges();
|
|
|
|
expect(view.componentInstance.child).toBeDefined();
|
|
|
|
expect(view.componentInstance.child.marker).toBe('1');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support string selector', () => {
|
|
|
|
TestBed.overrideComponent(
|
|
|
|
ViewChildStringSelectorComponent, {set: {template: `<simple #child></simple>`}});
|
|
|
|
const view = TestBed.createComponent(ViewChildStringSelectorComponent);
|
|
|
|
|
|
|
|
view.detectChanges();
|
|
|
|
expect(view.componentInstance.child).toBeDefined();
|
|
|
|
});
|
2016-05-26 13:18:31 -04:00
|
|
|
});
|
2016-08-17 18:05:22 -04:00
|
|
|
|
2016-05-26 13:18:31 -04:00
|
|
|
describe('ViewChildren', () => {
|
2016-08-17 18:05:22 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
TestBed.configureTestingModule({
|
|
|
|
declarations:
|
2016-08-23 13:52:40 -04:00
|
|
|
[ViewChildrenTypeSelectorComponent, ViewChildrenStringSelectorComponent, Simple],
|
|
|
|
schemas: [NO_ERRORS_SCHEMA],
|
2016-08-17 18:05:22 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support type selector', () => {
|
|
|
|
TestBed.overrideComponent(
|
|
|
|
ViewChildrenTypeSelectorComponent,
|
|
|
|
{set: {template: `<simple></simple><simple></simple>`}});
|
|
|
|
|
|
|
|
const view = TestBed.createComponent(ViewChildrenTypeSelectorComponent);
|
|
|
|
view.detectChanges();
|
|
|
|
expect(view.componentInstance.children).toBeDefined();
|
|
|
|
expect(view.componentInstance.children.length).toBe(2);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should support string selector', () => {
|
|
|
|
TestBed.overrideComponent(
|
|
|
|
ViewChildrenStringSelectorComponent,
|
|
|
|
{set: {template: `<simple #child1></simple><simple #child2></simple>`}});
|
2016-08-23 13:52:40 -04:00
|
|
|
const view = TestBed.configureTestingModule({schemas: [NO_ERRORS_SCHEMA]})
|
|
|
|
.createComponent(ViewChildrenStringSelectorComponent);
|
2016-08-17 18:05:22 -04:00
|
|
|
view.detectChanges();
|
|
|
|
expect(view.componentInstance.children).toBeDefined();
|
|
|
|
expect(view.componentInstance.children.length).toBe(2);
|
|
|
|
});
|
2016-05-26 13:18:31 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
@Directive({selector: 'simple'})
|
2016-05-26 13:18:31 -04:00
|
|
|
class Simple {
|
2018-06-18 19:38:33 -04:00
|
|
|
// TODO(issue/24571): remove '!'.
|
2020-04-13 19:40:21 -04:00
|
|
|
@Input() marker!: string;
|
2016-05-26 13:18:31 -04:00
|
|
|
}
|
|
|
|
|
2016-08-17 18:05:22 -04:00
|
|
|
@Component({selector: 'view-child-type-selector', template: ''})
|
2016-05-26 13:18:31 -04:00
|
|
|
class ViewChildTypeSelectorComponent {
|
2018-06-18 19:38:33 -04:00
|
|
|
// TODO(issue/24571): remove '!'.
|
2020-04-13 19:40:21 -04:00
|
|
|
@ViewChild(Simple) child!: Simple;
|
2016-05-26 13:18:31 -04:00
|
|
|
}
|
|
|
|
|
2016-08-17 18:05:22 -04:00
|
|
|
@Component({selector: 'view-child-string-selector', template: ''})
|
2016-05-26 13:18:31 -04:00
|
|
|
class ViewChildStringSelectorComponent {
|
2018-06-18 19:38:33 -04:00
|
|
|
// TODO(issue/24571): remove '!'.
|
2020-04-13 19:40:21 -04:00
|
|
|
@ViewChild('child') child!: ElementRef;
|
2016-05-26 13:18:31 -04:00
|
|
|
}
|
|
|
|
|
2016-08-17 18:05:22 -04:00
|
|
|
@Component({selector: 'view-children-type-selector', template: ''})
|
2016-05-26 13:18:31 -04:00
|
|
|
class ViewChildrenTypeSelectorComponent {
|
2018-06-18 19:38:33 -04:00
|
|
|
// TODO(issue/24571): remove '!'.
|
2020-04-13 19:40:21 -04:00
|
|
|
@ViewChildren(Simple) children!: QueryList<Simple>;
|
2016-05-26 13:18:31 -04:00
|
|
|
}
|
|
|
|
|
2016-08-17 18:05:22 -04:00
|
|
|
@Component({selector: 'view-child-string-selector', template: ''})
|
2016-05-26 13:18:31 -04:00
|
|
|
class ViewChildrenStringSelectorComponent {
|
|
|
|
// Allow comma separated selector (with spaces).
|
2018-06-18 19:38:33 -04:00
|
|
|
// TODO(issue/24571): remove '!'.
|
2020-04-13 19:40:21 -04:00
|
|
|
@ViewChildren('child1 , child2') children!: QueryList<ElementRef>;
|
2016-05-26 13:18:31 -04:00
|
|
|
}
|