This book is available for free download from www.syncfusion.com when you complete the registration form. If you obtained this book from any other source, please register and download your free copy from www.syncfusion.com. The authors and copyright holders are not responsible for any claims, damages, or other liabilities arising out of, out of, or in connection with the information in this book.
Introduction
The E2E folder contains two files: the protractor.config.js file, which configures the reporting tool to run the tests; and a tsconfig.json file, which extends the base tsConfig and customizes the compiler options needed to run the E2E tests. The src folder inside the E2E directory contains two files that are used to run the E2E testing process. The syntax in the E2E file looks at the unit tests, describes the test as a string, and provides a function to run the actual test.
Lint Checking
You can use the help options to see the complete set of tslint command line options. You can visit this website to see the definition for each of the three presets. You can run a fluff check with the –fix option if you want some of the errors to be fixed automatically.
Other Linters
You can add ESLint to your current configuration (while keeping TSLint) if you want to become familiar with this linter. After installing ESLint and creating the configuration file, you can run the following command to use it against your files. You can also add the output information if you want to save the ribbon output to a file.
Test-Driven Development
The business analysts write the expected behavior, which serves as a specification and a test plan for the development team. Using the Gherkin language, the business analyst will then write examples of how they expect the system to behave. The method must return a status code, as the error message must be different.
Angular CLI
Our next step is to navigate to the project folder and create a service to retrieve customer information (name, PIN, status, etc.). Note that in addition to the service, the CLI also created a unit test in the .spec.ts file. Since the CLI doesn't know anything about the service, it will simply create a structure and an empty constructor.
The component source file and test files are generated for us and the app.module file is updated to import and declare the new component. At this point we have the basic premise and all the test files for our application. This folder contains a launch application for our end-to-end testing process (which we cover in Chapter 8, "E2E Testing with Jasmine").
Using the Angular CLI gives you all the files you need for your application and testing work. As we explore testing tools, we will take these generated files and extend them to provide a testable application.
Sample Application
In the actual application, the card number would be read by the machine when the user inserts the card into the ATM. They then keyed in the PIN for two-factor authentication (something we have and know). For example, the next two methods in the inclusion.component are the focus of our unit test for that component.
You will see that the test specification files (in the next chapter) contain test cases. One of the most important things to consider when designing unit tests is what we want to learn from the tests. The component has no methods so we could write some unit tests for the generated web page.
Once the user enters a valid PIN in our code, we expect their name to appear in the banner. A test to confirm that the banner has a non-empty string after successful PIN entry is the type of behavior we should look for in our unit tests. Look at the parameters of the method and try to create unit tests with both expected good values and problem values (for example, what would happen if I passed a negative number to my capture method).
Note: TDD (test-driven development) is just about this: write your tests first and they will all fail (since there is no code yet).
Unit Testing
If we look at our test specification file for our simple service, you'll see that the TestBed object is used to create an instance of the service. For services, the TestBed object simply needs to call the get() method to create an instance of the service. The actual component can be obtained via the component instance property of the createComponent object.
For example, the following snippet would return an instance of the customer information service in our application. It takes two parameters: a textual description of the component being tested and a function containing the tests to run. It takes one required parameter, the text description of the test, and an optional second parameter, the function to execute the test.
To perform the actual testing, we will first need to get an instance of the component under test. Most of the CLI generated spec files will contain this method to build the testbed used by the unit tests. The red highlights indicate parts of the code that are not covered by the unit tests.
67% of features are covered (two out of three, the component itself and the ShouldCashBeDisbursed method).
E2E Testing with Jasmine
Each browser you want to test in is included in the capabilities section of the configuration file. This file includes some modules from the Protractor API (browser, po, and element) and provides some method calls to navigate (using the browser object) and find the element (using the po object) using some properties of the element. You can get the text of an element, click an element, send text to an element, and so on.
Most of the action methods (either regular or touch) will take an element as a parameter. This method returns an object with the latitude, longitude, and elevation of the device location. The sleep() method takes a parameter of the number of milliseconds for which the browser should sleep.
The function takes element and index as parameters and returns a collection of the object constructed from the map. The getText() method returns the value of the element without any leading or trailing spaces. The it() method is where you will describe each piece of history that is tested.
The first part of the function should declare the variables to be used by the script.
E2E Testing with Cucumber
The feature is a high-level view of what is being tested, such as the login page or a. The And and But commands are mainly used to improve the readability of the attribute file. The Steps folder should contain the code to implement the statements found in the features files.
As the feature files are processed, the feature lines are looked up across the entire set of step files. When a feature file is processed, the keyword and text in the feature file is used to search for a matching step definition (from all the step files in the configuration). You must strike a balance between flexibility for the feature file authors and the complexity of the step definition files.
I generally prefer some flexibility, but also provide the feature file authors with a template to use for common features. You can also use parameters in the attributes file by enclosing the parameter value in quotes. This will allow the author of the attribute file to use the same syntax when testing a good password for successful login.
A developer or QA resource will code test step definitions to match the specifications found in the feature files.
Planning E2E
The solution to solving "List of..." was to match the expected code with a value that would be found in the list, such as "Pennsylvania" found in the state list. This is the type of item to add to the base class, so future programmers facing the "List of..." need not determine the code to confirm that an entry exists in a list, but can simply call a method calls like ListContainsValue(). One approach is to use regex patterns to provide flexibility in how the business analyst writes the test step.
Although it takes a bit more work to use a regex pattern as opposed to text, it makes it easier for the business analyst to write the specifications and test plans. Many editors allow you to define your own code snippets, so creating some for the business analyst's editor can make it easier for the analyst to write the correct syntax, rather than relying on their memory of what the actual wording is. must be. If you have very common test patterns (like requiring a "navigate to...", making sure fields exist, or making sure save and cancel buttons are clicked), then create a template with the right expected syntax so that the spec/test writers use the expected syntax to ensure that the test will run.
Let the person coding the test steps focus on the test, not on the features made by the browser to perform its tasks.
Summary
Karma is a command-line tool used to create a web server that can run your application's test files. Jasmine is the open source library that provides a structured set of methods to perform unit testing and E2E testing with the Angular framework. Reporter is the end-to-end testing framework used by Angular to run your E2E test suite.
It allows your tests to run in an actual browser and behave like an end user. Cucumber is a behavior-based development framework that allows you to test packages written in the Gherkin syntax. The Jasmine testing framework provides many matchers that can be used to compare test results to expected values.
Jasmine also has functions called spies that block any function and trace function calls.
