Tests break when there's a component inside another component

[dhAlcojor]

Describe the bug Tests break when there's a component inside another component

To Reproduce Steps to reproduce the behavior:

1. Generate a new component using ng generate component
2. Take part of the app.component.html and put it in the .html of the new component (I've taken the list element that uses the translate pipe)
3. If you run the demo app, you can check that everything is still working
4. But, when you run yarn run test:app you can see that there are several errors saying that some component can't find the translate pipe

Expected behavior Everything working, both the demo app and the tests

Screenshots I've recorded a screen cast taking the steps to reproduce the error.

Desktop (please complete the following information):

• OS: Ubuntu 20.04
• Browser N/A
• Version N/A

[mwootendev]

@dhAlcojor Thank you for taking the time to make the screencast. I believe that the issue here is that the test cases .spec.ts were not updated to incorporate the new component. When generating the DummyComponent, the Angular CLI automatically added the new component to the app.module.ts under declarations. However, it did not update the app.component.spec.ts file to include a declaration for the component. Each test harnass needs to be individually configured with the modules and components needed for the test.

Adding the dummy component to the declarations (presently line 29) of app.component.spec.ts will resolve 2 of the test failures.

Similarly, the new dummy component is not aware of the translate service without importing it. Adding the following to line 12 of its spec file should resolve the other failing test case:

imports: [TranslateTestingModule.withTranslations('en', {})],