@defra/forms-engine-plugin 0.0.1

package/test/form/summary-submission-email.test.js

@@ -0,0 +1,95 @@
+import { join } from 'node:path'
+
+import { createServer } from '~/src/server/index.js'
+import { getFormMetadata } from '~/src/server/plugins/engine/services/formsService.js'
+import * as fixtures from '~/test/fixtures/index.js'
+import { renderResponse } from '~/test/helpers/component-helpers.js'
+import { getCookie, getCookieHeader } from '~/test/utils/get-cookie.js'
+
+const basePath = '/minimal'
+
+jest.mock('~/src/server/plugins/engine/services/formsService.js')
+jest.mock('~/src/server/plugins/engine/services/formSubmissionService.js')
+
+describe('Page: /summary', () => {
+  /** @type {Server} */
+  let server
+
+  /** @type {string} */
+  let csrfToken
+
+  /** @type {ReturnType<typeof getCookieHeader>} */
+  let headers
+
+  beforeAll(async () => {
+    server = await createServer({
+      formFileName: 'minimal.js',
+      formFilePath: join(import.meta.dirname, 'definitions'),
+      enforceCsrf: true
+    })
+
+    await server.initialize()
+
+    // Navigate to start
+    const response = await server.inject({
+      url: `${basePath}/start`,
+      headers
+    })
+
+    // Extract the session cookie
+    csrfToken = getCookie(response, 'crumb')
+    headers = getCookieHeader(response, ['session', 'crumb'])
+
+    // Submit answers
+    await server.inject({
+      url: `${basePath}/start`,
+      method: 'POST',
+      headers,
+      payload: {
+        crumb: csrfToken,
+        field: 'value'
+      }
+    })
+  })
+
+  beforeEach(() => {
+    jest.mocked(getFormMetadata).mockResolvedValue(fixtures.form.metadata)
+  })
+
+  it('should render the page with email notification warning', async () => {
+    jest.mocked(getFormMetadata).mockResolvedValue(fixtures.form.metadata)
+
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/summary`,
+      headers
+    })
+
+    const $warning = container.getByRole('link', {
+      name: 'enter the email address (opens in new tab)'
+    })
+
+    expect($warning).toBeInTheDocument()
+  })
+
+  it('should render the page with no email notification warning', async () => {
+    jest.mocked(getFormMetadata).mockResolvedValue({
+      ...fixtures.form.metadata,
+      notificationEmail: 'defra@gov.uk'
+    })
+
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/summary`,
+      headers
+    })
+
+    const $warning = container.queryByRole('link', {
+      name: 'enter the email address (opens in new tab)'
+    })
+
+    expect($warning).not.toBeInTheDocument()
+  })
+})
+
+/**
+ * @import { Server } from '@hapi/hapi'
+ */

package/test/form/template.test.js

@@ -0,0 +1,288 @@
+import { join } from 'node:path'
+
+import { within } from '@testing-library/dom'
+import { StatusCodes } from 'http-status-codes'
+
+import { createServer } from '~/src/server/index.js'
+import { getFormMetadata } from '~/src/server/plugins/engine/services/formsService.js'
+import * as fixtures from '~/test/fixtures/index.js'
+import { renderResponse } from '~/test/helpers/component-helpers.js'
+import { getCookie, getCookieHeader } from '~/test/utils/get-cookie.js'
+
+const basePath = '/templates'
+
+jest.mock('~/src/server/plugins/engine/services/formsService.js')
+
+describe('Form template journey', () => {
+  /** @type {Server} */
+  let server
+
+  /** @type {string} */
+  let csrfToken
+
+  /** @type {ReturnType<typeof getCookieHeader>} */
+  let headers
+
+  // Create server before each test
+  beforeAll(async () => {
+    server = await createServer({
+      formFileName: 'templates.js',
+      formFilePath: join(import.meta.dirname, 'definitions'),
+      enforceCsrf: true
+    })
+
+    await server.initialize()
+
+    // Navigate to start
+    const response = await server.inject({
+      url: `${basePath}/start`
+    })
+
+    // Extract the session cookie
+    csrfToken = getCookie(response, 'crumb')
+    headers = getCookieHeader(response, ['session', 'crumb'])
+  })
+
+  beforeEach(() => {
+    jest.mocked(getFormMetadata).mockResolvedValue(fixtures.form.metadata)
+  })
+
+  afterAll(async () => {
+    await server.stop()
+  })
+
+  test('GET /start', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/start`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $heading = container.getByRole('heading', {
+      name: 'Start page',
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+  })
+
+  test('GET /full-name', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/full-name`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $heading = container.getByRole('heading', {
+      name: "What's your name?",
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+  })
+
+  test('POST /full-name', async () => {
+    const { response } = await renderResponse(server, {
+      url: `${basePath}/full-name`,
+      method: 'POST',
+      headers,
+      payload: { WmHfSb: 'Enrique Chase', crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.SEE_OTHER)
+    expect(response.headers.location).toBe(`${basePath}/are-you-in-england`)
+  })
+
+  test('GET /are-you-in-england', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/are-you-in-england`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $title = await container.findByText(
+      'Are you in England, Enrique Chase? - Templates - GOV.UK'
+    )
+
+    expect($title).toBeInTheDocument()
+
+    const $heading = container.getByRole('heading', {
+      name: 'Are you in England, Enrique Chase?',
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+  })
+
+  test('POST /are-you-in-england with empty payload', async () => {
+    const { response, container } = await renderResponse(server, {
+      url: `${basePath}/are-you-in-england`,
+      method: 'POST',
+      headers,
+      payload: { crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $errorSummary = container.getByRole('alert')
+
+    const $heading = within($errorSummary).getByRole('heading', {
+      name: 'There is a problem',
+      level: 2
+    })
+
+    expect($heading).toBeInTheDocument()
+
+    const $errorItems = within($errorSummary).getAllByRole('listitem')
+    expect($errorItems[0]).toHaveTextContent(
+      'Select are you in England, Enrique Chase?'
+    )
+  })
+
+  test('POST /are-you-in-england', async () => {
+    const { response } = await renderResponse(server, {
+      url: `${basePath}/are-you-in-england`,
+      method: 'POST',
+      headers,
+      payload: { TKsWbP: 'true', crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.SEE_OTHER)
+    expect(response.headers.location).toBe(`${basePath}/what-is-your-business`)
+  })
+
+  test('GET /what-is-your-business', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/what-is-your-business`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $title = await container.findByText(
+      'What is your business, Enrique Chase? - Templates - GOV.UK'
+    )
+
+    expect($title).toBeInTheDocument()
+
+    const $heading = container.getByRole('heading', {
+      name: 'What is your business, Enrique Chase?',
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+  })
+
+  test('POST /what-is-your-business with empty payload', async () => {
+    const { response, container } = await renderResponse(server, {
+      url: `${basePath}/what-is-your-business`,
+      method: 'POST',
+      headers,
+      payload: { crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $errorSummary = container.getByRole('alert')
+
+    const $heading = within($errorSummary).getByRole('heading', {
+      name: 'There is a problem',
+      level: 2
+    })
+
+    expect($heading).toBeInTheDocument()
+
+    const $errorItems = within($errorSummary).getAllByRole('listitem')
+    expect($errorItems[0]).toHaveTextContent(
+      'Select what is your business, Enrique Chase?'
+    )
+  })
+
+  test('POST /what-is-your-business', async () => {
+    const { response } = await renderResponse(server, {
+      url: `${basePath}/what-is-your-business`,
+      method: 'POST',
+      headers,
+      payload: { sdFYHf: 'grower', crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.SEE_OTHER)
+    expect(response.headers.location).toBe(`${basePath}/information`)
+  })
+
+  test('GET /information', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/information`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $title = await container.findByText(
+      'Information: In England? true? - Templates - GOV.UK'
+    )
+
+    expect($title).toBeInTheDocument()
+
+    const $heading = container.getByRole('heading', {
+      name: 'Information: In England? true?',
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+
+    const $output1 = container.getByTestId('output-1')
+    expect($output1).toBeInTheDocument()
+    expect($output1.textContent).toBe('Are you in England, Enrique Chase?')
+
+    const $output2 = container.getByTestId('output-2')
+    expect($output2).toBeInTheDocument()
+    expect($output2.textContent).toBe(
+      'A grower or producer of agricultural or horticultural produce'
+    )
+
+    const $output3 = container.getByTestId('output-3')
+    expect($output3).toBeInTheDocument()
+    expect($output3.textContent).toBe('Yes')
+
+    const $output4 = container.getByTestId('output-4')
+    expect($output4).toBeInTheDocument()
+    expect($output4.textContent).toBe('/templates/are-you-in-england')
+  })
+
+  test('POST /information', async () => {
+    const { response } = await renderResponse(server, {
+      url: `${basePath}/information`,
+      method: 'POST',
+      headers,
+      payload: { crumb: csrfToken }
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.SEE_OTHER)
+    expect(response.headers.location).toBe(`${basePath}/summary`)
+  })
+
+  test('GET /summary', async () => {
+    const { container, response } = await renderResponse(server, {
+      url: `${basePath}/summary`,
+      headers
+    })
+
+    expect(response.statusCode).toBe(StatusCodes.OK)
+
+    const $titles = container.queryAllByRole('term')
+    expect($titles).toHaveLength(3)
+    expect($titles[0]).toHaveTextContent("What's your full name?")
+    expect($titles[1]).toHaveTextContent('Are you in England, Enrique Chase?')
+    expect($titles[2]).toHaveTextContent(
+      'What is your business, Enrique Chase?'
+    )
+  })
+})
+
+/**
+ * @import { Server } from '@hapi/hapi'
+ */

package/test/form/titles.test.js

@@ -0,0 +1,204 @@
+import { join } from 'node:path'
+
+import { createServer } from '~/src/server/index.js'
+import { getFormMetadata } from '~/src/server/plugins/engine/services/formsService.js'
+import * as fixtures from '~/test/fixtures/index.js'
+import { renderResponse } from '~/test/helpers/component-helpers.js'
+import { getCookie, getCookieHeader } from '~/test/utils/get-cookie.js'
+
+const basePath = '/titles'
+
+jest.mock('~/src/server/plugins/engine/services/formsService.js')
+
+describe('Title and section title', () => {
+  /** @type {Server} */
+  let server
+
+  /** @type {string} */
+  let csrfToken
+
+  /** @type {ReturnType<typeof getCookieHeader>} */
+  let headers
+
+  beforeAll(async () => {
+    server = await createServer({
+      formFileName: 'titles.json',
+      formFilePath: join(import.meta.dirname, 'definitions'),
+      enforceCsrf: true
+    })
+
+    await server.initialize()
+
+    // Navigate to start
+    const response = await server.inject({
+      url: `${basePath}/start`,
+      headers
+    })
+
+    // Extract the session cookie
+    csrfToken = getCookie(response, 'crumb')
+    headers = getCookieHeader(response, ['session', 'crumb'])
+
+    // Submit answers for all pages
+    for (const { path, payload } of [
+      {
+        path: '/applicant-one',
+        payload: {
+          crumb: csrfToken,
+          firstName1: 'Firstname',
+          middleName1: '',
+          lastName1: 'Lastname'
+        }
+      },
+      {
+        path: '/applicant-one-address',
+        payload: {
+          crumb: csrfToken,
+          address1__addressLine1: 'Richard Fairclough House',
+          address1__addressLine2: 'Knutsford Road',
+          address1__town: 'Warrington',
+          address1__postcode: 'WA4 1HT'
+        }
+      },
+      {
+        path: '/applicant-two',
+        payload: {
+          crumb: csrfToken,
+          firstName2: 'Firstname',
+          middleName2: '',
+          lastName2: 'Lastname'
+        }
+      },
+      {
+        path: '/applicant-two-address-optional',
+        payload: {
+          crumb: csrfToken,
+          address2__addressLine1: '',
+          address2__addressLine2: '',
+          address2__town: '',
+          address2__postcode: ''
+        }
+      }
+    ]) {
+      await server.inject({
+        url: `${basePath}${path}`,
+        method: 'POST',
+        headers,
+        payload
+      })
+    }
+  })
+
+  afterAll(async () => {
+    await server.stop()
+  })
+
+  it('does not render the section title if it is the same as the title', async () => {
+    jest.mocked(getFormMetadata).mockResolvedValue(fixtures.form.metadata)
+
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-one`
+    })
+
+    const $section = document.getElementById('section-title')
+    const $heading = container.getByRole('heading', {
+      name: 'Applicant 1',
+      level: 1
+    })
+
+    expect($section).toBeNull()
+    expect($heading).toBeInTheDocument()
+    expect($heading).toHaveClass('govuk-heading-l')
+  })
+
+  it('render warning when notification email is not set', async () => {
+    jest.mocked(getFormMetadata).mockResolvedValue(fixtures.form.metadata)
+
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-one`
+    })
+
+    const $warning = container.queryByRole('link', {
+      name: 'enter the email address (opens in new tab)'
+    })
+
+    expect($warning).toBeInTheDocument()
+  })
+
+  it('does not render the warning when notification email is set', async () => {
+    jest.mocked(getFormMetadata).mockResolvedValue({
+      ...fixtures.form.metadata,
+      notificationEmail: 'defra@gov.uk'
+    })
+
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-one`
+    })
+
+    const $warning = container.queryByRole('link', {
+      name: 'enter the email address (opens in new tab)'
+    })
+
+    expect($warning).not.toBeInTheDocument()
+  })
+
+  it('does render the section title if it is not the same as the title', async () => {
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-one-address`,
+      headers
+    })
+
+    const $section = container.getByRole('heading', {
+      name: 'Applicant 1',
+      level: 2
+    })
+
+    const $heading = container.getByRole('heading', {
+      name: 'Address',
+      level: 1
+    })
+
+    expect($section).toBeInTheDocument()
+    expect($section).toHaveAttribute('id', 'section-title')
+
+    expect($heading).toBeInTheDocument()
+    expect($heading).toHaveClass('govuk-fieldset__heading')
+  })
+
+  it('does not render the section title if hideTitle is set to true', async () => {
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-two`,
+      headers
+    })
+
+    const $section = document.getElementById('section-title')
+    const $heading = container.getByRole('heading', {
+      name: 'Applicant 2 details',
+      level: 1
+    })
+
+    expect($section).toBeNull()
+    expect($heading).toBeInTheDocument()
+    expect($heading).toHaveClass('govuk-heading-l')
+  })
+
+  it('render title with optional when there is single component in page and is selected as optional', async () => {
+    const { container } = await renderResponse(server, {
+      url: `${basePath}/applicant-two-address-optional`,
+      headers
+    })
+
+    const $heading = container.getByRole('heading', {
+      name: 'Address (optional)',
+      level: 1
+    })
+
+    expect($heading).toBeInTheDocument()
+    expect($heading).toHaveClass('govuk-fieldset__heading')
+  })
+})
+
+/**
+ * @import { Server } from '@hapi/hapi'
+ * @import { OutgoingHttpHeaders } from 'node:http'
+ */

package/test/helpers/component-helpers.js

@@ -0,0 +1,74 @@
+import { within } from '@testing-library/dom'
+
+import { render } from '~/src/server/plugins/nunjucks/index.js'
+
+/**
+ * Get component form data
+ * @param {FormValue} [value]
+ * @param {string} [name]
+ * @returns {FormPayload}
+ */
+export function getFormData(value, name = 'myComponent') {
+  return typeof value !== 'undefined' ? { [name]: value } : {}
+}
+
+/**
+ * Get component session state
+ * @param {FormValue | null} [value]
+ * @param {string} [name]
+ * @returns {FormState}
+ */
+export function getFormState(value, name = 'myComponent') {
+  return { [name]: value ?? null }
+}
+
+/**
+ * Render Nunjucks macro into DOM
+ * @param {Parameters<typeof render.macro>} args
+ */
+export function renderMacro(...args) {
+  return renderDOM(render.macro(...args))
+}
+
+/**
+ * Render Nunjucks view into DOM
+ * @param {Parameters<typeof render.view>} args
+ */
+export function renderView(...args) {
+  return renderDOM(render.view(...args))
+}
+
+/**
+ * Render HTTP response
+ * @param {Server} server
+ * @param {ServerInjectOptions} options
+ */
+export async function renderResponse(server, options) {
+  const response = /** @type {ServerInjectResponse<string>} */ (
+    await server.inject(options)
+  )
+
+  const result = renderDOM(response.result)
+  return { ...result, response }
+}
+
+/**
+ * Render DOM
+ * @param {string} [html]
+ */
+export function renderDOM(html = '') {
+  const { window } = globalThis.$jsdom
+
+  // Update the document body
+  window.document.body.innerHTML = html
+
+  const document = window.document
+  const container = within(document.body)
+
+  return { container, document }
+}
+
+/**
+ * @import { Server, ServerInjectOptions, ServerInjectResponse } from '@hapi/hapi'
+ * @import { FormPayload, FormState, FormValue } from '~/src/server/plugins/engine/types.js'
+ */

package/test/utils/get-cookie.js

@@ -0,0 +1,42 @@
+import { parse } from 'cookie'
+
+/**
+ * @param {ServerInjectResponse<string | object>} response
+ * @param {string} name
+ */
+export function getCookie(response, name) {
+  const headers = [response.headers['set-cookie']].flat()
+  const header = headers.find((header) => header?.includes(`${name}=`)) ?? ''
+
+  const value = parse(header, {
+    decode: (str) => str // we only need the raw value to pass along to the next request
+  })[name]
+
+  if (!value) {
+    throw new Error(`Cookie ${name} not found`)
+  }
+
+  return value
+}
+
+/**
+ * @param {ServerInjectResponse<string | object>} response
+ * @param {string | string[]} names
+ * @returns {Pick<OutgoingHttpHeaders, 'cookie'>}
+ */
+export function getCookieHeader(response, names) {
+  const cookies = /** @satisfies {string[]} */ ([])
+
+  for (const name of [names].flat()) {
+    cookies.push([name, getCookie(response, name)].join('='))
+  }
+
+  return {
+    cookie: cookies.join('; ')
+  }
+}
+
+/**
+ * @import { ServerInjectResponse } from '@hapi/hapi'
+ * @import { OutgoingHttpHeaders } from 'node:http'
+ */