JavaScript Edu Resources. Angular Courses. React Tutorials. Join us!

Testing UI Components with the TestComponentBuilder {{ help_out }}

  • We’ll begin with this overall script, which should only rely on Jasmine, and not Angular, to configure the test and mock the collaborators:

    Next, we’ll introduce our mock / stub classes:

    Now it is time to build our test suite, which will directly instantiate instances of our mock objects and the component under test.

  • runs before each test, and so we use this to initialize our objects:

    This code should be somewhat obvious – we need to create our fake Blog Service and Markdown Service instances, and then inject them into our BlogRoll component by hand.

  • Our component test takes up where our last example left off — placing the component inside of an Angular 2 module, complete with a template and dependency injection.
  • The internal state is tested as before, except now we have to access our component via the fixture’s property:

    The template behavior aspect of our test focuses on a fragment of the Component’s template containing both the editor and a containing the display list, as a table of entries.

  • The general pattern to stand up a test is as follows:

    The fixture is your component under test, with several additional properties and methods:

    The TestCompon

Testing Angular 2 Components with Unit Tests and the TestComponentBuilder (RC1+)!/ChariotSolution