Namespace tasks for import into workspaces

config/jest/browser/open.mjs

@@ -1,6 +1,6 @@
 import setup from 'jest-environment-puppeteer/setup'
 
-import { download } from '../../../tasks/browser/download.mjs'
+import { download } from '../../../tasks/browser.mjs'
 
 /**
  * Open browser

gulpfile.mjs

@@ -4,17 +4,14 @@ import gulp from 'gulp'
 
 import { paths } from './config/index.js'
 import * as build from './tasks/build/index.mjs'
-import { compileJavaScripts } from './tasks/compile-javascripts.mjs'
-import { compileStylesheets } from './tasks/compile-stylesheets.mjs'
-import { watch } from './tasks/gulp/watch.mjs'
-import { npmScriptTask } from './tasks/run.mjs'
+import { browser, files, scripts, styles, npm } from './tasks/index.mjs'
 
 /**
  * Umbrella scripts tasks (for watch)
  * Runs JavaScript code quality checks, documentation, compilation
  */
 gulp.task('scripts', gulp.series(
-  compileJavaScripts('all.mjs', {
+  scripts.compile('all.mjs', {
     srcPath: join(paths.src, 'govuk'),
     destPath: join(paths.public, 'javascripts'),
 
@@ -23,15 +20,15 @@ gulp.task('scripts', gulp.series(
     }
   }),
 
-  npmScriptTask('build:jsdoc')
+  npm.run('build:jsdoc')
 ))
 
 /**
  * Umbrella styles tasks (for watch)
  * Runs Sass code quality checks, documentation, compilation
  */
 gulp.task('styles', gulp.series(
-  compileStylesheets('**/[!_]*.scss', {
+  styles.compile('**/[!_]*.scss', {
     srcPath: join(paths.app, 'src/stylesheets'),
     destPath: join(paths.public, 'stylesheets'),
 
@@ -40,7 +37,7 @@ gulp.task('styles', gulp.series(
     }
   }),
 
-  npmScriptTask('build:sassdoc')
+  npm.run('build:sassdoc')
 ))
 
 /**
@@ -56,6 +53,12 @@ gulp.task('build:dist', build.dist())
  */
 gulp.task('dev', gulp.series(
   'build:app',
-  watch,
-  npmScriptTask('serve', ['--workspace', 'app'])
+  files.watch,
+  npm.run('serve', ['--workspace', 'app'])
 ))
+
+/**
+ * Screenshots task
+ * Sends screenshots to Percy for visual regression testing
+ */
+gulp.task('screenshots', browser.screenshots)

package.json

@@ -30,7 +30,7 @@
     "postbuild:dist": "jest --color --selectProjects \"Build tasks\" --testMatch \"**/*dist.test*\"",
     "pretest": "npm run build:app",
     "test": "jest --color --ignoreProjects \"Build tasks\" --maxWorkers=50%",
-    "test:screenshots": "node ./tasks/screenshot-components.mjs",
+    "test:screenshots": "gulp screenshots",
     "lint": "npm run lint:editorconfig && npm run lint:prettier && npm run lint:js && npm run lint:scss",
     "lint:editorconfig": "npm run lint:editorconfig:cli",
     "lint:editorconfig:cli": "editorconfig-checker",

tasks/compile-assets.mjs → tasks/assets.mjs

@@ -8,7 +8,7 @@ import { dirname } from 'path'
  * @param {AssetOutput} result - Generated or minified bundle
  * @returns {Promise<void>}
  */
-export async function writeAsset (filePath, result) {
+export async function write (filePath, result) {
   await mkdir(dirname(filePath), { recursive: true })
 
   const writeTasks = []

tasks/screenshot-components.mjs → tasks/browser.mjs

@@ -2,13 +2,44 @@ import { join } from 'path'
 
 import percySnapshot from '@percy/puppeteer'
 import { isPercyEnabled } from '@percy/sdk-utils'
-import { launch } from 'puppeteer'
+import puppeteer from 'puppeteer'
 
 import { paths } from '../config/index.js'
 import { filterPath, getDirectories, getListing } from '../lib/file-helper.js'
 import { goToComponent, goToExample } from '../lib/puppeteer-helpers.js'
+import configPuppeteer from '../puppeteer.config.js'
 
-import { download } from './browser/download.mjs'
+/**
+ * Puppeteer browser downloader
+ */
+export async function download () {
+  const fetcher = puppeteer.createBrowserFetcher({
+    path: join(configPuppeteer.cacheDirectory, 'chrome')
+  })
+
+  // Downloaded versions
+  const versions = fetcher.localRevisions()
+
+  // Download latest browser (unless cached)
+  if (!versions.includes(puppeteer.defaultBrowserRevision)) {
+    await fetcher.download(puppeteer.defaultBrowserRevision)
+
+    // Remove outdated browser versions
+    for (const version of versions) {
+      await fetcher.remove(version)
+    }
+  }
+}
+
+/**
+ * Puppeteer browser launcher
+ */
+export async function launch () {
+  await download()
+
+  // Open browser
+  return puppeteer.launch()
+}
 
 /**
  * Send screenshots in concurrent batches to Percy
@@ -17,7 +48,13 @@ import { download } from './browser/download.mjs'
  * @returns {Promise<void>}
  */
 export async function screenshots () {
+  if (!await isPercyEnabled()) {
+    throw new Error('Percy healthcheck failed')
+  }
+
   const browser = await launch()
+  const componentNames = await getDirectories(join(paths.src, 'govuk/components'))
+  const exampleNames = ['text-alignment', 'typography']
 
   // Screenshot stack
   const input = []
@@ -55,13 +92,16 @@ export async function screenshots () {
  * @returns {Promise<void>}
  */
 export async function screenshotComponent (page, componentName) {
+  const componentFiles = await getListing(join(paths.src, 'govuk/components', componentName))
+
+  // Navigate to component
   await goToComponent(page, componentName)
 
   // Screenshot preview page (with JavaScript)
   await percySnapshot(page, `js: ${componentName}`)
 
   // Check for "JavaScript enabled" components
-  if (componentsFiles.some(filterPath([`**/${componentName}.mjs`]))) {
+  if (componentFiles.some(filterPath([`**/${componentName}.mjs`]))) {
     await page.setJavaScriptEnabled(false)
 
     // Screenshot preview page (without JavaScript)
@@ -98,20 +138,3 @@ export async function screenshotExample (page, exampleName) {
   // Close page
   return page.close()
 }
-
-if (!await isPercyEnabled()) {
-  throw new Error('Percy healthcheck failed')
-}
-
-const [componentNames, componentsFiles] = await Promise.all([
-  getDirectories(join(paths.src, 'govuk/components')),
-  getListing(join(paths.src, 'govuk/components')),
-  download() // Download browser
-])
-
-const exampleNames = [
-  'text-alignment',
-  'typography'
-]
-
-await screenshots() // Take screenshots

tasks/browser/download.unit.test.mjs → tasks/browser.unit.test.mjs

@@ -1,6 +1,6 @@
 import puppeteer from 'puppeteer'
 
-import { download } from './download.mjs'
+import { download } from './browser.mjs'
 
 jest.mock('puppeteer')
 

tasks/build/app.mjs

@@ -3,8 +3,7 @@ import { join } from 'path'
 import gulp from 'gulp'
 
 import { paths } from '../../config/index.js'
-import { clean } from '../clean.mjs'
-import { copyAssets } from '../gulp/copy-to-destination.mjs'
+import * as files from '../files.mjs'
 
 /**
  * Build review app task
@@ -13,12 +12,12 @@ import { copyAssets } from '../gulp/copy-to-destination.mjs'
  * @returns {() => import('gulp').TaskFunction} Task function
  */
 export default () => gulp.series(
-  clean('**/*', {
+  files.clean('**/*', {
     destPath: paths.public
   }),
 
   // Copy GOV.UK Frontend static assets
-  copyAssets('**/*', {
+  files.copyAssets('**/*', {
     srcPath: join(paths.src, 'govuk/assets'),
     destPath: join(paths.public, 'assets')
   }),

tasks/build/dist.mjs

@@ -3,11 +3,9 @@ import { join } from 'path'
 import gulp from 'gulp'
 
 import { paths, pkg } from '../../config/index.js'
-import { clean } from '../clean.mjs'
-import { compileJavaScripts } from '../compile-javascripts.mjs'
-import { compileStylesheets } from '../compile-stylesheets.mjs'
-import { version } from '../file.mjs'
-import { copyAssets } from '../gulp/copy-to-destination.mjs'
+import * as files from '../files.mjs'
+import * as scripts from '../scripts.mjs'
+import * as styles from '../styles.mjs'
 
 /**
  * Build dist task
@@ -16,18 +14,18 @@ import { copyAssets } from '../gulp/copy-to-destination.mjs'
  * @returns {() => import('gulp').TaskFunction} Task function
  */
 export default () => gulp.series(
-  clean('**/*', {
+  files.clean('**/*', {
     destPath: paths.dist
   }),
 
   // Copy GOV.UK Frontend static assets
-  copyAssets('*/**', {
+  files.copyAssets('*/**', {
     srcPath: join(paths.src, 'govuk/assets'),
     destPath: join(paths.dist, 'assets')
   }),
 
   // Compile GOV.UK Frontend JavaScript
-  compileJavaScripts('all.mjs', {
+  scripts.compile('all.mjs', {
     srcPath: join(paths.src, 'govuk'),
     destPath: paths.dist,
 
@@ -37,7 +35,7 @@ export default () => gulp.series(
   }),
 
   // Compile GOV.UK Frontend Sass
-  compileStylesheets('**/[!_]*.scss', {
+  styles.compile('**/[!_]*.scss', {
     srcPath: join(paths.src, 'govuk'),
     destPath: paths.dist,
 
@@ -47,7 +45,7 @@ export default () => gulp.series(
   }),
 
   // Update GOV.UK Frontend version
-  version('VERSION.txt', {
+  files.version('VERSION.txt', {
     destPath: paths.dist
   })
 )

tasks/build/package.mjs

@@ -3,11 +3,10 @@ import { join } from 'path'
 import gulp from 'gulp'
 
 import { paths } from '../../config/index.js'
-import { clean } from '../clean.mjs'
-import { compileConfig } from '../compile-configs.mjs'
-import { compileJavaScripts } from '../compile-javascripts.mjs'
-import { compileStylesheets } from '../compile-stylesheets.mjs'
-import { copyAssets, copyFiles } from '../gulp/copy-to-destination.mjs'
+import * as configs from '../configs.mjs'
+import * as files from '../files.mjs'
+import * as scripts from '../scripts.mjs'
+import * as styles from '../styles.mjs'
 
 /**
  * Build package task
@@ -16,7 +15,7 @@ import { copyAssets, copyFiles } from '../gulp/copy-to-destination.mjs'
  * @returns {() => import('gulp').TaskFunction} Task function
  */
 export default () => gulp.series(
-  clean('**/*', {
+  files.clean('**/*', {
     destPath: paths.package,
     ignore: [
       '**/package.json',
@@ -25,19 +24,19 @@ export default () => gulp.series(
   }),
 
   // Copy GOV.UK Frontend files
-  copyFiles({
+  files.copyFiles({
     srcPath: paths.src,
     destPath: paths.package
   }),
 
   // Copy GOV.UK Frontend JavaScript (ES modules)
-  copyAssets('**/!(*.test).mjs', {
+  files.copyAssets('**/!(*.test).mjs', {
     srcPath: join(paths.src, 'govuk'),
     destPath: join(paths.package, 'govuk-esm')
   }),
 
   // Compile GOV.UK Frontend JavaScript (AMD modules)
-  compileJavaScripts('**/!(*.test).mjs', {
+  scripts.compile('**/!(*.test).mjs', {
     srcPath: join(paths.src, 'govuk'),
     destPath: join(paths.package, 'govuk'),
 
@@ -47,7 +46,7 @@ export default () => gulp.series(
   }),
 
   // Apply CSS prefixes to GOV.UK Frontend Sass
-  compileStylesheets('**/*.scss', {
+  styles.compile('**/*.scss', {
     srcPath: join(paths.src, 'govuk'),
     destPath: join(paths.package, 'govuk'),
 
@@ -57,7 +56,7 @@ export default () => gulp.series(
   }),
 
   // Apply CSS prefixes to GOV.UK Prototype Kit Sass
-  compileStylesheets('init.scss', {
+  styles.compile('init.scss', {
     srcPath: join(paths.src, 'govuk-prototype-kit'),
     destPath: join(paths.package, 'govuk-prototype-kit'),
 
@@ -67,7 +66,7 @@ export default () => gulp.series(
   }),
 
   // Compile GOV.UK Prototype Kit config
-  compileConfig('govuk-prototype-kit.config.mjs', {
+  configs.compile('govuk-prototype-kit.config.mjs', {
     srcPath: join(paths.src, 'govuk-prototype-kit'),
     destPath: paths.package,