From 6db4eccee496b941c4c515a7ff8696813dadabc7 Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Tue, 31 Oct 2017 13:03:58 -0400 Subject: [PATCH 1/2] Updates to tutorials structure MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - add box shadow + margin to videos - move ‘what you’ll learn below videos’ - add specific ‘video’ layout that displays videos as larger - remove most of content from introduction :grimacing: - add a ‘contents’ section to main page. --- .../build-and-test-todo/introduction.md | 35 +++++-------------- .../build-and-test-todo/project-setup.md | 13 +++---- .../build-and-test-todo/testing-inputs.md | 14 +++----- themes/cypress/languages/en.yml | 2 +- themes/cypress/layout/video.swig | 26 ++++++++++++++ themes/cypress/source/css/_partial/page.scss | 8 +++++ 6 files changed, 53 insertions(+), 45 deletions(-) create mode 100644 themes/cypress/layout/video.swig diff --git a/source/tutorials/build-and-test-todo/introduction.md b/source/tutorials/build-and-test-todo/introduction.md index 79bc6adbd4..4d3411de5d 100644 --- a/source/tutorials/build-and-test-todo/introduction.md +++ b/source/tutorials/build-and-test-todo/introduction.md @@ -3,36 +3,17 @@ title: Build and test TodoMVC with Cypress comments: false --- -{% note info %} -# {% fa fa-graduation-cap %} What you'll learn - -- How to run Cypress from an `npm` script -- How to Use Cypress to test while developing features -- How to use the Cypress UI to help create your tests -- How to visit pages, interact with elements and make assertions -- How to stub network requests to test your front-end in isolation -- How to use fixtures to run your tests with reliable data -- How to manipulate fixture data in your specs to handle different data requirements -- How to create custom Cypress commands -- How to create data-driven tests to remove duplication -- How to setup and teardown real data to run true end-to-end tests that are reliable and repeatable -- How to run all of your tests in headless mode - -{% endnote %} - - ## Introduction -In this tutorial, we'll walk through building a todo application while testing it with Cypress. We'll look at ways we can leverage Cypress to not only create a test suite for our application, but how it can be used to help us write our tests and guide the implementation of features. - -We'll start with the [project setup](./project-setup.html) where we'll clone a repository that already has the build and server configuration handled. We'll take a look at the project's dependencies and scripts and then we'll jump right into getting Cypress up and running. - -From there, we'll work through creating our first real test and implementing the feature under test as we go. We'll see how to find and interact with elements on the page and how to make assertions about their behavior. +In this tutorial, we will walk through building a "Todo" application while testing it with Cypress. We will look at ways we can use Cypress to not only create a test suite for our application, but help us write our tests and guide feature implementation. -We'll continue to implement features and create tests while digging into the available commands and features that make Cypress so incredible to work with. +By the end of this tutorial, you will have a feel for what it is like to test your application with Cypress while implementing features. You will gain experience with many of the Cypress commands and see how Cypress can help you build your application while creating a great safety net of tests along the way. -We'll build up the entire application using stubbed network requests in our tests. By stubbing the API based on a contract, we can effectively build the front-end for our application and then connect it to the API when it's available. We'll do just that by enabling the API once the front-end is done. Then, we'll dive into how we can code the setup and teardown of real data against the APIs and write some true end to end tests. +We have a lot of ground to cover, so let's get started! -By the end of this tutorial, you will have a feel for what it's like to test your application with Cypress while implementing features. You'll gain experience with many of the Cypress commands and see how Cypress can help you build your application while creating a great safety net of tests along the way. +## Contents -We have a lot of ground to cover, so let's get started! \ No newline at end of file +| | | +| -- | -- | +| {% url "Project setup" project-setup %} | {% fa fa-video-camera %} 3:52 | +| {% url "Testing inputs" testing-inputs %} | {% fa fa-video-camera %} 7:17 | diff --git a/source/tutorials/build-and-test-todo/project-setup.md b/source/tutorials/build-and-test-todo/project-setup.md index 67488f8ede..144788df37 100644 --- a/source/tutorials/build-and-test-todo/project-setup.md +++ b/source/tutorials/build-and-test-todo/project-setup.md @@ -1,15 +1,12 @@ --- title: Project setup comments: false +layout: video +containerClass: tutorial --- -{% note info %} -# {% fa fa-graduation-cap %} What you'll learn +{% video 240554515 %} -- Cloning the starter repository -- Installing project dependencies with `npm` -- How to run Cypress from an `npm` script. -- Visiting a page with Cypress -{% endnote %} +## What you'll learn -{% video 240554515 %} \ No newline at end of file +We will start by clone a starter {% url "repository" https://github.com/cypress-io/cypress-tutorial-build-todo-starter %}. This repo already has the build and server configuration handled. We will take a look at the project's [`npm`](https://www.npmjs.com/) dependencies and scripts, then jump right into getting Cypress up and running. diff --git a/source/tutorials/build-and-test-todo/testing-inputs.md b/source/tutorials/build-and-test-todo/testing-inputs.md index 192873da15..c46fe699b3 100644 --- a/source/tutorials/build-and-test-todo/testing-inputs.md +++ b/source/tutorials/build-and-test-todo/testing-inputs.md @@ -1,16 +1,12 @@ --- title: Testing text inputs comments: false +layout: video +containerClass: tutorial --- -{% note info %} -# {% fa fa-graduation-cap %} What you'll learn +{% video 240554808 %} -- How to use the Cypress UI to assist in building your tests. -- Interacting with elements -- Making assertions -- Using beforeEach to remove duplicated code -- Defining your application's base url through Cypress configuration -{% endnote %} +## What you'll learn -{% video 240554808 %} +We will work through creating our first real test and implementing the feature under test as we go. We will see how to find and interact with elements on the page and how to make assertions about their behavior. We will also look into some best practices like using `beforeEach` and defining our application's `baseUrl` to remove duplicated code. diff --git a/themes/cypress/languages/en.yml b/themes/cypress/languages/en.yml index a8841fbbf6..6bc8911046 100644 --- a/themes/cypress/languages/en.yml +++ b/themes/cypress/languages/en.yml @@ -172,7 +172,7 @@ sidebar: cypress-log: log cypress-server: Server tutorials: - build-and-test-todo: Build and Test Todo MVC + build-and-test-todo: Build and test TodoMVC introduction: Introduction project-setup: Project Setup testing-inputs: Testing Inputs diff --git a/themes/cypress/layout/video.swig b/themes/cypress/layout/video.swig new file mode 100644 index 0000000000..5a0554eeab --- /dev/null +++ b/themes/cypress/layout/video.swig @@ -0,0 +1,26 @@ +
+
+
+
+
+
+
+

{{ page.title }}

+ {{ __('page.improve') }} +
+
+ {{ add_page_anchors(page.content) }} +
+
+ {{ page_nav() }} +
+
+ +
+
+
+
+ {{ partial('partial/sidebar') }} +
+
+
diff --git a/themes/cypress/source/css/_partial/page.scss b/themes/cypress/source/css/_partial/page.scss index bfd3e95b6a..d203ac4ab5 100644 --- a/themes/cypress/source/css/_partial/page.scss +++ b/themes/cypress/source/css/_partial/page.scss @@ -571,6 +571,9 @@ height: 0; max-width: 100%; height: auto; + margin: 2em 0; + border: 1px solid #ddd; + box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3); } .embed-container iframe { @@ -579,4 +582,9 @@ left: 0; width: 100%; height: 100%; + margin: 0; +} + +.tutorial .article-inner { + margin-right: 0; } From 2a9a6f10c44a544575a93efafdd73f3de5afba9c Mon Sep 17 00:00:00 2001 From: Andrew Van Slaars Date: Wed, 1 Nov 2017 09:22:51 -0400 Subject: [PATCH 2/2] clone -> cloning --- source/tutorials/build-and-test-todo/project-setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/tutorials/build-and-test-todo/project-setup.md b/source/tutorials/build-and-test-todo/project-setup.md index 144788df37..f5eb1c04a0 100644 --- a/source/tutorials/build-and-test-todo/project-setup.md +++ b/source/tutorials/build-and-test-todo/project-setup.md @@ -9,4 +9,4 @@ containerClass: tutorial ## What you'll learn -We will start by clone a starter {% url "repository" https://github.com/cypress-io/cypress-tutorial-build-todo-starter %}. This repo already has the build and server configuration handled. We will take a look at the project's [`npm`](https://www.npmjs.com/) dependencies and scripts, then jump right into getting Cypress up and running. +We will start by cloning a starter {% url "repository" https://github.com/cypress-io/cypress-tutorial-build-todo-starter %}. This repo already has the build and server configuration handled. We will take a look at the project's [`npm`](https://www.npmjs.com/) dependencies and scripts, then jump right into getting Cypress up and running.