From 130b1f5cc42b1f10587c07f3e095faaedf82c4b8 Mon Sep 17 00:00:00 2001 From: Colin Rotherham Date: Fri, 13 Oct 2023 09:22:15 +0100 Subject: [PATCH] Rename `renderComponent()` to `render()` to match helper Test helpers and lib functions now match, except one returns a Cheerio object and the other a rendered string --- packages/govuk-frontend-review/src/app.mjs | 4 ++-- .../src/common/nunjucks/globals/get-html-code.mjs | 4 ++-- .../character-count/character-count.jsdom.test.mjs | 7 ++----- .../src/govuk/components/components.template.test.js | 4 ++-- shared/helpers/nunjucks.js | 2 +- shared/helpers/puppeteer.js | 4 ++-- shared/lib/components.js | 8 +++----- shared/tasks/components.mjs | 4 ++-- 8 files changed, 16 insertions(+), 21 deletions(-) diff --git a/packages/govuk-frontend-review/src/app.mjs b/packages/govuk-frontend-review/src/app.mjs index ffad54556e..a7bd63b62d 100644 --- a/packages/govuk-frontend-review/src/app.mjs +++ b/packages/govuk-frontend-review/src/app.mjs @@ -5,7 +5,7 @@ import { getComponentsFixtures, getComponentNames, getComponentNamesFiltered, - renderComponent, + render, renderPreview } from '@govuk-frontend/lib/components' import { filterPath, hasPath } from '@govuk-frontend/lib/files' @@ -159,7 +159,7 @@ export default async () => { } // Construct and evaluate the component with the data for this example - res.locals.componentView = renderComponent(componentName, { + res.locals.componentView = render(componentName, { context: fixture.options, env }) diff --git a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs index b095aebc0e..fb28725b71 100644 --- a/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs +++ b/packages/govuk-frontend-review/src/common/nunjucks/globals/get-html-code.mjs @@ -1,4 +1,4 @@ -import { renderComponent } from '@govuk-frontend/lib/components' +import { render } from '@govuk-frontend/lib/components' import beautify from 'js-beautify' /** @@ -10,7 +10,7 @@ import beautify from 'js-beautify' * @returns {string} HTML rendered by the component */ export function getHTMLCode(componentName, params) { - const html = renderComponent(componentName, { + const html = render(componentName, { context: params, env: this.env }) diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs index d4147f0b55..251ce138a5 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.jsdom.test.mjs @@ -1,4 +1,4 @@ -import { getExamples, renderComponent } from '@govuk-frontend/lib/components' +import { getExamples, render } from '@govuk-frontend/lib/components' import { CharacterCount } from './character-count.mjs' @@ -8,10 +8,7 @@ describe('CharacterCount', () => { beforeAll(async () => { const examples = await getExamples('character-count') - html = renderComponent( - 'character-count', - examples['to configure in JavaScript'] - ) + html = render('character-count', examples['to configure in JavaScript']) }) beforeEach(async () => { diff --git a/packages/govuk-frontend/src/govuk/components/components.template.test.js b/packages/govuk-frontend/src/govuk/components/components.template.test.js index 910afd26c3..7c596f532d 100644 --- a/packages/govuk-frontend/src/govuk/components/components.template.test.js +++ b/packages/govuk-frontend/src/govuk/components/components.template.test.js @@ -5,7 +5,7 @@ const { getComponentsFixtures, getComponentNames, nunjucksEnv, - renderComponent + render } = require('@govuk-frontend/lib/components') const { HtmlValidate } = require('html-validate') @@ -136,7 +136,7 @@ describe('Components', () => { for (const { component: componentName, fixtures } of componentsFixtures) { const fixtureTasks = fixtures.map( async ({ name: exampleName, options: context }) => { - const html = renderComponent(componentName, { context }) + const html = render(componentName, { context }) // Validate HTML return expect({ diff --git a/shared/helpers/nunjucks.js b/shared/helpers/nunjucks.js index 67922180d0..98cd30984f 100644 --- a/shared/helpers/nunjucks.js +++ b/shared/helpers/nunjucks.js @@ -9,7 +9,7 @@ const cheerio = require('cheerio') * @returns {import('cheerio').CheerioAPI} HTML rendered by the macro */ function render(componentName, options) { - return cheerio.load(components.renderComponent(componentName, options)) + return cheerio.load(components.render(componentName, options)) } /** diff --git a/shared/helpers/puppeteer.js b/shared/helpers/puppeteer.js index fb4d2d437e..fa0722fa6e 100644 --- a/shared/helpers/puppeteer.js +++ b/shared/helpers/puppeteer.js @@ -1,6 +1,6 @@ const { AxePuppeteer } = require('@axe-core/puppeteer') const { ports } = require('@govuk-frontend/config') -const { renderComponent } = require('@govuk-frontend/lib/components') +const { render } = require('@govuk-frontend/lib/components') const { componentNameToClassName } = require('@govuk-frontend/lib/names') const slug = require('slug') @@ -76,7 +76,7 @@ async function axe(page, overrides = {}) { async function renderAndInitialise(page, componentName, options = {}) { await goTo(page, '/tests/boilerplate') - const html = renderComponent(componentName, { + const html = render(componentName, { context: options.context }) diff --git a/shared/lib/components.js b/shared/lib/components.js index da2819ad49..a02b4fdcb9 100644 --- a/shared/lib/components.js +++ b/shared/lib/components.js @@ -140,7 +140,7 @@ async function getExamples(componentName, packageOptions) { * @param {MacroRenderOptions} [options] - Nunjucks macro render options * @returns {string} HTML rendered by the component */ -function renderComponent(componentName, options) { +function render(componentName, options) { const macroName = componentNameToMacroName(componentName) const macroPath = `govuk/components/${componentName}/macro.njk` @@ -181,9 +181,7 @@ function renderPreview(componentName, options) { const scriptsPath = '/javascripts/govuk-frontend.min.js' // Render component (optional) - const componentHtml = componentName - ? renderComponent(componentName, options) - : '' + const componentHtml = componentName ? render(componentName, options) : '' // Render page template return renderTemplate('govuk/template.njk', { @@ -263,7 +261,7 @@ module.exports = { getComponentNamesFiltered, getExamples, nunjucksEnv, - renderComponent, + render, renderMacro, renderPreview, renderString, diff --git a/shared/tasks/components.mjs b/shared/tasks/components.mjs index 97a97eea8c..ddeb8a7157 100644 --- a/shared/tasks/components.mjs +++ b/shared/tasks/components.mjs @@ -1,6 +1,6 @@ import { basename, dirname, join } from 'path' -import { nunjucksEnv, renderComponent } from '@govuk-frontend/lib/components' +import { nunjucksEnv, render } from '@govuk-frontend/lib/components' import { getListing, getYaml } from '@govuk-frontend/lib/files' import { files } from './index.mjs' @@ -112,7 +112,7 @@ async function generateFixture(componentDataPath, options) { previewLayoutModifiers: example.previewLayoutModifiers ?? [], // Render Nunjucks example - html: renderComponent(componentName, { + html: render(componentName, { context: example.options, env }).trim()