npm install -g @angular/cli@15

ng new ng-demo

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.1.6
Node: 18.14.0
Package Manager: npm 9.3.1
OS: darwin arm64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1501.6 (cli-only)
@angular-devkit/core         15.1.6 (cli-only)
@angular-devkit/schematics   15.1.6 (cli-only)
@schematics/angular          15.1.6 (cli-only)

....

Angular: 15.1.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.6
@angular-devkit/build-angular   15.1.6
@angular-devkit/core            15.1.6
@angular-devkit/schematics      15.1.6
@angular/cli                    15.1.6
@schematics/angular             15.1.6
rxjs                            7.8.0
typescript                      4.9.5

ng serve

$ ng test
...
...: Executed 3 of 3 SUCCESS (0.061 secs / 0.055 secs)

In a terminal window, cd into your project’s directory and run the following command to create a search component.

Open src/app/search/search.component.html and replace its default HTML with the following:

Add a query property to src/app/search/search.component.ts. While you’re there, add a searchResults property and an empty search() method.

In src/app/app-routing.module.ts, modify the routes constant to add SearchComponent as the default:

Run ng serve again you will see a compilation error.

To solve this, open src/app/app.module.ts and add FormsModule as an import in @NgModule:

Now you should be able to see the search form.

If yours looks different, it’s because I trimmed my app.component.html to the bare minimum.

If you want to add styling for this component, open src/app/search/search.component.css and add some CSS. For example:

This section has shown you how to generate a new component and add it to a basic Angular application with Angular CLI. The next section shows you how to create and use a JSON file and localStorage to create a fake API.

To get search results, create a SearchService that makes HTTP requests to a JSON file. Start by generating a new service.

Create src/assets/data/people.json to hold your data.

Modify src/app/shared/search/search.service.ts and provide HttpClient as a dependency in its constructor.

In this same file, create a getAll() method to gather all the people. Also, define the Address and Person classes that JSON will be marshalled to.

To make these classes easier to consume by your components, create src/app/shared/index.ts and add the following:

The reason for creating this file is so you can import multiple classes on a single line rather than having to import each individual class on separate lines.

In search.component.ts, add imports for these classes.

You can now add a proper type to the searchResults variable. While you’re there, modify the constructor to inject the SearchService.

Then update the search() method to call the service’s getAll() method.

At this point, if your app is running, you’ll see the following message in your browser’s console.

To fix the “No provider” error from above, update app.module.ts to import HttpClientModule.

Now clicking the search button should work. To make the results look better, remove the <pre> tag and replace it with a <table> in search.component.html.

Then add some additional CSS to search.component.css to improve its table layout.

Now the search results look better.

But wait, you still don’t have search functionality! To add a search feature, add a search() method to SearchService.

Then refactor SearchComponent to call this method with its query variable.

This won’t compile right away.

Since query will always be assigned (even if it’s empty), change its variable declaration to:

This is called a definite assignment assertion. It’s a way to tell TypeScript “I know what I’m doing, the variable will be assigned.”

Now search results will be filtered by the query value you type in.

This section showed you how to fetch and display search results. The next section builds on this and shows how to edit and save a record.

One thing you might notice is you can clear any input element in the form and save it. At the very least, the name field should be required. Otherwise, there’s nothing to click on in the search results.

To make name required, modify edit.component.html to add a required attribute to the name <input> and bind it to Angular’s validation with #name="ngModel". Add a <div> next to the field to display an error message when validation fails.

You’ll also need to wrap everything in a <form> element. Add <form> after the <h3> tag and close it before the last </div>. You’ll also need to add an (ngSubmit) handler to the form, give it the name of editForm, and change the save button to be a regular submit button that’s disabled when the form is invalid.

After making these changes, the name field will be required.

In this screenshot, you might notice the address fields are blank and the save button is enabled. This is explained by the error in your console.

To fix this, add a name attribute to all the address fields. For example:

Now values display in all fields, name is required, and save is disabled when the form is invalid.

To learn more about forms and validation, see Angular’s Validating form input documentation.

If you run ng test, you’ll likely get failures for the components and service you created. These failures will be solved as you complete the section below. The ng test command will start a process that listens for changes so all you need to do is edit/save files and tests will be automatically run again.

If you changed the app.component.html template as I did, you’ll need to modify app.component.spec.ts to account for the change in HTML. Change its last test to look for an <h1> element and the welcome message inside it.

Now this test should pass.

Modify src/app/shared/search/search.service.spec.ts and set up the test’s infrastructure (a.k.a. TestBed) using HttpClientTestingModule and HttpTestingController.

Now, you will likely see some errors about the test stubs that Angular CLI created for you. You can ignore these for now.

HttpTestingController allows you to mock requests and use its flush() method to provide response values. Since the HTTP request methods return an Observable, you can subscribe to it and create expectations in the callback methods. Add the first test of getAll() to search.service.spec.ts.

The test below should be on the same level as beforeEach.

While you’re there, add an afterEach() to verify requests.

Add a couple more tests for filtering by search term and fetching by id.

To unit test the SearchComponent, you can mock the methods in SearchService with spies. These allow you to spy on functions to check if they were called.

Create src/app/shared/search/mocks/routes.ts to mock Angular’s Router and ActivatedRoute.

With this mock in place, you can TestBed.configureTestingModule() to set up SearchComponent to use it as a provider. In the second beforeEach(), you can see that the search() method is spied on and its results are mocked. The response isn’t important in this case because you’re just unit testing the SearchComponent.

Add two tests, one to verify a search term is used when it’s set on the component, and a second to verify search is called when a term is passed in as a route parameter.

Update the test for EditComponent, verifying fetching a single record works. Notice how you can access the component directly with fixture.componentInstance, or its rendered version with fixture.nativeElement.

You should see "`Executed 11 of 11 SUCCESS" in the shell window that’s running ng test. If you don’t, try canceling the command and restarting.

To test if the application works end-to-end, you can write tests with Cypress. These are also known as integration tests since they test the integration between all layers of your application.

You can use the official Cypress Angular Schematic to add Cypress to your Angular project.

When prompted to proceed and use Cypress for ng e2e, answer “Yes”.

This will add Cypress as a dependency and create configuration files to work with Angular and TypeScript. Rename cypress/e2e/spec.cy.ts to home.cy.ts and change it to look for the title of your app.

Then, run ng e2e. This will compile your app, start it on http://localhost:4200, and launch the Cypress Electron app.

If you click on the file name, it’ll launch a browser and run the test. You can use this feature to step through your tests, find selectors for elements, and much more. You can learn more about Cypress' features at Setting up Cypress for an Angular Project.

Personally, I prefer the Protractor experience where you could just run the command, it’d run all the tests, and the user doesn’t need to interact. You can do this with Cypress too!

The Cypress Angular Schematic added a few scripts to your package.json:

To use the no-interaction approach, you’ll need to start your app:

Then, run the Cypress tests for it in another window:

The npm run cypress:run command will run a headless browser, so you won’t see anything happening on your screen.

If you want to see the tests run, append -- --browser chrome --headed to the command. Add this to your package.json if you want to make it the default. See Cypress' launching browsers documentation to see a list of supported browsers.

You can also install concurrently so you can run multiple tasks with one command.

Then, add a cy:run script to your package.json:

Then, you can run npm run cy:run to start your app and continuously run end-to-end tests on it when you change files.

Create another end-to-end test in cypress/e2e/search.cy.ts to verify the search feature works. Populate it with the following code:

Create a cypress/e2e/edit.cy.ts test to verify the EditComponent renders a person’s information and that their information can be updated.

With your app running, execute npm run cypress:run to verify all your end-to-end tests pass. You should see a success message similar to the one below in your terminal window.

If you made it this far and have all your specs passing - congratulations! You’re well on your way to writing quality code with Angular and verifying it works.

You can see the test coverage of your project by running ng test --no-watch --code-coverage.

You’ll see a print out of code coverage in your terminal window.

You can also open coverage/ng-demo/index.html in your browser.

You might notice that the EditComponent could use some additional coverage. If you feel the need to improve this coverage, please create a pull request!

If you’ve checked your project into GitHub, you can use GitHub Actions.

Create a .github/workflows/main.yml file. Add the following YAML to it. This will run both unit tests and integration tests with Cypress.

Check it in on a branch, create a pull request for that branch, and you should see your tests running.

If you’ve checked your project into source control, you can use Jenkins to automate testing.

1. Create a Jenkinsfile in the root directory and commit/push it.

   node {
       def nodeHome = tool name: 'node-18', type: 'jenkins.plugins.nodejs.tools.NodeJSInstallation'
       env.PATH = "${nodeHome}/bin:${env.PATH}"
   
       stage('check tools') {
           sh "node -v"
           sh "npm -v"
       }
   
       stage('checkout') {
           checkout scm
       }
   
       stage('npm install') {
           sh "npm install"
       }
   
       stage('unit tests') {
           sh "npm test -- --watch=false"
       }
   
       stage('cypress tests') {
           sh "npm start &"
           sh "npm run cypress:run"
       }
   }

2. Install Jenkins on your hard drive and start it.

3. Login to Jenkins at http://localhost:8080 and install the Node.js plugin.

4. Go to Manage Jenkins > Global Tool Configuration > NodeJS. Install and configure the name of your Node.js installation to match your build script.

5. Create a new project with Dashboard > New Item > Pipeline > Pipeline script from SCM (near the bottom). Point it at your project’s repository and specify the main branch.

6. Click Save, then Build Now on the following screen.