Linting and examples (#1207)

* lint fixes

* add new examples

cy_scripts/snippet-creator/cli.js

@@ -40,6 +40,7 @@ const start = (argv) => {
 
       if (!inExists) {
         debug('file provided was invalid:', inputFile)
+
         return throwKnownError(errors.inputFileNoExist(inputFile))
       }
 
@@ -66,19 +67,23 @@ const start = (argv) => {
 
 const handleKnownErrors = (err) => {
   let errorText
+
   if (err.known) {
     errorText = (`[Snippet Creator] Error: ${err.message}`)
   } else {
     errorText = (`[Snippet Creator] Unexpected Error: ${err.message}
     ${err.stack}
     `)
   }
+
   log.err(errorText)
+
   return errorText
 }
 
 const throwKnownError = (msg) => {
   const err = new Error(msg)
+
   err.known = true
   throw err
 }

cy_scripts/snippet-creator/convert.js

@@ -7,6 +7,7 @@ const ora = require('ora')
 const convert = (inFile, outVid, outImg) => {
   let filesize = 0
   const spinner = ora('Creating .mp4 - 0kB').start()
+
   return Promise.all([
     new Promise((resolve, reject, onCancel) => {
       const ff = ffmpeg()
@@ -21,6 +22,7 @@ const convert = (inFile, outVid, outImg) => {
       .save(outVid)
       .on('end', () => {
         debug('successful')
+
         return resolve()
       })
       .on('error', ffError(reject))
@@ -69,6 +71,7 @@ const ffError = (reject) => (err, stdout, stderr) => {
       ${stdout}
       ${stderr}
       `
+
   return reject(err)
 }
 

cypress/support/commands.js

@@ -1,39 +0,0 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create the custom command: 'login'.
-//
-// The commands.js file is a great place to
-// modify existing commands and create custom
-// commands for use throughout your tests.
-//
-// You can read more about custom commands here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-// Cypress.addParentCommand("login", function(email, password){
-//   var email    = email || "joe@example.com"
-//   var password = password || "foobar"
-//
-//   var log = Cypress.Log.command({
-//     name: "login",
-//     message: [email, password],
-//     consoleProps: function(){
-//       return {
-//         email: email,
-//         password: password
-//       }
-//     }
-//   })
-//
-//   cy
-//     .visit("/login", {log: false})
-//     .contains("Log In", {log: false})
-//     .get("#email", {log: false}).type(email, {log: false})
-//     .get("#password", {log: false}).type(password, {log: false})
-//     .get("button", {log: false}).click({log: false}) //this should submit the form
-//     .get("h1", {log: false}).contains("Dashboard", {log: false}) //we should be on the dashboard now
-//     .url({log: false}).should("match", /dashboard/, {log: false})
-//     .then(function(){
-//       log.snapshot().end()
-//     })
-// })

lib/helpers.js

@@ -18,8 +18,8 @@ function addPageAnchors (str) {
     const id = $(this).attr('id')
 
     $(this)
-      .addClass('article-heading')
-      .append(`<a class="article-anchor" href="#${id}" aria-hidden="true"></a>`)
+    .addClass('article-heading')
+    .append(`<a class="article-anchor" href="#${id}" aria-hidden="true"></a>`)
   })
 
   return $.html()

lib/url_generator.js

@@ -25,6 +25,7 @@ if (process.env.REDIS_URL) {
 } else {
   debug('storing external HREF checks in memory')
 }
+
 debug('caching HREF checks for %s', pluralize('hour', CACHE_HOURS, true))
 
 const startsWithHttpRe = /^http/
@@ -99,6 +100,7 @@ function validateExternalUrl (href, source) {
   // don't check download.cypress.io
   if (hostname === 'download.cypress.io') {
     debug('assuming %s is working (from %s)', hostname, href)
+
     return Promise.resolve()
   }
 
@@ -115,6 +117,7 @@ function validateExternalUrl (href, source) {
   hrefs.push(href)
 
   debug('validate %s by requesting it', href)
+
   return request({
     method: hash ? 'GET' : 'HEAD', // if we have a hash, use GET, else HEAD
     url: href,
@@ -242,7 +245,9 @@ function validateLocalFile (sidebar, href, source, render) {
       // ensure it has the hash present!
       la(is.string(str), 'expected a string to render, got', typeof str, str)
       const html = render(str)
+
       assertHashIsPresent(pathToFile, source, hash, html)
+
       return pathToFile
     }
 
@@ -279,6 +284,7 @@ function validateAndGetUrl (sidebar, href, source, text, render) {
     // if we got it, return it!
     if (cachedValue) {
       debug('key found %s -> %s', href, cachedValue)
+
       return cachedValue
     }
 
@@ -292,6 +298,7 @@ function validateAndGetUrl (sidebar, href, source, text, render) {
       .then(() => {
         if (args.validate === false) {
           debug('should not validate %s', href)
+
           return Promise.resolve(href)
         }
 

source/_data/blogs.yml

@@ -8,35 +8,53 @@ small:
 
 # large links with thumbnails, links, embedded video
 large:
-  - title: "CircleCI + Cypress.io: End to end testing made easy"
-    url: https://slides.com/bahmutov/circleci-cypress-orb
-    author: Gleb Bahmutov
-    date: Dec 5, 2018
-    img: /img/examples/circleci-orb.png
-
   - title: Testing Your Frontend with Cypress.io Framework
     url: https://snipcart.com/blog/frontend-testing-cypress
     sourceName: Snipcart
     sourceUrl: https://snipcart.com/
     author: Michael Yagudaev
     date: Nov 29, 2018
-    img: /img/examples/snipcart.png
+    img: /img/examples/snipcart.jpg
+
+  - title: "Building an optimised E2E flow system with Cypress"
+    url: https://medium.com/elements/building-an-optimised-e2e-flow-system-with-cypress-be119025c476
+    sourceName: Elements blog
+    sourceUrl: https://medium.com/elements
+    date: November 23, 2018
+    author: Luis Miguel Fernández
+    img: /img/examples/optimized-e2e-flow-system-with-cypress.jpg
+
+  - title: "CircleCI launches Orbs, a package manager for software delivery automation"
+    url: https://techcrunch.com/2018/11/07/circleci-launches-orbs-a-package-manager-for-software-delivery-automation/
+    sourceName: TechCrunch
+    sourceUrl: https://techcrunch.com
+    author: Frederic Lardinois
+    date: Nov 12, 2018
+    img: /img/examples/circleci-launches-orbs.jpg
+
+  - title: "Strava’s New End-to-End Testing Setup"
+    url: https://medium.com/strava-engineering/stravas-new-end-to-end-testing-setup-18b541727555
+    sourceName: Strava Engineering
+    sourceUrl: https://medium.com/strava-engineering
+    author: Mark Hurwitz
+    date: Oct 11, 2018
+    img: /img/examples/strava-engineering-end-to-end-cypress.jpg
 
   - title: Angular Testing – Protractor vs Cypress
     url: https://techblog.fexcofts.com/2018/09/24/end-to-end-e2e-angular-testing-protractor-vs-cypress/
     sourceName: FEXCO Technology Solutions
     sourceUrl: https://techblog.fexcofts.com/
     author: Tulio Castro
     date: Sep 24, 2018
-    img: /img/examples/e2e-app.png
+    img: /img/examples/e2e-app.jpg
 
   - title: Test Driven Form Development with Cypress
     url: https://palmer.net/blog/test-driven-form-development-with-cypress
     sourceName: The Palmer Group
     sourceUrl: https://www.gravitywell.co.uk/
     date:
     author: Jack Cross
-    img: /img/examples/thepalmergroup.jpg
+    img: /img/examples/the-palmer-group.jpg
 
   - title: Using Cypress.io
     url: https://www.gravitywell.co.uk/labs/using-cypress.io

source/_data/podcasts.yml

@@ -1,5 +1,12 @@
 # large links with thumbnails, links, embedded video
 large:
+  - title: "Testing in JavaScript with Gil Tayar"
+    url: https://devchat.tv/js-jabber/jsj-341-testing-in-javascript-with-gil-tayar/
+    sourceName: JavaScript Jabber
+    sourceUrl: https://devchat.tv/js-jabber
+    date: November 27, 2018
+    author: Aimee Knight, AJ O’Neal, Charles Max Wood, and Gil Tayar
+    img: /img/examples/javascript-jabber-podcast-cypress.jpg
 
   - title: "Cypress"
     url: https://blog.codepen.io/2018/10/16/195-cypress/
@@ -88,7 +95,7 @@ large:
     sourceUrl: https://devchat.tv/js-jabber
     date: Aug 10, 2016
     author: Aimee Knight, Charles Max Woods, Dave Smith, Joe Eames, & Brian Mann
-    img: /img/examples/javascript-jabber-podcast-brian-mann-cypress.jpg
+    img: /img/examples/javascript-jabber-podcast-cypress.jpg
 
   - title: Dave Beck with Foundry 45 and Brian Mann with Cypress.io
     url: http://atlantabusinessradio.businessradiox.com/2016/06/23/dave-beck/

source/_data/screencasts.yml

@@ -1,5 +1,13 @@
 # large links with thumbnails, links, embedded video
 large:
+  - title: "CircleCI + Cypress.io: End to end testing made easy"
+    url: https://youtu.be/J-xbNtKgXfY
+    sourceName: CircleCI
+    sourceUrl: https://circleci.com/
+    date: December 10, 2018
+    author: Gleb Bahmutov & Eddie Webb
+    youtubeId: J-xbNtKgXfY
+
   - title: "Get the latest updates from Cypress"
     url: https://www.youtube.com/watch?v=FfqD1ExUGlw
     sourceName: Cypress.io

source/_data/talks.yml

@@ -1,23 +1,29 @@
 # large links with thumbnails, links, embedded video
 large:
-  - title: End-to-end testing is hard - but it doesn't have to be
-    url: https://www.youtube.com/watch?v=swpz0H0u13k
-    youtubeId: swpz0H0u13k
-    sourceName: ReactiveConf 2018
-    sourceUrl: https://reactiveconf.com/
-    date: Oct 29, 2018
-    author: Gleb Bahmutov
-    img: /img/examples/reactiveconf-2018.png
-
   - title: Testing Vue with Crypress
     url: https://www.youtube.com/watch?v=uowaTHQDcKc
     sourceName: VueNYC meetup
     sourceUrl: https://www.meetup.com/vueJsNYC/events/254789852/
     date: Dec 6, 2018
     author: Gleb Bahmutov
-    img: /img/examples/vuenyc-meetup.jpeg
     youtubeId: uowaTHQDcKc
 
+  - title: Next Generation Web Application End to End Testing
+    url: https://youtu.be/CkGQ0fFH3yE
+    sourceName: Devoxx Belgium
+    sourceUrl: https://devoxx.be/
+    date: Nov 4, 2018
+    author: Amir Rustamzadeh
+    youtubeId: CkGQ0fFH3yE
+
+  - title: End-to-end testing is hard - but it doesn't have to be
+    url: https://www.youtube.com/watch?v=swpz0H0u13k
+    youtubeId: swpz0H0u13k
+    sourceName: ReactiveConf 2018
+    sourceUrl: https://reactiveconf.com/
+    date: Oct 29, 2018
+    author: Gleb Bahmutov
+
   - title: "TDD in Vue with Cypress"
     url: https://www.vuemastery.com/conferences/connect-tech-2018/Test-Driven-Development-in-Vue-with-Cypress/
     sourceName: connect.tech 2018
@@ -34,6 +40,14 @@ large:
     author: Josh Justice
     img: /img/examples/tdd-react.jpg
 
+  - title: Deterministic Mocking with GraphQL and Apollo
+    url: https://youtu.be/K445DtQ5oHY
+    youtubeId: K445DtQ5oHY
+    sourceName: React Boston 2018
+    sourceUrl: http://www.reactboston.com/
+    date: Sep 29, 2018
+    author: Hillary Bauer & Mark Faga
+
   - title: "Everything I know about writing quality software"
     url: https://www.youtube.com/watch?v=1PMxLTfh6lo
     sourceName: BuzzJS

themes/cypress/source/css/_partial/examples.scss

@@ -56,3 +56,7 @@
     border-bottom: 0;
   }
 }
+
+.small-media {
+  margin-bottom: 100px;
+}

themes/cypress/source/css/_partial/page.scss

@@ -443,7 +443,7 @@ a.article-edit-link {
 
     &>h1, &>h2, &>h3 {
       margin-top: 15px;
-      padding-top: 0em;
+      padding-top: 0;
       border: 0;
     }
 

themes/cypress/source/css/_partial/search.scss

@@ -222,7 +222,7 @@
   border-bottom: 1px solid #eee;
   background-color: #fbfbfb;
   display: none;
-  margin: 0px;
+  margin: 0;
   padding: 2px 8px;
   font-size: 0.9em;
   font-family: $font-title;

themes/cypress/source/js/ac_tracking.js

@@ -30,6 +30,7 @@
     trackcmp_s[0].parentNode.appendChild(trackcmp)
   } else {
     var trackcmp_h = document.getElementsByTagName('head')
+
     trackcmp_h.length && trackcmp_h[0].appendChild(trackcmp)
   }
-})();
+})()