Rename component render functions to render()

Test helpers and lib functions are now consistent Library functions always return strings, but test helpers are available for Nunjucks (via Cheerio) and Google Chrome (via Puppeteer page) ``` import { render } from '@govuk-frontend/lib/components' import { render } from '@govuk-frontend/helpers/nunjucks' import { render } from '@govuk-frontend/helpers/puppeteer' ```
alphagov · Oct 18, 2023 · 629872d · 629872d
1 parent d98f969
commit 629872d
Show file tree

Hide file tree

Showing 19 changed files with 123 additions and 171 deletions.
diff --git 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
@@ -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, options) {
-  const html = renderComponent(componentName, { ...options, env: this.env })
+  const html = render(componentName, { ...options, env: this.env })
 
   // Default beautify options
   const beautifyOptions = beautify.html.defaultOptions()

diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/accordion/accordion.puppeteer.test.js
@@ -1,7 +1,7 @@
 const {
   goToComponent,
   goToExample,
-  renderAndInitialise,
+  render,
   getAccessibleName
 } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
@@ -685,7 +685,7 @@ describe('/components/accordion', () => {
           })
 
           it('injects the localised strings as text not HTML', async () => {
-            await renderAndInitialise(page, 'accordion', examples.default, {
+            await render(page, 'accordion', examples.default, {
               config: {
                 i18n: {
                   showAllSections: 'Show <strong>all sections</strong>',
@@ -721,7 +721,7 @@ describe('/components/accordion', () => {
 
           it('throws when GOV.UK Frontend is not supported', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation() {
                   document.body.classList.remove('govuk-frontend-supported')
                 }
@@ -734,7 +734,7 @@ describe('/components/accordion', () => {
 
           it('throws when $module is not set', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   $module.remove()
                 }
@@ -747,7 +747,7 @@ describe('/components/accordion', () => {
 
           it('throws when receiving the wrong type for $module', async () => {
             await expect(
-              renderAndInitialise(page, 'accordion', examples.default, {
+              render(page, 'accordion', examples.default, {
                 beforeInitialisation($module) {
                   // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
                   $module.outerHTML = `<svg data-module="govuk-accordion"></svg>`

diff --git a/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js b/packages/govuk-frontend/src/govuk/components/button/button.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('/components/button', () => {
@@ -178,7 +175,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -237,16 +234,11 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(
-          page,
-          'button',
-          examples["don't prevent double click"],
-          {
-            config: {
-              preventDoubleClick: true
-            }
+        await render(page, 'button', examples["don't prevent double click"], {
+          config: {
+            preventDoubleClick: true
           }
-        )
+        })
 
         $button = await setButtonTracking(await page.$('button'))
       })
@@ -266,7 +258,7 @@ describe('/components/button', () => {
       let $button
 
       beforeEach(async () => {
-        await renderAndInitialise(page, 'button', examples.default, {
+        await render(page, 'button', examples.default, {
           config: {
             preventDoubleClick: true
           }
@@ -329,7 +321,7 @@ describe('/components/button', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -342,7 +334,7 @@ describe('/components/button', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -355,7 +347,7 @@ describe('/components/button', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'button', examples.default, {
+          render(page, 'button', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-button"></svg>`

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
@@ -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'
 
@@ -7,10 +7,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/...ges/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js b/...ges/govuk-frontend/src/govuk/components/character-count/character-count.puppeteer.test.js
@@ -1,7 +1,4 @@
-const {
-  goToComponent,
-  renderAndInitialise
-} = require('@govuk-frontend/helpers/puppeteer')
+const { goToComponent, render } = require('@govuk-frontend/helpers/puppeteer')
 const { getExamples } = require('@govuk-frontend/lib/components')
 
 describe('Character count', () => {
@@ -496,7 +493,7 @@ describe('Character count', () => {
     describe('JavaScript configuration', () => {
       describe('at instantiation', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -519,7 +516,7 @@ describe('Character count', () => {
         })
 
         it('configures the number of words', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -542,7 +539,7 @@ describe('Character count', () => {
         })
 
         it('configures the threshold', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -569,7 +566,7 @@ describe('Character count', () => {
           // This tests that a description can be provided through JavaScript attributes
           // and interpolated with the limit provided to the character count in JS.
 
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples[
@@ -597,7 +594,7 @@ describe('Character count', () => {
 
       describe('via `initAll`', () => {
         it('configures the number of characters', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -620,7 +617,7 @@ describe('Character count', () => {
         })
 
         it('configures the number of words', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -643,7 +640,7 @@ describe('Character count', () => {
         })
 
         it('configures the threshold', async () => {
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['to configure in JavaScript'],
@@ -669,7 +666,7 @@ describe('Character count', () => {
 
       describe('when data-attributes are present', () => {
         it('uses `maxlength` data attribute instead of the JS one', async () => {
-          await renderAndInitialise(page, 'character-count', examples.default, {
+          await render(page, 'character-count', examples.default, {
             config: {
               maxlength: 12 // JS configuration that would tell 1 character remaining
             }
@@ -687,7 +684,7 @@ describe('Character count', () => {
         })
 
         it("uses `maxlength` data attribute instead of JS's `maxwords`", async () => {
-          await renderAndInitialise(page, 'character-count', examples.default, {
+          await render(page, 'character-count', examples.default, {
             config: {
               maxwords: 12
             }
@@ -705,16 +702,11 @@ describe('Character count', () => {
         })
 
         it('uses `maxwords` data attribute instead of the JS one', async () => {
-          await renderAndInitialise(
-            page,
-            'character-count',
-            examples['with word count'],
-            {
-              config: {
-                maxwords: 12 // JS configuration that would tell 1 word remaining
-              }
+          await render(page, 'character-count', examples['with word count'], {
+            config: {
+              maxwords: 12 // JS configuration that would tell 1 word remaining
             }
-          )
+          })
 
           await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
             delay: 50
@@ -728,16 +720,11 @@ describe('Character count', () => {
         })
 
         it("uses `maxwords` data attribute instead of the JS's `maxlength`", async () => {
-          await renderAndInitialise(
-            page,
-            'character-count',
-            examples['with word count'],
-            {
-              config: {
-                maxlength: 10
-              }
+          await render(page, 'character-count', examples['with word count'], {
+            config: {
+              maxlength: 10
             }
-          )
+          })
 
           await page.type('.govuk-js-character-count', 'Hello '.repeat(11), {
             delay: 50
@@ -757,7 +744,7 @@ describe('Character count', () => {
           // element holding the textarea's accessible description
           // (and interpolated to replace `%{count}` with the maximum)
 
-          await renderAndInitialise(
+          await render(
             page,
             'character-count',
             examples['when neither maxlength nor maxwords are set'],
@@ -779,7 +766,7 @@ describe('Character count', () => {
 
     describe('Cross Side Scripting prevention', () => {
       it('injects the localised strings as text not HTML', async () => {
-        await renderAndInitialise(
+        await render(
           page,
           'character-count',
           examples['to configure in JavaScript'],
@@ -814,7 +801,7 @@ describe('Character count', () => {
 
       it('throws when GOV.UK Frontend is not supported', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation() {
               document.body.classList.remove('govuk-frontend-supported')
             }
@@ -827,7 +814,7 @@ describe('Character count', () => {
 
       it('throws when $module is not set', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module) {
               $module.remove()
             }
@@ -840,7 +827,7 @@ describe('Character count', () => {
 
       it('throws when receiving the wrong type for $module', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module) {
               // Replace with an `<svg>` element which is not an `HTMLElement` in the DOM (but an `SVGElement`)
               $module.outerHTML = `<svg data-module="govuk-character-count"></svg>`
@@ -854,7 +841,7 @@ describe('Character count', () => {
 
       it('throws when the textarea is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).remove()
             },
@@ -870,7 +857,7 @@ describe('Character count', () => {
 
       it('throws when the textarea is not the right type', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               // Replace with a tag that's neither an `<input>` or `<textarea>`
               $module.querySelector(selector).outerHTML =
@@ -889,7 +876,7 @@ describe('Character count', () => {
 
       it('throws when the textarea description is missing', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', examples.default, {
+          render(page, 'character-count', examples.default, {
             beforeInitialisation($module, { selector }) {
               $module.querySelector(selector).remove()
             },
@@ -905,7 +892,7 @@ describe('Character count', () => {
 
       it('throws when receiving invalid configuration', async () => {
         await expect(
-          renderAndInitialise(page, 'character-count', { context: {} })
+          render(page, 'character-count', { context: {} })
         ).rejects.toEqual({
           name: 'ConfigError',
           message:
@@ -921,7 +908,7 @@ describe('Character count', () => {
       const pageErrorListener = jest.fn()
       page.on('pageerror', pageErrorListener)
 
-      await renderAndInitialise(page, 'character-count', examples.default, {
+      await render(page, 'character-count', examples.default, {
         config: {
           // Override maxlength to 10
           maxlength: 10