Learn Android, Apollo and Cypress

One of the most important — but most ignored — practices for web developers is performing end-to-end testing on applications before they go live into production. You know: making sure they work like they’re supposed to. But testing can be tedious, and definitely not fun.

In this course, Brett Cassette will show you how you can test all layers of your application stack, simultaneously, with Cypress. When you use Cypress, it’s like having a robot that uses your app the way a real user would. Cypress reports if things work the way you designed them to — and if they don’t — every step of the way. And it’s fun.

After completing this course, you’ll be ready to apply the same E2E testing principles to your own applications. Stop leaning on your QA department (if it exists) to stress-test your application, and ship your app knowing it’s ready. 


Fast, easy and reliable testing for anything that runs in a browser.

cypress

Test Production Ready Apps with Cypress

Imagine the following.

You join a new project and after getting access to the repo you notice that there's no tests.

You decide to ask the team whether they are in different repo or something and unfortunately the answer is:

>We don't have any tests, we didn't have the time.

😐

In this collection we're going to learn how to add e2e tests with cypress.io to an existing React app in order to do two things:

- 🌟 Ensure that our app currently works as intended
- 🌟 Allow us to add features to it with a technique called "Cypress Driven Development" 

In less than 20 minutes we're going to go through:

- ⚡️Adding cypress.io setup to an existing project
- ⚡️Testing search functionality with `data-cy` properties
- ⚡️Using "Cypress Driven Development" to add a new feature to an app
- ⚡️Use Cypress UI to debug an API response
- ⚡️How to use `cy.only` and `cy.skip` in order for us to build our e2e test suite faster

and much more!

Add e2e tests with cypress to a React application

The tools available for unit testing have come a long way. While testing may never be “easy”, the available tools have certainly moved testing closer to the simple end of the spectrum. Full end to end testing hasn’t quite kept the same pace and as a result many applications are testing manually and often by users in production. Cypress provides a testing environment that makes end-to-end testing fast and reliable with a simple API that makes creating automated unit tests for your web applications a no-brainer.


End to End testing with Cypress

GraphQL is a fan favorite for good reason. It lets a client make specific, complex, and/or aggregate queries for data, and it’s user-friendly to boot.

If you’ve been meaning to learn GraphQL and start harnessing its powers, this is a great place to start.

This course is for GraphQL newbies with a basic understanding of React. It focuses on the client-side implementation of GraphQL usage using the Apollo client.

We’ll start with a guide on how to add the Apollo client to an existing project, then move on using the Query and Mutation components to fetch and manipulate data using a GraphQL API.

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

GraphQL Data in React with Apollo Client

Your app can react in various way on different network conditions. Cypress has a great toolset for setting up those conditions, which enable you to test your app thoroughly. That way you can ship your app with confidence.

Cypress’ .intercept() command is one of the most fun command to use. And it’s also one of the most useful.

Especially when you are done with all your happy paths and want to increase your test coverage with some edge cases.

These edge cases can mean different data, headers or server behavior. You can modify all of these, dynamically or with a static fixture prepared beforehand

Test Network Edge Cases with cy.intercept() Command in Cypress

Most developers would raise an eyebrow if they saw database queries being done in a for-loop, but GraphQL provides just enough abstraction that it isn't always intuitive exactly how many times each resolver fires at scale, nor is it obvious how to batch operations efficiently and still return the correct results to the correct consumer.

You'll learn how to use the GraphQL Data Loader pattern to improve the performance of your application, and solve scaling issues before they become a problem.

To do this, we'll first implement our own naive version of the pattern to understand why the API is shaped how it is. Then we will switch over to the official DataLoader package and explore the benefits further.

## Skills you'll Gain

- Implement a cache layer to optimize your requests
- Batch requests so your Database isn't overloaded
- Build a performant GraphQL API

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

Use GraphQL Data Loaders to Prevent Scaling Issues by Batching & Caching Database Requests

At the core of a good client-side GraphQL library is a cache. The cache is very important for improving the efficiency of your data retrieval and providing your users with a clean user experience.

In this course, we're going to see how Apollo's powerful cache helps easily solve complex UI problems, such as pagination, handling loading and error states, optimistic updates, and minimizing network requests.

We'll start from the basics, and look at how to make queries and mutations, but then we'll look at how the cache is behind most of Apollo's immediate benefits. We'll explore in-depth how it works, how it stores data, and how we can manually modify it manually for advanced scenarios.

Even if your backend doesn't fully support GraphQL yet, we'll look at how to write GraphQL queries in your components that retrieve local client state under the hood - or that can even make REST API calls.

Manage State in React Apps with Apollo Client and GraphQL

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

React fully supports building accessible websites, often by using standard HTML techniques.

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for auditing react apps for accessibility. In this course, you will go through different tools and libraries to audit components in a React app.

Auditing React Apps for Accessibility 

**Get started building dynamic apps with GraphQL and Vue3.**

As your app scales, so does the complexity of managing your routes and API endpoints. 

It gets tiresome. 

But this aspect of web development can be streamlined considerably! 

GraphQL is a powerful tool for querying and mutating your data. In this course, we are going to create a Vue3 app that leverages GraphQL to create a dynamic front end.

But what does GraphQL *do*? 

Its power comes from giving you a *single* endpoint that you make all your queries to. Instead of making a request to a specific endpoint and getting a fixed response, you can write flexible queries to a single endpoint.

![REST vs GraphQL diagram](https://res.cloudinary.com/dg3gyk0gu/image/upload/v1638989029/course-resources/create-a-graphql-powered-vue-3-application/rest_vs_graphql.png)

Vue3 has some great new features that we will be exploring, such as the setup script syntax. But you won't just be exploring Vue3's new features, we will be building a dynamic front end with an index, view pages generated from data, and forms.

To make our frontend dynamic, we will be powering it with GraphQL. We start with the basics by creating queries but we move on to more advanced topics such as query params, mutations, and pagination.

To actually use GraphQL in our Vue app we will be using the Vue Apollo Client. Which gives us convenient methods for making queries, getting the data back into the client, and handling errors.

## Gain These Skills

- Add GraphQL to a Vue 3 project
- Query and mutate data with GraphQL in Vue 3
- Create data-driven views with Apollo client
- Handle routing within a Vue 3 project
- Implement optimistic updates and infinite scroll

## Prerequisites

Some entry-level knowledge on Vue and GraphQL is recommended, but this course is beginner-friendly enough to where it isn't a strict requirement.

If you want to build a deeper foundation for both Vue and GraphQL we have a couple of awesome courses that you can hack through. 

For Vue, check out **[The Beginner's Guide to Vue 3](https://egghead.io/courses/the-beginner-s-guide-to-vue-3-1c46da8b),** which is also by Kevin. It's great for both newcomers to web dev and veterans alike. 

And for GraphQL, work through **[GraphQL Query Language](https://egghead.io/courses/graphql-query-language)** from Eve Porcello. Eve literally wrote the book on learning GraphQL and her course is similarly top quality. 

## What's Next?

Progressive Web Apps are a more advanced topic, and converting an existing Single Page **Vue** App into one makes for an excellent follow-up project. **->** [Offline-First Progressive Web Apps (PWA) in Vue.js](https://egghead.io/courses/offline-first-progressive-web-apps-pwa-in-vue-js)

If you want to take your **GraphQL** game to the next level, then becoming an expert in designing GraphQL schemas is the way to go. **->** [Designing GraphQL Schemas](https://egghead.io/courses/designing-graphql-schemas-99db)

And I know the following recommendation is a React course but *it really is that good*. You will learn some **advanced** techniques that will be applicable to Vue or any other Apollo compatible framework that you work with. **->** [Manage State in React Apps with Apollo Client and GraphQL](https://egghead.io/courses/manage-state-in-react-apps-with-apollo-client-and-graphql-a45b3b89)

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create a GraphQL Powered Vue 3 Application

If we want to do full end-to-end testing, then we need to seed our database into a reliable state at the start of every test. In this lesson, we'll learn how to build a Cypress plugin that updates the data in our database.

Seed Your Database in Cypress

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

Translate common Java/Android APIs into NativeScript for Angular Android apps

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

Develop a consistent plugin api across your Android and iOS NativeScript app

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to [install tns-platform-declarations](https://www.npmjs.com/package/tns-platform-declarations) to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

Prepare for native iOS and Android api intellisense with NativeScript

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the [Google I/O 2016 clock](https://github.com/lypeer/GoogleClock). Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the [Android app manifest file](https://developer.android.com/guide/topics/manifest/manifest-intro.html).

Build a custom NativeScript view component for Android

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.


Writing Platform-Specific Components for iOS and Android in React Native

In this lesson, we will start with a list of content from a React Native FlatList that we will then transform into a three-per-row grid.

Display Contents of a React Native FlatList as a Grid

In this lesson, you will learn how to use the `SafeAreaView` component to avoid the sensor cluster (the notch) and home activity indicator on the iPhone X.

Use the SafeAreaView Component in React Native for iPhone X Compatibility

Adding Cypress to a project is a simple npm install away. We won’t need any global dependencies beyond node and npm to get started with Cypress. In this lesson we’ll look at our existing application, add Cypress as a dev dependency with npm and fire it up for the first time to have a look around.

Add Cypress to an Existing Application with npm

In order to test our application, Cypress will need to visit it in the browser. In this lesson we’ll see how we can visit our application with Cypress and how to configure a baseUrl for Cypress to make that even easier.

Visit a page with Cypress

In this lesson, we’ll add tests that finds a focused input. We’ll use Chrome’s dev tools from inside the Cypress runner to inspect the element and update our test to verify that the expected element is focused. We’ll see how Cypress can be used to test drive our application by creating a failing test and updating our application code to make it pass.


Search

Search Results