Become a cloud pro with hands-on experience in developing, styling, and managing a Cloud-Native web application using Tailwind, Google Cloud, and Firebase. No setup, no cleanup, no hassle.

Cloud Native Web Development - A Hands-On Guidebook-01.jpg

cloud-native-web-app.tar.gz

username

email

access_token

repository_name

author

firebase_proj_name

FIREBASE_TOKEN

cypress_key

cypress_projectID

dev_api_key

sapper

add-firebase-sdk

install-firebase-cli

cypress-cli

headless-mode

headless-mode-2

component-tests-1

component-tests-2

testing-library

cypress-dashboard

enable-tests-CI

enable-PR

svelte-intro

tailwindcss-component

tailwindcss-svelte

tailwindcss-svelte2

user-auth1

login-page

admin-page

user-svelte-store

signin-vs-signout

secure-admin-page

redirect

configure-firestore

create-user-interface-1

write-data-1

persist-new-blog-1

read-data-1

security-rules

configure-emulator

test-fcf-locally

new-service-placeholder

dev-integration

test-new-service

markdown2html

write-test-for-service-1

deploy-service-req-one

deploy-service-req-two

speed-up-CI-CD

local-dev

emulator-start

ch-2/lesson-5

ch-3/lesson-3

ch-1/lesson-4

ch-3/lesson-4

ch-3/lesson-5

ch-3/lesson-6

ch-4/lesson-3

ch-4/lesson-4

ch-5/lesson-1/1

ch-5/lesson-1

ch-6/lesson-2

ch-6/lesson-3

ch-8/lesson-3

ch-8/lesson-4

ch-8/lesson-6

ch-8/lesson-7

ch-8/lesson-8

ch-9/lesson-3

ch-9/lesson-4

ch-9/lesson-5

ch-10/lesson-1

ch-10/lesson-2

ch-10/lesson-3

ch-10/lesson-4

ch-10/lesson-5

ch-11/lesson-2

ch-11/lesson-3

ch-11/lesson-4

ch-11/lesson-5

ch-11/lesson-6

ch-11/lesson-7

create-user-interface-2

create-user-interface-3

create-user-interface-4

write-data-2

write-data-3

persist-new-blog-2

read-data-2

read-data-3

ch-12/lesson-2

ch-12/lesson-3

ch-13/lesson-2

ch-13/lesson-3

ch-13/lesson-4

ch-13/lesson-5

ch-13/lesson-6

ch-13/lesson-7

ch-13/lesson-8

ch-13/lesson-9

new-service-placeholder-copy

write-test-for-service-2

write-test-for-service-3

ch-14/lesson-1

This course is a hands-on guidebook to walk you through the journey to creating your first web application in the cloud.

In this course, you will have hands-on experience in developing, styling, hosting, testing, and efficiently managing a complete Cloud-Native web application. Along with this, you will learn how to make the important decision of choosing a technology or tool for your web application.

By the end of this course, you will have a set of expertise in developing cloud native web applications that will help you throughout your career.

Cloud Native Development with Tailwind, Google Cloud and Firebase

# Testing library

<center style="font-weight:bold;"> The more your tests resemble the way your software is used, the more confidence they can give you. </center>

[Testing Library](https://testing-library.com) provides a way to write your tests so that they represent how the users actually use the web application. Let's look at an example we currently have in the
`services/web/cypress/integration/spec.js` file:

```
it("has the correct <h1>", () => {
  cy.contains("h1", "Great success!");
});
```

This test looks for a "heading 1" element and validates that its content is "Great
success!". From a developer's perspective, this makes perfect sense. It tests the
HTML structure and makes sure the correct text appears.

However, an end-user does not open a web application, inspect its source code, and
look for an `<h1>` element to read its content. Their natural behaviour is to open a
web application and look for text. The Testing Library provides helpers to write
tests that match human natural behaviour more closely.

One aspect that is too often forgotten is **how accessible a web application is!** The Testing Library provides a `getByRole` function to find elements that are exposed in the
accessibility tree. Please review the [documentation](https://testing-library.com/docs/guide-which-query) for details on which Testing Library query to use.

## Configuring the testing library

Let's configure the Testing Library and look at an example of how to use it.

Click **Run** and change your working directory to `services/web`.
Run the following command to install the dependency:

```terminal
npm i -D @testing-library/cypress
```

Next, we need to tell Cypress about it in the `services/web/cypress/support/commands.js` file by adding the following list to make the new Testing Library commands available:
```
import "@testing-library/cypress/add-commands";
```

Use `nano` to open the above file.

Lastly, add a new test to the `services/web/cypress/integration/spec.js`
file, right below the one called "has the correct \<h1>". 

> **Note**: There are two tests with the same description in different `describe()` blocks. Make sure you update the correct one:

```
// 'describe' is used to set the context of the test
describe("Sapper template app", () => {
  // https://testing-library.com/docs/guide-which-query
  ...
  // 'it' is used to specify the context and execution of the test
  it("has the correct heading", () => {
  // Finds elements with the given role name and matches the value to the element in the should function.
  cy.findByRole("heading").should("contain", "Great success!");
  });

  ...
});
```

Click **Run** again to save the changes.

Now, follow #concept=runTest#instructions#concept# to run tests.

# Testing library

<center> The more your tests resemble the way your software is used, the more confidence they can give you. </center>

[Testing Library](https://testing-library.com) provides a way to write your tests so that they represent how the users actually use the web application. Let's look at an example we currently have in the
`services/web/cypress/integration/spec.js` file:

```
it("has the correct <h1>", () => {
  cy.contains("h1", "Great success!");
});
```

This test looks for a "heading 1" element and validates that its content is "Great
success!". From a developer's perspective, this makes perfect sense. It tests the
HTML structure and makes sure the correct text appears.

However, an end-user does not open a web application, inspect its source code, and
look for an `<h1>` element to read its content. Their natural behaviour is to open a
web application and look for text. The Testing Library provides helpers to write
tests that match human natural behaviour more closely.

One aspect that is too often forgotten is **how accessible a web application is!** The Testing Library provides a `getByRole` function to find elements that are exposed in the
accessibility tree. Please review the [documentation](https://testing-library.com/docs/guide-which-query) for details on which Testing Library query to use.

## Configuring the testing library

Let's configure the Testing Library and look at an example of how to use it.

Click **Run** and change your working directory to `services/web`.
Run the following command to install the dependency:

```terminal
npm i -D @testing-library/cypress
```

Next, we need to tell Cypress about it in the `services/web/cypress/support/commands.js` file by adding the following list to make the new Testing Library commands available:
```
import "@testing-library/cypress/add-commands";
```

Use `nano` to open the above file.

Lastly, add a new test to the `services/web/cypress/integration/spec.js`
file, right below the one called "has the correct \<h1>". 

> **Note**: There are two tests with the same description in different `describe()` blocks. Make sure you update the correct one:

```
// 'describe' is used to set the context of the test
describe("Sapper template app", () => {
  // https://testing-library.com/docs/guide-which-query
  ...
  // 'it' is used to specify the context and execution of the test
  it("has the correct heading", () => {
  // Finds elements with the given role name and matches the value to the element in the should function.
  cy.findByRole("heading").should("contain", "Great success!");
  });

  ...
});
```

Click **Run** again to save the changes.

Now, follow #concept=runTest#instructions#concept# to run tests.

Learn how to use the Testing Library to test your web application.

Use Testing Library

Introduction

Create a GitHub Project Using Monorepo Template

Set Up Backend Using Sapper Template

Host Your Web App on Firebase

Set Up The Continuous Deployment Pipeline

Local Development

Feature Toggles

Production Monitoring & Rollbacks

Testing

Tailwind CSS

User Authentication

Database - Cloud Firestore

Firebase Local Emulator Suite

Trigger Services Based on Events

Final Tasks

What's Next?

Use Testing Library

Testing library