Угловое тестирование Невозможно прочитать свойство 'имя' из неопределенного

Question

У меня есть ModalComponent, который принимает некоторые свойства от родителя через @ Input.

Это вызывает проблемы с тестированием

TypeError: Невозможно прочитать свойство 'name' из неопределенного

Имя используется в ngOnInit и должно быть от @Input displayeddata.

Как мне пройти его в моем модульном тесте?

В настоящее время мой тест выглядит так

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ModalComponent, FilterComponent],
            imports: [ReactiveFormsModule, TranslateModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        componentName: 'TextareaComponent'
    };
    fixture.detectChanges();
});

it('should create', async () => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});

Это один тест для моего компонента, и он не проходит.

Обновление # 1

Вот что я получаю console.log(this.displayeddata);

Object
caption: "Caption"
component: "TextareaComponent"
name: "One component"

Я также немного изменил свой код (обновил код) и теперь получаю новую ошибку TypeError: Cannot read property 'caption' of undefined

Обновление № 2

modal.component.ts

export class ModalComponent implements OnInit {
@Input() showenpunctsnow;
@Input() displayeddata;
@Output() ComponentParametrsInputs: FormGroup = this.fb.group({
        name: ['', Validators.required],
        caption: ['', Validators.required],
        component: ['']
    });
constructor(private fb: FormBuilder) {}
ngOnInit() {

        console.log(this.displayeddata);

        this.ComponentParametrsInputs = this.fb.group({
            name: [this.displayeddata.name, Validators.required],
            caption: [this.displayeddata.caption, Validators.required],
            component: [this.displayeddata.componentName]
        });
    }

Answer 1

Я помещаю это обновление как «ответ», потому что оно не помещается в комментарии. :)

Спасибо за размещение логики компонента. С помощью этой информации мне хватило, чтобы собрать здесь быструю среду для тестирования стекаблиц: https://stackblitz.com/edit/stackoverflow-q-53086352?file=app%2Fmy.component.spec.ts

Мне пришлось немного отклониться от приведенного выше кода следующими способами:

• Оба FilterComponent и TranslateModule закомментированы, так как у меня нет доступа к этому коду, и вы не тестируете их в данный момент.
• Вы неправильно использовали 'async' во второй функции 'beforeEach', а также в спецификации 'it' - вы не оборачивали функцию стрелки внутри асинхронного, вы использовали зарезервированное слово async, чтобы определить функцию как asynchronous - часть async / await, что совершенно другое. Вам нужен другой набор скобок после слова async, чтобы называть его функцией angular / core / testing, а не зарезервированным словом javascript. :)
• Я добавил простой шаблон, который отображает одну из переменных displaydata

Однако, удивительная вещь была, когда я поместил ваш код в stackblitz - все это работает просто отлично! Ясно, что проблема, с которой вы сталкиваетесь, вызвана каким-то кодом, который находится за пределами того, что вы уже представили.

Мое предложение для следующих шагов:

• Либо отредактируйте существующий стек, который я собрал, либо подключите его к своей учетной записи, чтобы поиграть с ним.
• добавить дополнительный код / ​​данные, пока проблема не возникнет снова. Это будет указывать на фактическую ошибку.

Удачи!

Answer 2

Ваш подход хорош, я думаю, что он терпит неудачу из-за асинхронности. Попробуйте это:

it('should create', () => {
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        component: 'TextareaComponent'
    };
    fixture.detectChanges();
    expect(component).toBeTruthy();
});