Add Nunjucks test coverage

src/config/index.ts

@@ -15,7 +15,10 @@ export const config = convict({
   },
   publicDir: {
     format: String,
-    default: path.resolve(dirname, '../../.public')
+    default:
+      process.env.NODE_ENV === 'test'
+        ? path.resolve(dirname, '../../test/fixtures')
+        : path.resolve(dirname, '../../.public')
   },
 
   /**

src/server/plugins/engine/views/partials/preview-banner.test.js

@@ -0,0 +1,42 @@
+import { FormStatus } from '~/src/server/routes/types.js'
+import { renderView } from '~/test/helpers/component-helpers.js'
+
+describe('Preview banner partial', () => {
+  describe.each([
+    {
+      status: FormStatus.Draft
+    },
+    {
+      status: FormStatus.Live
+    }
+  ])('Status: $status', ({ status }) => {
+    let $component = /** @type {HTMLElement | null} */ (null)
+    let $paragraph = /** @type {HTMLElement | null} */ (null)
+
+    beforeEach(() => {
+      const { container } = renderView('partials/preview-banner.html', {
+        context: { previewMode: status }
+      })
+
+      $component = container.getByRole('region')
+      $paragraph = container.getByRole('paragraph')
+    })
+
+    it('should render contents', () => {
+      expect($component).toBeInTheDocument()
+      expect($component).toContainElement($paragraph)
+      expect($component).toHaveClass('govuk-notification-banner')
+      expect($paragraph).toHaveClass('govuk-notification-banner__heading')
+    })
+
+    it('should have accessible name', () => {
+      expect($component).toHaveAccessibleName('Important')
+    })
+
+    it('should have text content', () => {
+      expect($component).toHaveTextContent(
+        `This is a preview of a ${status} form. Do not enter personal information.`
+      )
+    })
+  })
+})

src/server/plugins/nunjucks/context.test.js

@@ -0,0 +1,47 @@
+import { config } from '~/src/config/index.js'
+import { context } from '~/src/server/plugins/nunjucks/context.js'
+
+describe('Nunjucks context', () => {
+  describe('Asset path', () => {
+    it("should include 'assetPath' for GOV.UK Frontend icons", () => {
+      const { assetPath } = context(null)
+      expect(assetPath).toBe('/assets')
+    })
+  })
+
+  describe('Asset helper', () => {
+    it("should locate 'assets-manifest.json' assets", () => {
+      const { getAssetPath } = context(null)
+
+      expect(getAssetPath('example.scss')).toBe(
+        '/stylesheets/example.xxxxxxx.min.css'
+      )
+
+      expect(getAssetPath('example.mjs')).toBe(
+        '/javascripts/example.xxxxxxx.min.js'
+      )
+    })
+
+    it('should return path to unknown assets', () => {
+      const { getAssetPath } = context(null)
+
+      expect(getAssetPath('example.jpg')).toBe('/example.jpg')
+      expect(getAssetPath('example.gif')).toBe('/example.gif')
+    })
+  })
+
+  describe('Config', () => {
+    it('should include environment, phase tag and service info', () => {
+      const ctx = context(null)
+
+      expect(ctx).toEqual(
+        expect.objectContaining({
+          cdpEnvironment: config.get('cdpEnvironment'),
+          phaseTag: config.get('phaseTag'),
+          serviceName: config.get('serviceName'),
+          serviceVersion: config.get('serviceVersion')
+        })
+      )
+    })
+  })
+})

src/server/views/components/service-banner/template.test.js

@@ -0,0 +1,43 @@
+import { renderMacro } from '~/test/helpers/component-helpers.js'
+
+describe('Service banner component', () => {
+  let $component = /** @type {HTMLElement | null} */ (null)
+  let $content = /** @type {HTMLElement | null} */ (null)
+  let $text = /** @type {HTMLElement | null} */ (null)
+
+  beforeEach(() => {
+    const { container, document } = renderMacro(
+      'appServiceBanner',
+      'components/service-banner/macro.njk',
+      {
+        params: {
+          title: 'Service status',
+          text: 'This is a service status message'
+        }
+      }
+    )
+
+    $component = container.getByRole('complementary')
+    $content = document.querySelector('.app-service-banner__content')
+    $text = document.querySelector('.app-service-banner__text')
+  })
+
+  it('should render contents', () => {
+    expect($component).toBeInTheDocument()
+    expect($component).toHaveClass('app-service-banner')
+    expect($component).toContainElement($content)
+    expect($content).toContainElement($text)
+  })
+
+  it('should announce service message', () => {
+    expect($component).toHaveAttribute('aria-live', 'polite')
+  })
+
+  it('should have accessible name', () => {
+    expect($component).toHaveAccessibleName('Service status')
+  })
+
+  it('should have text content', () => {
+    expect($text).toHaveTextContent('This is a service status message')
+  })
+})

src/server/views/components/tag-env/template.test.js

@@ -0,0 +1,66 @@
+import { renderMacro } from '~/test/helpers/component-helpers.js'
+
+describe('Tag environment component', () => {
+  describe.each([
+    {
+      text: 'Local',
+      env: 'local',
+      colour: 'green'
+    },
+    {
+      text: 'Development',
+      env: 'dev',
+      colour: 'grey'
+    },
+    {
+      text: 'Test',
+      env: 'test',
+      colour: 'yellow'
+    },
+    {
+      text: 'External test',
+      env: 'ext-test',
+      colour: 'yellow'
+    },
+    {
+      text: 'Performance test',
+      env: 'perf-test',
+      colour: 'yellow'
+    },
+    {
+      text: 'Production',
+      env: 'prod',
+      colour: 'red'
+    },
+    {
+      text: 'Unknown environment',
+      env: 'unknown-environment',
+      colour: 'grey'
+    }
+  ])('Environment: $text', ({ text, env, colour }) => {
+    let $component = /** @type {HTMLElement | null} */ (null)
+
+    beforeEach(() => {
+      const { container } = renderMacro(
+        'appTagEnv',
+        'components/tag-env/macro.njk',
+        { params: { env } }
+      )
+
+      $component = container.getByRole('strong')
+    })
+
+    it('should render contents', () => {
+      expect($component).toBeInTheDocument()
+      expect($component).toHaveClass('govuk-tag')
+    })
+
+    it('should have text content', () => {
+      expect($component).toHaveTextContent(text)
+    })
+
+    it('should use environment colour', () => {
+      expect($component).toHaveClass(`govuk-tag--${colour}`)
+    })
+  })
+})

test/fixtures/assets-manifest.json

@@ -0,0 +1,4 @@
+{
+  "example.mjs": "javascripts/example.xxxxxxx.min.js",
+  "example.scss": "stylesheets/example.xxxxxxx.min.css"
+}