RA-243: add log prisoner details e2e tests (#15)

* add log prisoner details e2e tests

* update tests

* remove redundant code

Author: madebyzak

integration_tests/e2e/prisoner-details.cy.ts

@@ -0,0 +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.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 direct the user to the correct page', () => {
+    Page.verifyOnPage(LogPrisonerDetailsPage)
+  })
+
+  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', () => {
+    page.form().should('exist')
+  })
+
+  it('should include a hidden CSRF token input field', () => {
+    page.csrfToken().should('exist').and('have.attr', 'type', 'hidden')
+  })
+
+  it('should render the prison number input field', () => {
+    page.prisonNumberInput().should('exist').and('have.attr', 'type', 'text').and('have.attr', 'name', 'prisonNumber')
+  })
+
+  it('should render the "Find prisoner" button', () => {
+    page
+      .findPrisonerButton()
+      .should('exist')
+      .and('have.class', 'govuk-button--secondary')
+      .and('include.text', 'Find prisoner')
+  })
+
+  it('should render the prisoner name inset text', () => {
+    page.prisonerNameInsetText().should('exist').and('contain.text', 'Prisoner name: Patel, Taj')
+  })
+
+  it('should render the date picker', () => {
+    page.dateInput().should('exist')
+    page.dateLabel().should('exist').and('include.text', 'Date')
+  })
+
+  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",
@@ -53,7 +53,8 @@
 
       {{ govukButton({
         text: "Continue",
-        classes: "govuk-button--primary"
+        classes: "govuk-button--primary",
+        attributes: { "data-test": "continue-button" }
       }) }}
     </form>
   </div>