update tests

integration_tests/e2e/prisoner-details.cy.ts

@@ -1,68 +1,64 @@
+import LogPrisonerDetailsPage from '../pages/logPrisonerDetails'
+import Page from '../pages/page'
+
 context('Log Prisoner Details Page', () => {
+  let page: LogPrisonerDetailsPage
+
   beforeEach(() => {
     cy.task('reset')
     cy.task('stubSignIn')
     cy.signIn()
-    cy.request('/mock-session').then(() => {
-      cy.visit('/log/prisoner-details')
-    })
+
+    cy.visit('/log/prisoner-details')
+
+    cy.contains('Swap visiting orders (VOs) for PIN credit').click()
+    cy.contains('button', 'Continue').click()
+
+    page = Page.verifyOnPage(LogPrisonerDetailsPage)
   })
 
-  it('should display the page title', () => {
-    cy.title().should('include', 'Log prisoner details')
-    cy.log('Checked page title')
+  it('should direct the user to the correct page', () => {
+    Page.verifyOnPage(LogPrisonerDetailsPage)
   })
 
-  it('should display the back link', () => {
-    cy.get('.govuk-back-link')
-      .should('exist')
-      .and('have.attr', 'href', '/log/application-type')
-      .and('have.text', 'Back')
-    cy.log('Checked back link')
+  it('should display the correct page title', () => {
+    page.pageTitle().should('include', 'Log prisoner details')
+  })
+
+  it('should render the back link with correct text and href', () => {
+    page.backLink().should('have.text', 'Back').and('have.attr', 'href', '/log/application-type')
   })
 
   it('should display the prisoner details form', () => {
-    cy.get('form#log-prisoner-details').should('exist')
-    cy.log('Checked prisoner details form')
+    page.form().should('exist')
   })
 
-  it('should display the hidden CSRF token field', () => {
-    cy.get('input[name="_csrf"]').should('exist').and('have.attr', 'type', 'hidden')
-    cy.log('Checked CSRF token field')
+  it('should include a hidden CSRF token input field', () => {
+    page.csrfToken().should('exist').and('have.attr', 'type', 'hidden')
   })
 
-  it('should display the prison number input field', () => {
-    cy.get('input#prisonNumber')
-      .should('exist')
-      .and('have.attr', 'type', 'text')
-      .and('have.attr', 'name', 'prisonNumber')
-    cy.log('Checked prison number input field')
+  it('should render the prison number input field', () => {
+    page.prisonNumberInput().should('exist').and('have.attr', 'type', 'text').and('have.attr', 'name', 'prisonNumber')
   })
 
-  it('should display the "Find prisoner" button', () => {
-    cy.get('#prison-number-lookup')
+  it('should render the "Find prisoner" button', () => {
+    page
+      .findPrisonerButton()
       .should('exist')
-      .and('include.text', 'Find prisoner')
       .and('have.class', 'govuk-button--secondary')
-    cy.log('Checked "Find prisoner" button')
+      .and('include.text', 'Find prisoner')
   })
 
-  it('should display the prisoner name inset text', () => {
-    cy.get('.govuk-inset-text').should('exist').and('contain.text', 'Prisoner name: Patel, Taj')
-    cy.log('Checked prisoner name inset text')
+  it('should render the prisoner name inset text', () => {
+    page.prisonerNameInsetText().should('exist').and('contain.text', 'Prisoner name: Patel, Taj')
   })
 
-  it('should display the date picker', () => {
-    cy.get('#date').should('exist')
-    cy.get('label[for="date"]').should('exist').and('include.text', 'Date')
-    cy.log('Checked date picker')
+  it('should render the date picker', () => {
+    page.dateInput().should('exist')
+    page.dateLabel().should('exist').and('include.text', 'Date')
   })
 
-  it('should display the continue button', () => {
-    cy.get('[data-test="continue-button"]')
-      .should('exist')
-      .and('include.text', 'Continue')
-      .and('have.class', 'govuk-button--primary')
-    cy.log('Checked continue button')
+  it('should render the continue button with the correct text', () => {
+    page.continueButton().should('exist').and('include.text', 'Continue').and('have.class', 'govuk-button--primary')
   })
 })

integration_tests/pages/logPrisonerDetails.ts

@@ -0,0 +1,27 @@
+import Page from './page'
+
+export default class LogPrisonerDetailsPage extends Page {
+  constructor() {
+    super('Log prisoner details')
+  }
+
+  backLink = () => cy.get('.govuk-back-link')
+
+  pageTitle = () => cy.title()
+
+  form = () => cy.get('form#log-prisoner-details')
+
+  csrfToken = () => cy.get('input[name="_csrf"]')
+
+  prisonNumberInput = () => cy.get('input#prison-number')
+
+  findPrisonerButton = () => cy.get('[data-test="find-prisoner-button"]')
+
+  prisonerNameInsetText = () => cy.get('.govuk-inset-text')
+
+  dateInput = () => cy.get('#date')
+
+  dateLabel = () => cy.get('label[for="date"]')
+
+  continueButton = () => cy.get('[data-test="continue-button"]')
+}

server/views/pages/log/prisoner-details.njk

@@ -28,9 +28,9 @@
           Prison number
         </label>
 
-        <input class="govuk-input govuk-input--width-10" id="prisonNumber" name="prisonNumber" type="text" value="">
+        <input class="govuk-input govuk-input--width-10" id="prison-number" name="prisonNumber" type="text" value="">
 
-        <button id="prison-number-lookup" class="govuk-button govuk-button--secondary" data-module="govuk-button">
+        <button id="prisoner-number-lookup" class="govuk-button govuk-button--secondary" data-test="find-prisoner-button">
           Find prisoner
         </button>
       </div>
@@ -40,7 +40,7 @@
         classes: "govuk-!-margin-top-0"
       }) }}
 
-      <input type="hidden" id="prisonerName" name="prisonerName" value="Patel, Taj">
+      <input type="hidden" id="prisoner-name" name="prisonerName" value="Patel, Taj">
 
       {{ mojDatePicker({
         id: "date",