Skip to content
angular challenges logo Angular Challenges

๐ŸŸ  Nested Components

Challenge #18

Created by Thomas Laforge

Information

We have a small application that sends a title to a fake backend when the user types the value into an input. If the title is correctly typed, you can send the request; otherwise you receive an error, and the request is not sent. The application is created with nested components. ChildComponent is the container that includes four components: ResultComponent, ButtonComponent, InputComponent and ErrorComponent. However, since we are testing our component as a black box, the architecture of our components doesnโ€™t change anything. You can create your test, change how the components are structured, and your tests should still pass. Thatโ€™s the goal of integration tests. Never test internal implementation details!!!.

You can play with it by running : npx nx serve testing-nested.

The file named child.component.spec.ts will let you test your application using Angular Testing Library . To run the test suites, you need to run npx nx test testing-nested. You can also install Jest Runner to execute your test by clicking on the Run button above each describe or it blocks.

For testing with Cypress, you will execute your test inside the child.component.cy.ts and run npx nx component-test testing-nested to execute your test suites. You can add the --watch flag to execute your test in watch mode.

Statement

The goal is to test multiple behaviors of the application describe inside each test files using Angular Testing Library and Cypress Component Testing.

Contributors

Thanks to all the contributors who have helped make this documentation better!

  • tomalaforge
  • LMFinney