Jestgular

Framework for unit / feature / acceptance testing of your Angular code.

Dependencies

Two hard dependencies (as the name suggests) are: Jest and Angular, however the idea is that you do not need to understand anything about neither Jest nor Angular because the API of the framework should be declarative, self-explanatory and searchable so that developer can easily get up to date with it.

Core Concepts

Setup

Setting up TestBed in Angular can be quite complicated and requires a lot of knowledge about testing in general.

It is helpful to understand the pyramid of testing, quadrants of testing and test desiderata, however with jestgular you do not have to worry about it so much because it provides you with helpful setup factories to get you started:

• givenStandaloneComponent: provide standalone compnent and optionally apply function that will modify underlying component instance

TODO:

- givenApp for acceptance testing
- givenNgrxState
- givenPipe
- givenDirective

ElementLocator

It is an abstraction that allows you to instantiate specific elements. You can use one of the locating methods:

• locateChild - locates single element

_ TODO _

- locateList - locates many elements
- locateTable - table specific locator

ElementSelector

You can select elements by different criteria, in order to do so use one of the following selector functions

• cssSelector - select by css
• altSelector - select by alt attribute
• placeholderSelector - select by placeholder attribute
• testIdSelector - select by data-testid attribute
• textSelector - select by exact text content
• labelSelector - select input by label
  • link label's for attribute with input id attribute
  • find first input in content of label

TODO

- buttonRoleSelector

You can also provide just a string which will fall back to cssSelector

TODO

Add support for regexp as selector value - currently only string is allowed

Elements

There are plenty of elements that are abstractions of HTMLElement and DebugElement and give you nice API to interact (when) and expect (then).

_ TODO _

Add support for component harness instead of manually operating on native elements

Interacting should depends on the exact element that you are using, so play around with it.

Expecting on the element is based on RegExp, which means that you can expect values using regexp. You can also provide string, which will fall back into exact regexp.

Examples of elements are:

• SimpleElement (most basic html element that has attributes)
• TextElement (can have content)
• ImageElement (has special attribute src)
• FormControlElement (input text / number)

TODO

- ListElement
- TableElement
- CheckboxElement
- RadioGroupElement
- CheckboxGroupElement