Latest news + banner, cypress tests, open source copy, general style tweaks (#13)

* Adding latest news and banners

* Adding first draft of cypress specs and github actions workflow

* Adding sticky position for top banner

* Tweak styles for new latest news section

* Tweak styles for text__layout innerHTML

* Fix Cypress homepage test spec

* Fix mobile navi z-index with sticky top banner

* Fix sticky banner z-index bug with mobile navi

* Refactor markdown tools to support pages beyond developer docs

* Adjust TADHACK text max-widths for small mobile

* initial changes for open source copy

* more copy

* more copy

* updated open source structure

* minor

* typo

* more copy

* Adjust styles for Open Source markdown small text

* Update readme and remove floats from docs webhooks markdown

* Add readme notes on Cypress and flesh out navi spec tests

* Fix main navi highlight when on sub-sections of markdown pages

Co-authored-by: Dave Horton <daveh@beachdognet.com>

cypress/integration/footer.spec.js

@@ -0,0 +1,37 @@
+describe('Footer', () => {
+  beforeEach(() => {
+    cy.fixture('site.json').as('site');
+  });
+
+  it('Has support email', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+      cy.get('.foot__support .btn')
+        .contains(site.footer.email);
+    });
+  });
+
+  it('Has page links', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+
+      site.navi.links.forEach((item, i) => {
+        cy.get(`.foot__links:last-child li:nth-child(${i + 2}) .foot__link`)
+          .contains(item.label)
+          .should('have.attr', 'href', item.link);
+      });
+    });
+  });
+
+  it('Has resource links', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+
+      site.footer.links.forEach((item, i) => {
+        cy.get(`.foot__links:first-child li:nth-child(${i + 1}) .foot__link`)
+          .contains(item.label)
+          .should('have.attr', 'href', item.link);
+      });
+    });
+  });
+});

cypress/integration/home.spec.js

@@ -0,0 +1,29 @@
+describe('Home page', () => {
+  beforeEach(() => {
+    cy.fixture('home.json').as('home');
+    cy.fixture('site.json').as('site');
+  });
+
+  it('Has latest', () => {
+    cy.get('@site').then((site) => {
+      const latest = site.latest.find((item) => item.active);
+
+      if (latest) {
+        cy.visit('/');
+        cy.get('.latest__headline h2')
+          .contains(latest.headline);
+      }
+    });
+  });
+
+  it('Has banner', () => {
+    cy.get('@site').then((site) => {
+      if (site.banner && site.banner.active) {
+        cy.visit('/');
+        cy.get('.banner')
+          .contains(site.banner.text)
+          .should('have.attr', 'href', site.banner.link);
+      }
+    });
+  });
+});

cypress/integration/navi.spec.js

@@ -0,0 +1,87 @@
+describe('Navigation', () => {
+
+  beforeEach(() => {
+    cy.fixture('site.json').as('site');
+  });
+
+  it('Has jambonz logo', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+      cy.get('.navi__logo')
+        .should('have.attr', 'href', site.navi.home.link);
+    });
+  });
+
+  it('Has page links', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+
+      site.navi.links.forEach((item, i) => {
+        cy.get(`.navi__links li:nth-child(${i + 1}) .navi__link`)
+          .contains(item.label)
+          .should('have.attr', 'href', item.link);
+      });
+    });
+  });
+
+  it('Has login button', () => {
+    cy.get('@site').then((site) => {
+      cy.visit('/');
+
+      cy.get('.navi__login .btn')
+        .contains(site.navi.login.label)
+        .should('have.attr', 'href', site.navi.login.link)
+        .should('have.attr', 'target', '_blank');
+    });
+  });
+
+  it('Has no mobile navi above max-width', () => {
+    cy.visit('/');
+    cy.viewport('macbook-15');
+
+    cy.get('.navi__mobile')
+      .should('have.length', 0);
+
+    cy.get('.navi__links')
+      .should('be.visible');
+    
+    cy.get('.navi__logo')
+      .should('be.visible');
+
+    cy.get('.navi__icon')
+      .should('not.be.visible');
+  });
+
+  it('Has mobile navi below max-width', () => {
+    cy.visit('/');
+    cy.viewport('ipad-2');
+
+    cy.get('.navi')
+      .should('have.class', 'mobile');
+    
+    cy.get('.navi__links')
+      .should('not.be.visible');
+
+    cy.get('.navi__mobile')
+      .should('have.length', 1);
+    
+    cy.get('.navi__icon')
+      .should('be.visible')
+      .click();
+    
+    cy.get('.navi')
+      .should('have.class', 'active');
+
+    cy.get('.navi__mobile')
+      .should('have.class', 'active');
+    
+    cy.get('.navi__mobile__icon')
+      .click();
+    
+    cy.get('.navi')
+      .should('not.have.class', 'active');
+
+    cy.get('.navi__mobile')
+      .should('not.have.class', 'active');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <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}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/scripts/fixtures.js

@@ -0,0 +1,22 @@
+// Generates fixtures JSON files from jambonz YAML data for Cypress
+// Uses `yarn pretest` to run this script
+// Uses `yarn posttest` to run fixtures cleanup (rm -rf)
+
+const fs = require('fs');
+const path = require('path');
+const yamljs = require('yamljs');
+const dataDir = path.join(process.cwd(), 'data');
+const fixDir = path.join(process.cwd(), 'cypress/fixtures');
+
+if (!fs.existsSync(fixDir)) {
+  fs.mkdirSync(fixDir);
+}
+
+fs.readdirSync(dataDir).forEach((file) => {
+  const filePath = `${dataDir}/${file}`;
+  const fileContents = fs.readFileSync(filePath, 'utf8');
+  const fileJSON = yamljs.parse(fileContents);
+  const fileOut = path.join(fixDir, file.replace('.yml', '.json'));
+
+  fs.writeFileSync(fileOut, JSON.stringify(fileJSON, null, 2));
+});

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 will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

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