-
Notifications
You must be signed in to change notification settings - Fork 319
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2878 from alphagov/reduce-percy-usage
Reduce GitHub workflow runs (including Percy screenshot uploads)
- Loading branch information
Showing
17 changed files
with
387 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,83 @@ | ||
| const fs = require('fs') | ||
| const { readdirSync, readFileSync, statSync } = require('fs') | ||
| const path = require('path') | ||
| const yaml = require('js-yaml') | ||
| const fm = require('front-matter') | ||
|
|
||
| const configPaths = require('../config/paths.js') | ||
|
|
||
| const childDirectories = dir => { | ||
| return fs.readdirSync(dir) | ||
| .filter(file => fs.statSync(path.join(dir, file)).isDirectory()) | ||
| /** | ||
| * Directory listing for path | ||
| * | ||
| * @param {string} directoryPath | ||
| * @returns {{ basename: string; stats: import('fs').Stats }[]} entries | ||
| */ | ||
| const getListing = (directoryPath) => { | ||
| const listing = readdirSync(directoryPath) | ||
|
|
||
| // Loop through listing entries | ||
| return listing.map(basename => ({ | ||
| basename, stats: statSync(path.join(directoryPath, basename)) | ||
| })) | ||
| } | ||
|
|
||
| // Generate component list from source directory, excluding anything that's not | ||
| // a directory (for example, .DS_Store files) | ||
| exports.allComponents = childDirectories(configPaths.components) | ||
| /** | ||
| * Directory listing (directories only) | ||
| * | ||
| * @param {string} directoryPath | ||
| * @returns {string[]} directories | ||
| */ | ||
| const getDirectories = (directoryPath) => { | ||
| const entries = getListing(directoryPath) | ||
|
|
||
| // Read the contents of a file from a given path | ||
| const readFileContents = filePath => { | ||
| return fs.readFileSync(filePath, 'utf8') | ||
| return entries | ||
| .filter(({ stats }) => stats.isDirectory()) | ||
| .map(({ basename: directory }) => directory) | ||
| } | ||
|
|
||
| exports.readFileContents = readFileContents | ||
| /** | ||
| * Directory listing (files only) | ||
| * | ||
| * @param {string} directoryPath | ||
| * @returns {string[]} directories | ||
| */ | ||
| const getFiles = (directoryPath) => { | ||
| const entries = getListing(directoryPath) | ||
|
|
||
| return entries | ||
| .filter(({ stats }) => stats.isFile()) | ||
| .map(({ basename: file }) => file) | ||
| } | ||
|
|
||
| // Generate component list from source directory, excluding anything that's not | ||
| // a directory (for example, .DS_Store files) | ||
| const allComponents = getDirectories(configPaths.components) | ||
|
|
||
| const getComponentData = componentName => { | ||
| try { | ||
| const yamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`) | ||
| return yaml.load( | ||
| fs.readFileSync(yamlPath, 'utf8'), { json: true } | ||
| readFileSync(yamlPath, 'utf8'), { json: true } | ||
| ) | ||
| } catch (error) { | ||
| throw new Error(error) | ||
| } | ||
| } | ||
|
|
||
| exports.getComponentData = getComponentData | ||
|
|
||
| exports.fullPageExamples = () => { | ||
| return childDirectories(path.resolve(configPaths.fullPageExamples)) | ||
| const fullPageExamples = () => { | ||
| return getDirectories(path.resolve(configPaths.fullPageExamples)) | ||
| .map(folderName => ({ | ||
| name: folderName, | ||
| path: folderName, | ||
| ...fm(readFileContents(path.join(configPaths.fullPageExamples, folderName, 'index.njk'))).attributes | ||
| ...fm(readFileSync(path.join(configPaths.fullPageExamples, folderName, 'index.njk'), 'utf8')).attributes | ||
| })) | ||
| .sort((a, b) => (a.name.toLowerCase() > b.name.toLowerCase()) ? 1 : -1) | ||
| } | ||
|
|
||
| module.exports = { | ||
| allComponents, | ||
| fullPageExamples, | ||
| getComponentData, | ||
| getDirectories, | ||
| getFiles, | ||
| getListing | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| const { componentNameToJavaScriptClassName } = require('./helper-functions.js') | ||
| const { renderHtml } = require('./jest-helpers.js') | ||
|
|
||
| /** | ||
| * Render and initialise a component within test boilerplate HTML | ||
| * | ||
| * Renders a component's Nunjucks macro with the given params, injects it into | ||
| * the test boilerplate page, then either: | ||
| * | ||
| * - instantiates the component class, passing the provided JavaScript | ||
| * configuration, and calls the init function | ||
| * - runs the passed initialiser function inside the browser | ||
| * (which lets you instantiate it a different way, like using `initAll`, | ||
| * or run arbitrary code) | ||
| * | ||
| * @param {String} componentName - The kebab-cased name of the component | ||
| * @param {Object} options | ||
| * @param {String} options.baseUrl - The base URL of the test server | ||
| * @param {Object} options.nunjucksParams - Params passed to the Nunjucks macro | ||
| * @param {Object} [options.javascriptConfig] - The configuration hash passed to | ||
| * the component's class for initialisation | ||
| * @param {Function} [options.initialiser] - A function that'll run in the | ||
| * browser to execute arbitrary initialisation. Receives an object with the | ||
| * passed configuration as `config` and the PascalCased component name as | ||
| * `componentClassName` | ||
| * @returns {Promise<import('puppeteer').Page>} | ||
| */ | ||
| async function renderAndInitialise (componentName, options = {}) { | ||
| await page.goto(`${options.baseUrl}/tests/boilerplate`, { waitUntil: 'load' }) | ||
|
|
||
| const html = renderHtml(componentName, options.nunjucksParams) | ||
|
|
||
| // Inject rendered HTML into the page | ||
| await page.$eval('#slot', (slot, htmlForSlot) => { | ||
| slot.innerHTML = htmlForSlot | ||
| }, html) | ||
|
|
||
| const initialiser = options.initialiser || function ({ config, componentClassName }) { | ||
| const $component = document.querySelector('[data-module]') | ||
| new window.GOVUKFrontend[componentClassName]($component, config).init() | ||
| } | ||
|
|
||
| if (initialiser) { | ||
| // Run a script to init the JavaScript component | ||
| await page.evaluate(initialiser, { | ||
| config: options.javascriptConfig, | ||
| componentClassName: componentNameToJavaScriptClassName(componentName) | ||
| }) | ||
| } | ||
|
|
||
| return page | ||
| } | ||
|
|
||
| module.exports = { | ||
| renderAndInitialise | ||
| } |
Oops, something went wrong.