Add instructions and content

.circleci/config.yml

@@ -0,0 +1,12 @@
+version: 2.1
+orbs:
+  cypress: cypress-io/cypress@1
+workflows:
+  build:
+    jobs:
+      - cypress/run:
+          post-steps:
+            - store_artifacts:
+                path: cypress/videos
+            - store_artifacts:
+                path: cypress/screenshots

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/index_spec.js

@@ -0,0 +1,48 @@
+describe("Featured", () => {
+  it("should add the 'featured' class to the first `section` element on the page", () => {
+    cy.get("section").first().should("have.class", "featured");
+  });
+});
+
+describe("New post", () => {
+  it("should add a new post with the specified content", () => {
+    cy.get("section.posts article")
+      .should("have.length", 3)
+      .last()
+      .within(() => {
+        cy.get("img")
+          .should("have.attr", "src", "./images/paul-gilmore-unsplash.jpg")
+          .should(
+            "have.attr",
+            "alt",
+            "Image of a mountain in front of a lake."
+          );
+        cy.get("h3").should("have.text", "Stop Planning");
+        cy.get("p").should("contain.text", "You -- yes you!");
+        cy.get("aside")
+          .should("exist")
+          .within(() => {
+            cy.get("p")
+              .should("exist")
+              .within(() => {
+                cy.get("strong").should("contain.text", "Read Time");
+                cy.get("span").should("contain.text", "4 Minutes");
+                cy.get("a")
+                  .should("contain.text", "Read more")
+                  .should("have.attr", "href", "#");
+              });
+          });
+      });
+  });
+});
+
+describe("Swap article positions", () => {
+  it("should swap the first and second article in `section.posts`", () => {
+    cy.get("section.posts article")
+      .should("have.length", 3)
+      .then(([first, second]) => {
+        cy.wrap(first).should("contain.text", "Take in the Architecture");
+        cy.wrap(second).should("contain.text", "Games to Play on the Road");
+      });
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// 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)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,28 @@
+// ***********************************************
+// 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 will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+before(() => {
+  cy.visit("./index.html");
+});

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')

index.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Travel Blog</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>My Travel Blog</h1>
+      <nav>
+        <ul>
+          <li>
+            <a href="#">All Posts</a>
+          </li>
+          <li>
+            <a href="#">Contact Me</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <section>
+        <img
+          src="./images/rana-sawalha-unsplash.jpg"
+          alt="Image of travel items."
+        />
+        <article>
+          <h2>What I Bring on My Travels</h2>
+          <p>
+            There are so many different ways to travel. From jumping in your car
+            and just going to taking months to meticulously plan the perfect
+            trip, everyone has their favorite recipe for a life-changing
+            vacation. It's taken some time, but I feel like I finally have the
+            perfect list of what to bring on all of my excursions.
+          </p>
+          <aside>
+            <p>
+              <span><strong>Read Time:</strong> 4 Minutes</span
+              ><a href="#">Read more...</a>
+            </p>
+          </aside>
+        </article>
+      </section>
+      <section class="posts">
+        <article>
+          <img
+            src="./images/jake-blucker-unsplash.jpg"
+            alt="Image of a winding road."
+          />
+          <h3>Games to Play on the Road</h3>
+          <p>
+            Traveling with others is always better than traveling along, in my
+            opinion. I don't mind the quiet, but sometimes it's nice to have a
+            few activities to keep our minds entertained while driving.
+          </p>
+          <aside>
+            <p>
+              <span><strong>Read Time:</strong> 6 Minutes</span
+              ><a href="#">Read more...</a>
+            </p>
+          </aside>
+        </article>
+        <article>
+          <img
+            src="./images/andre-benz-unsplash.jpg"
+            alt="Image of buildings on the coast."
+          />
+          <h3>Take in the Architecture</h3>
+          <p>
+            It's easy to run from place to place when in a new country. I'm
+            guilty of rushing to the nearest museum as soon as I land! But,
+            lately I've found solace in just walking around a new city and
+            enjoying the architecture...
+          </p>
+          <aside>
+            <p>
+              <span><strong>Read Time:</strong> 3 Minutes</span
+              ><a href="#">Read more...</a>
+            </p>
+          </aside>
+        </article>
+      </section>
+    </main>
+    <footer>© 2021 Travel Blog, LLC.</footer>
+  </body>
+</html>