Есть ли способ в angular (модульное тестирование) найти компонент по значениям его свойства @Input ()?

Question

Этот вопрос относится к угловым тестам.Я ищу короткий способ найти компоненты по значениям, которые они получают через привязку данных @Input().

У меня есть следующий дочерний компонент MyComponent.Который имеет @Input() property called id`:

@Component({
    selector: 'my-component,
    template: `... something ...`
})
class MyComponent {
    @Input() id: string;
}

Я использую этот компонент внутри ParentComponent и передаю различное ids через свойство @Input():

...
<my-component [id]="first-comp"></my-component>
<my-component [id]="second-comp"></my-component>
...

СейчасУ меня есть тестовый модуль для ParentComponent.Если я хочу найти два компонента по их id, я делаю это:

let firstComponent: MyComponent;
let secondComponent: MyComponent;

const myComponents = debugElement.query(By.css('my-component'));
for (const myComponent of myComponents) {
    if (myComponent.componentInstance.id === 'first-comp') {
        firstComponent = myComponent.componentInstance;
    } else if (myComponent.componentInstance.id === 'second-comp') {
        secondComponent = myComponent.componentInstance;
    }
}

Этот код не очень легко написать.Предоставляет ли angular такую ​​функцию, как сделать это более простым способом без цикла for?Примерно так:

const firstComponent = debugElement.query(By.css('my-component[id="first-component"]'));
const secondComponent = debugElement.query(By.css('my-component[id="second-component"]'));

Спасибо за помощь.

Answer 1

Хорошо.Я нашел довольно хороший способ.Вы можете передать пользовательскую функцию в query функцию debugElement.

Так что я написал пользовательскую функцию «проверки»:

export function findByComponentId(id: string): (queryDebugElement: DebugElement) => boolean {
    return (queryDebugElement: DebugElement) => {
        if (queryDebugElement.componentInstance) {
            if (queryDebugElement.componentInstance.id === id) {
                return queryDebugElement.componentInstance;
            }
        }
        return false;
    };
}

И тогда я могу легко использовать еенапример:

const firstComponent = debugElement.query(findByComponentId('first-component'));
const secondComponent = debugElement.query(findByComponentId('second-component'));

Чтобы использовать его с другими свойствами @Input() или в более общем смысле, вы можете создать более общую функцию.Таким образом, автор теста может определить, для какого компонента следует проверять:

export function findIfMatches(check: (component: any) => boolean): (queryDebugElement: DebugElement) => boolean {
    return (queryDebugElement: DebugElement) => {
        if (queryDebugElement.componentInstance) {
            if (queryDebugElement.componentInstance.id === id) {
                return check(queryDebugElement.componentInstance);
            }
        }
        return false;
    };
}

const firstComponent = debugElement.query(findIfMatches(component => component.id === 'first-component'));
const secondComponent = debugElement.query(findIfMatches(component => component.id === 'second-component'));

Answer 2

Ну, в этом случае вы можете просто назначить их с помощью этого

const [firstComponent, secondComponent] = debugElement.query(By.css('my-component'));

, который проще написать.

Вы также можете использовать селекторы CSS:

    const firstComponent = debugElement.query(By.css('my-component:first-of-type'));
    const secondComponent = debugElement.query(By.css('my-component:last-of-type'));