Заглушки / насмешки сложные связывания @Input () в угловых компонентах? - PullRequest
0 голосов
/ 07 октября 2019

Что такое хороший шаблон / практика для заглушки / насмешливого связывания ввода в угловых компонентах? Например, у меня есть ListUnderTestComponent

interface SomeComplexModel {
    id: string,
    prop0: {
        prop1: {
            prop11: number,
            prop12: string,
            prop13: any
        },
        prop2: {
            prop21: number,
            prop22: string,
            prop23: {
                prop231: string,
                prop231: any
            }
        }
    }
}

@Component({
    selector: 'test',
    template: `<list-under-test [list]="list"></list-under-test>`
})
class WrapperComponent {
    @ViewChild('list-under-test') listUnderTest: ListUnderTestComponent;
    list: {
        pagination: {
            num: number,
            size: number,
            total: number
        }
        items: Array<SomeComplexModel>
    } = {
        pagination: {
            num: 1, 
            size: 10, 
            total: 54
        },
        items: [
            {
                id: '1',
                prop0: {
                    prop1: {
                        prop11: 1,
                        prop12: 'test-prop-12',
                        prop13: { someInternalProp: true }
                    },
                    prop2: {
                        prop21: 21,
                        prop22: 'test-22',
                        prop23: {
                            prop231: 'test-231',
                            prop231: { hasInternalProps: true }
                        }
                    }
                }
             },
             {
                id: '2',
                prop0: {
                    prop1: {
                        prop11: 1,
                        prop12: 'test-prop-12',
                        prop13: { someInternalProp: true }
                    },
                    prop2: {
                        prop21: 21,
                        prop22: 'test-22',
                        prop23: {
                            prop231: 'test-231',
                            prop231: { hasInternalProps: true }
                        }
                    }
                }
             }
            // ... many more ...
        ]
    };
}

Итак, как вы, вероятно, видите, мне нужно передать этот огромный fake объект. Но я бы предпочел какое-то красивое решение, где я передаю какой-то поддельный объект, не объявляя все эти внутренние свойства. Который также не собирается проваливать мои тесты с такими сообщениями как Cannot read property someProp of undefined.

Любые советы? Хорошая практика?

...