initial commit

developdenver · Oct 18, 2018 · f33b888 · f33b888
commit f33b888
Show file tree

Hide file tree

Showing 15 changed files with 414 additions and 0 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -0,0 +1,43 @@
+version: 2
+jobs:
+  build_and_test:
+    docker:
+    - image: cypress/base:8
+    steps:
+    - checkout
+    - restore_cache:
+        keys:
+        - v1-npm-deps-{{ checksum "package.json" }}
+        - v1-npm-deps
+    - run:
+        command: |
+          npm install
+          npm run dev
+          npm test
+  deploy:
+    docker:
+      - image: circleci/node:8
+    steps:
+      - checkout
+      - run:
+          name: Setup Heroku
+          command: |
+            chmod +x .circleci/setup_heroku.sh
+            .circleci/setup_heroku.sh
+      - run:
+          name: Deploy Master to Heroku
+          command: |
+            git push https://heroku:[email protected]/stark-sierra-21087.git master
+
+workflows:
+  version: 2
+  build_and_test_and_deploy:
+    jobs:
+    - build_and_test
+    - hold:
+        type: approval
+        requires:
+          - build_and_test
+    - deploy:
+        requires:
+          - hold
diff --git a/.circleci/setup_heroku.sh b/.circleci/setup_heroku.sh
@@ -0,0 +1,22 @@
+#!/bin/bash
+
+set -eu
+
+wget https://cli-assets.heroku.com/branches/stable/heroku-linux-amd64.tar.gz
+sudo mkdir -p /usr/local/lib /usr/local/bin
+tar -xvzf heroku-linux-amd64.tar.gz -C /usr/local/lib
+sudo ln -s /usr/local/lib/heroku/bin/heroku /usr/local/bin/heroku
+
+cat > ~/.netrc << EOF
+machine api.heroku.com
+	login $HEROKU_LOGIN
+	password $HEROKU_API_KEY
+machine git.heroku.com
+	login $HEROKU_LOGIN
+	password $HEROKU_API_KEY
+EOF
+
+chmod 600 ~/.netrc
+
+# Add heroku.com to the list of known hosts
+ssh-keyscan -H heroku.com >> ~/.ssh/known_hosts
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+.DS_Store
diff --git a/README.md b/README.md
@@ -0,0 +1,29 @@
+# Getting Started with DevOps
+
+Continuous Integration and Continuous Deployment is essential for companies that want their developers to be able to deploy code quickly, efficiently, and with minimal application downtime. 
+
+In this workshop, you will get a taste of what it takes to setup a CI/CD pipeline using CircleCI and Heroku. For the workshop, we will provide you with a working application with a functional test suite. 
+
+By the end of this workshop, participants will be able to:
+1. Manually run the application test suite
+1. Manually deploy the application to Heroku
+1. Configure CircleCI to run your test suite 
+1. Configure CircleCI to deploy your app to Heroku if all tests are passing
+
+## Prerequisite
+* A [github account](github.com)
+* A [heroku account](heroku.com)
+
+## Steps
+1. Sign up for CircleCi with your GitHub account
+2. Connect Desired Repo
+3. Create .circleci directory
+4. Create yaml file in .cirecleci directory
+5. Configure files
+    - Copy and paste CircleCi example yaml
+    - Change docker image type to cypress/base:8
+    - Yarn Install or NPM Install
+    - Add Node Server Steps
+
+
+
diff --git a/app/images/phptravels-logo.png b/app/images/phptravels-logo.png
diff --git a/app/index.html b/app/index.html
@@ -0,0 +1,90 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>PHP TRAVELS | DEMO</title>
+</head>
+
+<body>
+    <header>
+        <img src="./images/phptravels-logo.png" alt="Logo">
+        <div class="title">
+            <nav class="dropdown">
+                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+                    Menu <span class="caret">&nbsp;</span>
+                </button>
+                <ul class="dropdown-menu">
+                    <li>
+                        <a href="demo.html">Demo</a>
+                    </li>
+                    <li>
+                        <a href="order.html">Order</a>
+                    </li>
+                    <li class="dropdown-submenu">
+                        <a class="nested" href="#">Product<span class="caret">&nbsp;</span></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="product.html">Product</a></li>
+                            <li><a href="#">Documentation</a></li>
+                            <li><a href="#">Features</a></li>
+                            <li><a href="#">Technology</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </nav>
+            <h2>Application Test Drive.</h2>
+        </div>
+    </header>
+    <section>
+        <h3>Heading 1</h3>
+        <a href="/">Check out our services</a>
+    </section>
+    <section>
+        <h3>Heading 2</h3>
+        <a href="/">Read our user reviews</a>
+    </section>
+    <section>
+        <h3>FAQ</h3>
+        <ul>
+            <li>
+                <h4>Question 1</h4>
+                <p>Answer 1!</p>
+            </li>
+            <li>
+                <h4>Question 2</h4>
+                <p>Answer 2!</p>
+            </li>
+            <li>
+                <h4>Question 3</h4>
+                <p>Answer 3!</p>
+            </li>
+            <li>
+                <h4>Question 4</h4>
+                <p>Answer 4!</p>
+            </li>
+            <li>
+                <h4>Question 5</h4>
+                <p>Answer 5!</p>
+            </li>
+            <li>
+                <h4>Question 6</h4>
+                <p>Answer 6!</p>
+            </li>
+        </ul>
+    </section>
+    <script>
+        $(document).ready(function () {
+            $('.dropdown-submenu a.nested').on("click", function (e) {
+                $(this).next('ul').toggle();
+                e.stopPropagation();
+                e.preventDefault();
+            });
+        });
+    </script>
+</body>
+
+</html>
diff --git a/app/order.html b/app/order.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title></title>
+  </head>
+  <body>
+
+  </body>
+</html>
diff --git a/app/style.css b/app/style.css
@@ -0,0 +1,50 @@
+body {
+    padding: 1rem;
+}
+
+header {
+    margin-bottom: 1rem;
+}
+
+.title {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+}
+
+.dropdown-toggle {
+    min-width: 10rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-weight: 700;
+}
+
+h4 {
+    font-weight: 300;
+    font-size: 1.5rem;
+}
+
+section {
+    background-color: #ddd;
+    padding: 1rem;
+    margin-bottom: 1rem;
+}
+
+section li {
+    margin-bottom: 1rem;
+}
+
+.dropdown-submenu {
+    position: relative;
+}
+
+.dropdown-submenu .dropdown-menu {
+    top: 0;
+    left: 100%;
+    margin-top: -1px;
+}
diff --git a/cypress.json b/cypress.json
@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "integrationFolder": "tests",
+  "videoRecording": false
+}
diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
diff --git a/cypress/support/index.js b/cypress/support/index.js
@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
diff --git a/package.json b/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "Version-1",
+  "version": "1.0.0",
+  "description": "Using Circleci to Run End to End Tests",
+  "main": "index.js",
+  "scripts": {
+    "start": "light-server -s app --port 3000",
+    "dev": "light-server -s app --port 3000 & wait-on http://localhost:3000",
+    "test": "npx cypress run"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "cypress": "^2.1.0"
+  },
+  "dependencies": {
+    "light-server": "^2.5.1",
+    "wait-on": "^3.1.0"
+  }
+}
diff --git a/rubric.md b/rubric.md
@@ -0,0 +1,22 @@
+## Style
+
+* [ ] No wait commands with arbitrary times
+* [ ] Written as one test
+
+## Tests
+
+* [ ] Tests pass
+* [ ] Asserts that the logo is `./images/phptravels-logo.png`
+* [ ] Asserts that the header says "Application Test Drive."
+Asserts these navigation links exist:
+    * [ ] Demo
+    * [ ] Order
+    * [ ] Product
+Asserts the The Product link has these items:
+    * [ ] Documentation
+    * [ ] Features
+    * [ ] Technology
+* [ ] Asserts the FAQ has 6 items
+* [ ] Clicks the order link
+* [ ] Asserts URL is `/`
+