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

@@ -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
       })

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

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 () => {

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({

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))
 }
 
 /**

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

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,

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