Learn Angular-cli, Firefox and Mocha

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Cascading Style Sheets bring order and beauty to our applications.

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

angular-cli

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Generate components with the Angular CLI

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

Install the Angular CLI to Create and Serve an Angular Application

Mocha is a testing framework that provides structure for unit tests. In this lesson, we will be setting up Mocha with npm and npm scripts, writing a "Hello World" unit test, then writing the code to make the test pass (as an example of Test Driven Development (TDD), with the "red-green-refactor" workflow).

JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the `React` browser tab, inspecting components in parallel with the `Elements` tab, using React components in the console, searching by component name, and debugging component state and props.

Debugging components with the React Developer Tools extension

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

In this lesson we will our `UiModule`, that has a `LayoutComponent`, `HeaderComponent` and `FooterComponent`. 

We generate `UiModule` by running the following command:
```
ng generate module ui --module app
```

This generates the new module and imports it in our `AppModule`.

We'll create the `LayoutComponent` using:
```
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
``` 

We update our `AppRoutingModule` and add this component to our first route to make it visible. 

The `HeaderComponent` and `FooterComponent` are referenced in the LayoutComponent and we implement the actual templates!

Create Application Layout with Components in an Angular CLI Project

In this lesson we will add the `ProductModule`, where our actual application code will live.

```
ng g m product --routing
``` 

We will add 2 routes to `AppRoutingModule`,  the first is a redirect route that redirects any unhandled paths to `products`. The second route is the actual `products` route, that 'lazy-loads' the `ProductModule`.

We use the `ng` command to create the `ProductListComponent` and `ProductDetailComponent`, which are so called 'containers components'.

Container components are responsible for fetching data, handling routes and passing data into the 'presentational components' 

We will add 2 routes to `ProductRoutingModule`,  one to each of our new Container Components.

Lastly we will use  `ActivatedRoute` in `ProductDetailComponent` to fetch the `:id` from the route.

Create Container Components for Retrieving Data in an Angular CLI Project

In this lesson we will create the presentational components for the product list and detail pages. These components define how the data is displayed and are being referenced from the Container components.

The new components are `ProductsComponent` and `ProductComponent`.

After using `ng generate` to generate these components, we will update the `ProductListComponent` to invoke `ProductsComponent` and pass in our local `products` array.

In `ProductsComponent` we loop over each of the items we get from the `@Input() products` and pass each one into our `ProductComponent`.

The `ProductComponent` has 2 `Inputs()`, one for the `Product` and a `boolean` that toggles showing the product details. This is useful because don't want to show product details in the list view.

After the `ProductComponent` is implemented the last step is to reference it from the `ProductDetails` container component. 

Create Presentational Components for Displaying Data in an Angular CLI Project

In this lesson we will create the `ProductsService` that is responsible for the interaction with our API. 

We will inject the `HttpClient` that we get from `@angular/common/http`. To make this working we need to import `HttpClientModule` in our `AppModule`.

We define a `getProducts` and `getProduct` method so we can get a list of products and an single product which we will use in respectively the `ProductList` and `ProductDetail` components. 

In both components we will use the `ngOnInit` lifecycle hook to invoke the methods on the service, and retrieve the data by subscribing to it. 

[Link to product api used in lessons](https://github.com/beeman/egghead-products-api)

Create an Angular Service to Retrieve Data from an API 

In our 'container components' we use the `ngOnInit` lifecycle hook to subscribe to our service. While this works, there is a downside: the components get loaded before the data is available, which results in that we show empty components. This is particularly visible on slow connections.

To fix this we create a `ProductsResolver`, and implement the `resolve` method that fetches the data from the service. In `ProductRoutingModule` we add the `resolve` property to our route, and add make the `ProductsResolver` resolve and store the data in the `products` property.

Inside our `ngOnInit` in `ProductListComponent` we can now subscribe to the route data, which makes the usage of the service in this component obsolete.

We do the same for the `ProductDetailComponent`. After this there are no longer empty components, the router will not navigate after the data is retrieved.

Create Angular Resolvers to retrieve the product data from the Service

In this lesson we will install the latest version of Angular CLI and use the `ng new` command to scaffold out the application.

Scaffold a New Angular App using Angular CLI

In this lesson we will add Bootstrap to our project. This allows us to focus on building our app without having to spend too much time writing custom CSS.

We will use grab the URL too the Bootstrap CSS from [bootstrapcdn.com](https://www.bootstrapcdn.com/)  and add it to our project by adding a `@import url('')` statement to `src/styles.scss`.

Topics

Instructors

Content Type