Learn Elixir, Leaflet and Mocha

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

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

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

These videos include the introductory steps to writing your first Elixir function and beginning to understand some key concepts in Elixir that make it unique. 

Some of those concepts include:
- the Mix build tool
- project structure
- collections of functions written in modules
- function *arity*
- pattern matching and common uses for it
- the pipe operator

Elixir is a dynamic, functional language designed for building scalable and maintainable applications.

Elixir leverages the Erlang VM, known for running low-latency, distributed and fault-tolerant systems, while also being successfully used in web development and the embedded software domain.

elixir

Getting Started with Elixir

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

chai

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

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

Leaflet makes creating maps in the browser *dead simple*. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

Get Started with LeafletJS Mapping

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

Adding Shapes to Maps with Leaflet and GeoJSON

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

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

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

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Interactive Leaflet Maps with GeoJSON data

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

The pipe operator is an easy to use and powerful feature of Elixir. It takes the output from the expression on the left, and automatically passes it as the first argument to the function on the right. This is especially useful when chaining together multiple function calls or data transformations. Using the pipe operator results in code that's easier to read, write and refactor.

Chain Function Calls with the Pipe Operator in Elixir

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

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

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.

Mock a function's return value using a Sinon stub

Sometimes when writing a unit test, you know that the module you're testing imports a module that you would like to observe, or at the very least mock to prevent side effects like network activity or file system operations.

For JavaScript unit tests that run in Node, we can hijack the built-in `require` function by using the [`proxyquire`](https://www.npmjs.com/package/proxyquire) module, which allows us to mock one or more modules that are second-class dependencies in our unit test, replacing them with whatever we want.

This means we could replace functions with [no-ops](https://en.wikipedia.org/wiki/NOP_%28code%29) to prevent side effects, or replace them with [Sinon spies](https://egghead.io/lessons/mocha-unit-test-a-function-that-invokes-a-callback-with-a-sinon-spy) to observe the inner workings of the module you're testing.

In this video, we'll demonstrate the basics of using Proxyquire to prevent and observe a file system operation.

Mock a Node module's dependencies using Proxyquire

Bootstrap a new Elixir project using Mix (a build tool included when you install Elixir), with its built in project generation.

Additional resources:
- [Official introduction to Mix](https://elixir-lang.org/getting-started/mix-otp/introduction-to-mix.html#our-first-project)

Generate a new Elixir project using Mix

Elixir code is organized into groups of functions called modules. You can create your own modules and built on top of predefined modules that are a part of Elixir by default.

Additional resources: 
- [Getting started with Modules and function from Elixir docs](https://elixir-lang.org/getting-started/modules-and-functions.html)

Write a New Function Inside of an Elixir Module

The syntax to pass arguments into functions is akin to many other languages. Elixir functions are uniquely recognized when running based off of the number of arguments passed in (a term called *arity*). This means you can define functions with the same name, so long as a different number of arguments is passed in.

Arity is a key concept to be aware of when reading documentation and writing your own code.

Additional resources:
- [Information about arity](https://elixir-lang.org/getting-started/modules-and-functions.html#function-capturing)
- [Default arguments in functions](https://elixir-lang.org/getting-started/modules-and-functions.html#default-arguments)

Pass arguments into Elixir functions and understand arity

In this lesson, you will learn how to add a map to your React application using React Leaflet. We will walk through importing and configuring the Map and TileLayer components from React Leaflet to set up the new map.