pidgin/nest

Update the diff from RR 776 to fix a merge conflict and address the feedback previously provided.

Testing Done:
Ran the development server and verified no rendered content was affected. This is the readme.md at the top level only, so nothing that affects the actual content of the site.

Reviewed at https://reviews.imfreedom.org/r/818/
try {
var config = require('./diff-config.json')
} catch (e) {
config = {}
}
const {
dir = 'http://localhost:1313',
waitToScreenShotTime = 500,
additionalPages = ['404.html'],
verbose = false,
maxJobs = 15,
} = config
console.log('Config being used', {
dir,
waitToScreenShotTime,
additionalPages,
verbose,
maxJobs,
})
const fetch = require(/^http:/.test(dir) ? 'http' : 'https')
const Differencify = require('differencify')
const differencify = new Differencify()
// WARNING: Changing these values may invalidate previous snapshots
const viewports = Object.freeze({
phone: Object.freeze({ width: 320, height: 1000 }),
tablet: Object.freeze({ width: 768, height: 4000 }),
massive: Object.freeze({ width: 1440, height: 4000 }),
})
const viewportKeys = Object.keys(viewports)
const nonIdentical = []
;(async () => {
const stack = []
// Map the target pages
const pages = (await fetch_json(`${dir}/index.json`))
.map(u => u.uri)
.concat(additionalPages.map(p => `${dir}/${p}`))
.sort()
console.log(`Diffing these pages:`)
// Populates stack with tests
for (const pagePath of pages) {
console.log('\t' + pagePath.trim().replace(dir, ''))
for (const viewportName of viewportKeys) {
stack.push(() => checkPage(pagePath, viewportName))
}
}
// Run tests
await differencify.launchBrowser({ timeout: 0 })
await concurrence(stack)
await differencify.cleanup()
// Output results
if (nonIdentical.length) {
console.log(`Pages that have changed:`)
console.log(
nonIdentical
.sort()
.map(p => '\t' + p)
.join('\n')
)
} else {
console.log('No differences detected')
}
})()
/**
* Handles Differencify
* @param {string} url path to page
* @param {string} viewportName key to viewport config
*/
async function checkPage(url, viewportName) {
const viewport = viewports[viewportName]
const path = url.replace(dir, '')
const testName = `page-${viewportName}-${safeFileName(path)}`
try {
await differencify
.init({ testName, timeout: 0 })
.newPage()
.setViewport(viewport)
.goto(url)
.wait(waitToScreenShotTime)
.screenshot()
.toMatchSnapshot()
.result(result => {
if (!result) nonIdentical.push(`${viewportName} ${path}`)
})
.close()
.end()
} catch (error) {
console.error(error)
}
if (verbose) console.log(`checked ${viewportName} ${path}`)
}
/**
* Fetches and parses JSON from web resource
* @param {string} url to resource to fetch
*/
function fetch_json(url) {
return new Promise(resolve =>
fetch.get(url, res => {
res.setEncoding('utf8')
let body = ''
res.on('data', data => (body += data))
res.on('end', () => resolve(JSON.parse(body)))
})
)
}
/**
* Creates a file safe string
* @param {string} str Possibly unsafe url
*/
function safeFileName(str) {
return str
.replace(/[^a-z0-9]/gi, '_')
.toLowerCase()
.replace(/^_|_$/, '')
}
/**
* Handles concurrence
* @param {Function[]} stack The functions to be called
*/
function concurrence(stack) {
const er = e => console.error(e)
let count = 0
return new Promise(resolve => {
pull()
function pull() {
while (count < maxJobs) {
let fn = stack.pop()
if (!fn) return
fn()
.catch(er)
.then(cont)
.catch(er)
count++
}
}
function cont() {
count--
if (count === 0 && stack.length === 0) return resolve()
pull()
}
}).catch(er)
}