Add note for <-loopback> usage

.gitignore

@@ -16,3 +16,7 @@ themes/cypress/source/fonts/vendor/
 
 cypress/screenshots
 cypress/videos
+
+# Dynamically parsed data
+
+source/_data/banners.yml

cy_scripts/should-deploy.js

@@ -2,7 +2,6 @@
 
 const got = require('got')
 const git = require('ggit')
-const pluralize = require('pluralize')
 const debug = require('debug')('deploy')
 const { isEmpty, complement, tap, path, all, equals, T, values } = require('ramda')
 const la = require('lazy-ass')
@@ -127,7 +126,7 @@ const changedFilesSince = (branchName) => (sha) => {
   return git.changedFilesAfter(sha, branchName)
   .then(tap((list) => {
     debug('%s changed since last docs deploy in branch %s',
-      pluralize('file', list.length, true), branchName)
+      `${list.length} ${list.length === 1 ? 'file' : 'files'}`, branchName)
     debug(list.join('\n'))
   }))
 }
@@ -139,7 +138,7 @@ function docsFilesChangedSinceLastDeploy (env, branchName) {
     console.log('changed files')
     console.log(list.join('\n'))
     console.log('%d documentation %s changed since last doc deploy',
-      list.length, pluralize('file', list.length))
+      list.length, list.length === 1 ? 'file' : 'files')
     console.log('in branch %s against environment %s', branchName, env)
   }))
   .then(docsChanged)

cypress/integration/changelog_spec.js

@@ -9,7 +9,7 @@ describe('Changelog', () => {
     .should('be.visible')
   )
 
-  if (Cypress.env('NODE_ENV') === 'development') {
+  if (Cypress.isDevelopment()) {
     it('has a truncated table of contents', () => {
       cy.get('aside#article-toc')
       .should('be.visible')

cypress/integration/contentful_banners_spec.js

@@ -0,0 +1,47 @@
+const YAML = require('yamljs')
+const utf8 = require('utf8')
+
+const allBannersYaml = 'source/_data/banners.yml'
+
+describe('Contentful driven banners', () => {
+  it('displays all current banners with proper info', function () {
+    cy.readFile(allBannersYaml)
+    .then((yamlString) => YAML.parse(yamlString))
+    .then((banners) => {
+      if (typeof banners === 'undefined' || !banners || !banners.length) return this.skip()
+
+      cy.visit('/')
+
+      cy.get('#header .top-banners_item')
+      .each((banner, i) => {
+        cy.wrap(banner)
+        .find('.top-banners_item--body')
+        .invoke('text').invoke('trim')
+        .should((bannerText) => {
+          const yamlText = Cypress.$(banners[i].text).text().trim()
+
+          expect(utf8.encode(bannerText), `Banner #${i + 1} text is proper`).to.eq(yamlText)
+        })
+
+        cy.wrap(banner)
+        .invoke('data').its('startDate')
+        .should('eq', banners[i].startDate)
+
+        cy.wrap(banner)
+        .invoke('data').its('endDate')
+        .should('eq', banners[i].endDate)
+
+        cy.wrap(banner)
+        .find('.call-to-action')
+        .invoke('text').invoke('trim')
+        .should('eq', banners[i].buttonText.trim())
+        // const btnLink = btn.attr('href')
+
+        cy.wrap(banner)
+        .find('.call-to-action')
+        .should('have.attr', 'href')
+        .and('eq', banners[i].buttonLink)
+      })
+    })
+  })
+})

cypress/integration/main_spec.js

@@ -1,10 +1,24 @@
+// loads Cypress types and any of our custom commands
+/// <reference path="../support/index.d.ts" />
+// @ts-check
+
 const GUIDES_PATH = '/guides/overview/why-cypress.html'
 
 describe('Main', () => {
   beforeEach(() => {
     cy.server()
   })
 
+  context('robots.txt', () => {
+    if (!Cypress.isDevelopment()) {
+      it('has robots.txt', () => {
+        cy.request('/robots.txt').its('body')
+        .should('include', 'Disallow: /ja/')
+        .and('include', 'Disallow: /zh-cn/')
+      })
+    }
+  })
+
   context('CSS', () => {
     beforeEach(() => {
       cy.visit('/')
@@ -15,7 +29,7 @@ describe('Main', () => {
 
     // only works in development environment where each CSS
     // file is separate
-    if (Cypress.env('NODE_ENV') === 'development') {
+    if (Cypress.isDevelopment()) {
       it('loads roboto', () => {
         cy.request('/fonts/vendor/roboto-fontface/css/roboto/roboto-fontface.css')
       })

cypress/integration/table_of_contents.js

@@ -4,115 +4,134 @@ const API_PATH = '/api/api/table-of-contents'
 
 describe('Table of Contents', () => {
   beforeEach(function () {
-    //# skip running this test if we are in interactive mode
-    if (Cypress.config('isInteractive')) {
-      this.skip()
-    }
-
     cy.server()
   })
 
-  context('API', () => {
+  context('scrolls to right position on click', () => {
     beforeEach(() => {
-      cy.visit(`${API_PATH}.html`)
+      cy.visit(GUIDES_PATH)
     })
 
-    it('displays toc', function () {
-      cy.get('.sidebar-link')
-      .each((linkElement) => {
-        cy.log(linkElement[0].innerText)
+    it('displays header text on click', () => {
+      cy.get('.toc-link')
+      .each(($el) => {
+        const text = $el.text()
 
-        cy.request(linkElement[0].href).its('body')
-        .then((body) => {
-          const $body = Cypress.$(body)
+        cy.wrap($el).click()
+        cy.get('.article-content').contains(text).should('be.visible')
+      })
+    })
+  })
 
-          const $h1s = $body.find('.article h1').not('.article-title')
-          const $h2s = $body.find('.article h2')
+  describe('links', () => {
+    beforeEach(function () {
+      //# skip running this test if we are in interactive mode
+      if (Cypress.config('isInteractive')) {
+        this.skip()
+      }
 
-          const $h1links = $body.find('.toc-level-1>.toc-link')
-          const $h2links = $body.find('.toc-level-2>.toc-link')
+      context('API', () => {
+        beforeEach(() => {
+          cy.visit(`${API_PATH}.html`)
+        })
 
-          if ($h1links.length) {
-            $h1s.each((i, el) => {
-              const $h1 = Cypress.$(el)
-              const $link = $h1links.eq(i)
+        it('displays toc', function () {
+          cy.get('.sidebar-link')
+          .each((linkElement) => {
+            cy.log(linkElement[0].innerText)
 
-              expect($link.text()).to.eq($h1.text())
+            cy.request(linkElement[0].href).its('body')
+            .then((body) => {
+              const $body = Cypress.$(body)
 
-              expect($link.attr('href')).to.eq(`#${$h1.attr('id')}`)
-            })
-          }
+              const $h1s = $body.find('.article h1').not('.article-title')
+              const $h2s = $body.find('.article h2')
 
-          if ($h2links.length) {
-            $h2s.each((i, el) => {
-              const $h2 = Cypress.$(el)
-              const $link = $h2links.eq(i)
+              const $h1links = $body.find('.toc-level-1>.toc-link')
+              const $h2links = $body.find('.toc-level-2>.toc-link')
 
-              expect($link.text()).to.eq($h2.text())
+              if ($h1links.length) {
+                $h1s.each((i, el) => {
+                  const $h1 = Cypress.$(el)
+                  const $link = $h1links.eq(i)
 
-              expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+                  expect($link.text()).to.eq($h1.text())
+
+                  expect($link.attr('href')).to.eq(`#${$h1.attr('id')}`)
+                })
+              }
+
+              if ($h2links.length) {
+                $h2s.each((i, el) => {
+                  const $h2 = Cypress.$(el)
+                  const $link = $h2links.eq(i)
+
+                  expect($link.text()).to.eq($h2.text())
+
+                  expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+                })
+              }
             })
-          }
+          })
         })
       })
-    })
-  })
 
-  context('FAQ', () => {
-    beforeEach(() => {
-      cy.visit(`${FAQ_PATH}.html`)
-    })
+      context('FAQ', () => {
+        beforeEach(() => {
+          cy.visit(`${FAQ_PATH}.html`)
+        })
 
-    it('displays toc links', () => {
-      cy.get('.toc-level-2>.toc-link').as('tocLinks')
+        it('displays toc links', () => {
+          cy.get('.toc-level-2>.toc-link').as('tocLinks')
 
-      cy.get('.faq h2').not('.article-title').each(($h2, i) => {
-        cy.get('@tocLinks').eq(i).then(($link) => {
-          expect($link.text()).to.eq($h2.text())
+          cy.get('.faq h2').not('.article-title').each(($h2, i) => {
+            cy.get('@tocLinks').eq(i).then(($link) => {
+              expect($link.text()).to.eq($h2.text())
 
-          expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+              expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+            })
+          })
         })
       })
-    })
-  })
 
-  context('Guides', function () {
-    before(() => {
-      cy.visit(GUIDES_PATH)
-    })
+      context('Guides', function () {
+        before(() => {
+          cy.visit(GUIDES_PATH)
+        })
 
-    it('displays toc', () =>
-      cy.get('.sidebar-link')
-      .each(function (linkElement) {
-        cy.log(linkElement[0].innerText)
-        cy.request(linkElement[0].href).its('body')
-        .then(function (body) {
-          const $body = Cypress.$(body)
+        it('displays toc', () =>
+          cy.get('.sidebar-link')
+          .each(function (linkElement) {
+            cy.log(linkElement[0].innerText)
+            cy.request(linkElement[0].href).its('body')
+            .then(function (body) {
+              const $body = Cypress.$(body)
 
-          const $h1s = $body.find('.article h1').not('.article-title')
-          const $h2s = $body.find('.article h2')
+              const $h1s = $body.find('.article h1').not('.article-title')
+              const $h2s = $body.find('.article h2')
 
-          const $h1links = $body.find('.toc-level-1>.toc-link')
-          const $h2links = $body.find('.toc-level-2>.toc-link')
+              const $h1links = $body.find('.toc-level-1>.toc-link')
+              const $h2links = $body.find('.toc-level-2>.toc-link')
 
-          $h1s.each(function (i, el) {
-            const $h1 = Cypress.$(el)
-            const $link = $h1links.eq(i)
+              $h1s.each(function (i, el) {
+                const $h1 = Cypress.$(el)
+                const $link = $h1links.eq(i)
 
-            expect($link.text()).to.eq($h1.text())
-            expect($link.attr('href')).to.eq(`#${$h1.attr('id')}`)
-          })
+                expect($link.text()).to.eq($h1.text())
+                expect($link.attr('href')).to.eq(`#${$h1.attr('id')}`)
+              })
 
-          $h2s.each(function (i, el) {
-            const $h2 = Cypress.$(el)
-            const $link = $h2links.eq(i)
+              $h2s.each(function (i, el) {
+                const $h2 = Cypress.$(el)
+                const $link = $h2links.eq(i)
 
-            expect($link.text()).to.eq($h2.text())
-            expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+                expect($link.text()).to.eq($h2.text())
+                expect($link.attr('href')).to.eq(`#${$h2.attr('id')}`)
+              })
+            })
           })
-        })
+        )
       })
-    )
+    })
   })
 })
-

cypress/support/index.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+/**
+ * Possible environment names
+*/
+enum EnvironmentName {
+  development,
+  staging,
+  production
+}
+
+declare namespace Cypress {
+  interface Cypress {
+    /**
+     * Returns true if Cypress tests run against development environment.
+     */
+    isDevelopment (): boolean
+
+    /**
+     * Returns true if Cypress tests run against staging environment.
+     */
+    isStaging (): boolean
+
+    /**
+     * Returns true if Cypress tests run against production environment.
+     */
+    isProduction (): boolean
+
+    /**
+     * Returns true if Cypress tests run against this specific environment.
+     */
+    is (environmentName: EnvironmentName): boolean
+  }
+}

cypress/support/index.js

@@ -1,7 +1,18 @@
+/// <reference types="cypress" />
 import './defaults'
 
 const resizeObserverLoopErrRe = /^ResizeObserver loop limit exceeded/
 
+// a couple of shortcuts to check which environment we are running in
+
+Cypress.isDevelopment = () => Cypress.env('NODE_ENV') === 'development'
+
+Cypress.isStaging = () => Cypress.env('NODE_ENV') === 'staging'
+
+Cypress.isProduction = () => Cypress.env('NODE_ENV') === 'production'
+
+Cypress.is = (envName) => Cypress.env('NODE_ENV') === envName
+
 Cypress.on('uncaught:exception', (err) => {
   // https://github.com/WICG/ResizeObserver/issues/38
   if (resizeObserverLoopErrRe.test(err.message)) {