Learn Mocha, Polymer and Xstream

Polymer is a framework created at Google for building reusable web components.

We use HTML elements every day such as div, a, button, form, and table. All HTML elements provide some sort of API of attributes, properties, methods and events that we use to manipulate them. Generally, web elements are styled in a particular way by default, and also allow us to customize their styling with CSS.

Polymer allows you to build fully custom web elements of your own for more complex components composed of the building blocks you are used to with the standard set of HTML elements.

This course is an introduction to Polymer, and should get you started building your own customizable web elements that you can use on their own, or even with your favorite framework like Angular or React!

The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements.

polymer

Creating Custom Web Elements with Polymer 2

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

Create Event Listeners in Polymer Elements

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

Observe Property Changes on a Custom Polymer Element

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

Use Lifecycle Callbacks On Custom Polymer Elements

Polymer provides us a variety of data-binding configurations.  In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

Data Bind Two Polymer Elements

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

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)

We can utilize the "fire" method from within our custom element to execute a custom event.  In this lesson we'll create a custom event and pass useful data along with the event to the consumer of our element.

Execute Custom Events in Polymer

In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

Iterate over a Collection with Polymer's dom-repeate

In this lesson we'll install Polymer using bower and explore creating our first custom element. We will use the dom-module to create our first Element and add an event listener to watch for the `keyup` event.

Create a Custom Element using Polymer

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

In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.

Style Custom Elements in Polymer

Polymer allows us to extend a native HTML element's UI or functionality.  In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.

Extend Native HTML Elements with Polymer

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

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

Understand Declared Property Basics in Polymer

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

Unit testing functions that invoke callbacks can require a lot of setup code. Using `sinon.spy` to create a fake callback function can simplify your unit tests while still allowing you to observe the output of the function you're testing.

Unit Test a Function that Invokes a Callback with a Sinon Spy

When testing functions that make HTTP requests, it's not preferable for those requests to actually run. Using the `nock` JavaScript library, we can mock out HTTP requests so that they don't actually happen, control the responses from those requests, and assert when requests are made.

Mock an HTTP request using Nock while unit testing

When mocking a JavaScript function during a unit test, it can be helpful to force a mock function to return a value of your choosing. This allows you to verify that functions you're testing will behave correctly for every possible use case.

Much like [`sinon.spy()`](https://sinonjs.org/releases/v7.0.0/spies/), [`sinon.stub()`](https://sinonjs.org/releases/v7.0.0/stubs/) creates a mock function that prevents a real function from running. But, unlike `spy`, it also allows you to declare what value you'd like the mock function to return.

Topics

Instructors

Content Type