Тестирование на основе свойств имеет много преимуществ. Так что давайте также сделаем это в Angular.
Я использую testcheck@1.0.0-rc.2
—
Проверить код здесь.
—
Это компонент, который я хочу протестировать:
@Component({ selector: 'mst-property-based', template: ` <div class="mst-todo-item" *ngFor="let todo of todos"> {{ todo.title }} </div> `, }) export class PropertyBasedComponent { @Input() todos: Todo[]; }
export interface Options { times?: number; maxSize?: number; seed?: number; } export const testcheck = { it: (testDescription: string, generators: Generator<any>[], testFunction: any, options?: Options) => { let i = 1; let propertyInstance; if (generators.length === 1) { propertyInstance = property(generators[0], (...args: any[]) => { it(testDescription + " " + i++, () => { testFunction(...args); }); return true; }); } else if (generators.length === 2) { propertyInstance = property(generators[0], generators[1], (...args: any[]) => { it(testDescription + " " + i++, () => { testFunction(...args); }); return true; }); } else if (generators.length === 3) { propertyInstance = property(generators[0], generators[1], generators[2], (...args: any[]) => { it(testDescription + " " + i++, () => { testFunction(...args); }); return true; }); } else if (generators.length === 4) { propertyInstance = property(generators[0], generators[1], generators[2], generators[3], (...args: any[]) => { it(testDescription + " " + i++, () => { testFunction(...args); }); return true; }); } else { throw new Error('invalid generators'); } check(propertyInstance, (options || { times: 5 })); }, };
2. Написать функцию-генератор
export function generateTodos(length: number) { return gen.array(generateTodo(), { size: length }); } export function generateTodo() { return gen.object({ id: gen.sPosInt, title: gen.alphaNumString.notEmpty(), }); }
3. Протестируйте свой компонент
testcheck.it( 'should show todo', [ generateTodos(5), ], (todos) => { fixture.detectChanges(); component.todos = todos; fixture.detectChanges(); queryDebugElements(de, '.mst-todo-item').forEach((el, index) => { hasContent(el, todos[index].title); }); } );