Haar 2007 integration testing

assets/js/initMOJFilterPage.js

@@ -5,7 +5,10 @@ new MOJFrontend.FilterToggleButton({
     container: $('.moj-action-bar__filter'),
     showText: 'Show filter',
     hideText: 'Hide filter',
-    classes: 'govuk-button--secondary',
+    classes: 'govuk-button--secondary toggle-filter-button',
+    attributes: {
+      'data-qa': 'toggle-filter-button',
+    },
   },
   closeButton: {
     container: $('.moj-filter__header-action'),

integration_tests/e2e/view-base-client-list.cy.ts

@@ -0,0 +1,88 @@
+import Page from '../pages/page'
+import ViewBaseClientListPage from '../pages/viewBaseClientList'
+import ViewBaseClientPage from '../pages/viewBaseClient'
+import NewBaseClientGrantPage from '../pages/newBaseClientGrant'
+
+const visitBaseClientListPage = (): ViewBaseClientListPage => {
+  cy.signIn()
+  cy.visit('/')
+  return Page.verifyOnPage(ViewBaseClientListPage)
+}
+
+context('Homepage - list base-clients', () => {
+  let listBaseClientsPage: ViewBaseClientListPage
+
+  beforeEach(() => {
+    cy.task('reset')
+    cy.task('stubSignIn')
+    cy.task('stubListBaseClients')
+    cy.task('stubGetBaseClient')
+    cy.task('stubManageUser')
+    cy.task('stubGetListClientInstancesList')
+
+    listBaseClientsPage = visitBaseClientListPage()
+  })
+
+  it('User can see base-client list', () => {
+    listBaseClientsPage.baseClientList().should('have.length', 3)
+  })
+
+  it('User can click through to base-client', () => {
+    listBaseClientsPage.baseClientList().first().children('a').click()
+    Page.verifyOnPage(ViewBaseClientPage)
+  })
+
+  it('User can see Add New button', () => {
+    listBaseClientsPage.addNewBaseClient().should('exist')
+  })
+
+  it('User can click through to new base-client page', () => {
+    listBaseClientsPage.addNewBaseClient().click()
+    Page.verifyOnPage(NewBaseClientGrantPage)
+  })
+
+  it('Filter page is hidden', () => {
+    listBaseClientsPage.filterPanel().should('not.be.visible')
+  })
+
+  it('Toggle filter button has text Show filter', () => {
+    listBaseClientsPage.toggleFilterButton().should('have.text', 'Show filter')
+  })
+
+  it('On click shows filter panel and updates text to Hide filter', () => {
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.filterPanel().should('be.visible')
+    listBaseClientsPage.toggleFilterButton().should('have.text', 'Hide filter')
+  })
+
+  it('On second click hides filter panel and reverts text to Show filter', () => {
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.filterPanel().should('not.be.visible')
+    listBaseClientsPage.toggleFilterButton().should('have.text', 'Show filter')
+  })
+
+  it('On second click hides filter panel and reverts text to Show filter', () => {
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.filterPanel().should('not.be.visible')
+    listBaseClientsPage.toggleFilterButton().should('have.text', 'Show filter')
+  })
+
+  it('On click Apply filter hides the filter', () => {
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.applyFilterButton().click()
+
+    listBaseClientsPage.filterPanel().should('not.be.visible')
+  })
+
+  it('On click Apply with filter content limits rows in table', () => {
+    listBaseClientsPage.toggleFilterButton().click()
+    listBaseClientsPage.roleFilterInputBox().type('ROLE_TWO')
+
+    listBaseClientsPage.applyFilterButton().click()
+
+    listBaseClientsPage.filterPanel().should('not.be.visible')
+    listBaseClientsPage.baseClientList().should('have.length', 2)
+  })
+})

integration_tests/index.d.ts

@@ -4,6 +4,6 @@ declare namespace Cypress {
      * Custom command to signIn. Set failOnStatusCode to false if you expect and non 200 return code
      * @example cy.signIn({ failOnStatusCode: boolean })
      */
-    signIn(options?: { failOnStatusCode: boolean }): Chainable<AUTWindow>
+    signIn(options?: { failOnStatusCode: boolean; redirectPath?: string }): Chainable<AUTWindow>
   }
 }

integration_tests/mockApis/baseClientsApi.ts

@@ -2,6 +2,7 @@ import { stubFor } from './wiremock'
 import {
   listBaseClientsResponseMock,
   getBaseClientResponseMock,
+  getListClientInstancesResponseMock,
 } from '../../server/data/localMockData/baseClientsResponseMock'
 
 export default {
@@ -25,7 +26,7 @@ export default {
     return stubFor({
       request: {
         method: 'GET',
-        urlPattern: `/baseClientsApi/base-clients/baseClientId`,
+        urlPattern: `/baseClientsApi/base-clients/base_client_id_1`,
       },
       response: {
         status: 200,
@@ -36,4 +37,20 @@ export default {
       },
     })
   },
+
+  stubGetListClientInstancesList: () => {
+    return stubFor({
+      request: {
+        method: 'GET',
+        urlPattern: `/baseClientsApi/base-clients/base_client_id_1/clients`,
+      },
+      response: {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json;charset=UTF-8',
+        },
+        jsonBody: getListClientInstancesResponseMock,
+      },
+    })
+  },
 }

integration_tests/mockApis/manageUsersApi.ts

@@ -33,7 +33,7 @@ const stubUserRoles = () =>
       headers: {
         'Content-Type': 'application/json;charset=UTF-8',
       },
-      jsonBody: [{ roleCode: 'SOME_USER_ROLE' }],
+      jsonBody: [{ roleCode: 'ROLE_CLIENT_CREDENTIALS' }],
     },
   })
 

integration_tests/pages/newBaseClientGrant.ts

@@ -0,0 +1,7 @@
+import Page from './page'
+
+export default class NewBaseClientGrantPage extends Page {
+  constructor() {
+    super('Select a grant type')
+  }
+}

integration_tests/pages/viewBaseClient.ts

@@ -0,0 +1,7 @@
+import Page from './page'
+
+export default class ViewBaseClientPage extends Page {
+  constructor() {
+    super('Client:')
+  }
+}

integration_tests/pages/viewBaseClientList.ts

@@ -0,0 +1,19 @@
+import Page, { PageElement } from './page'
+
+export default class ViewBaseClientListPage extends Page {
+  constructor() {
+    super('OAuth Client details')
+  }
+
+  public baseClientList = (): PageElement => cy.get('[data-qa=baseClientList]')
+
+  public addNewBaseClient = (): PageElement => cy.get('[data-qa=addNewBaseClientButton]')
+
+  public toggleFilterButton = (): PageElement => cy.get('.toggle-filter-button')
+
+  public applyFilterButton = (): PageElement => cy.get('.govuk-button').contains('Apply filters')
+
+  public filterPanel = (): PageElement => cy.get('.moj-filter')
+
+  public roleFilterInputBox = (): PageElement => cy.get('[data-qa=roleFilterInputBox]')
+}

integration_tests/support/commands.ts

@@ -1,4 +1,5 @@
-Cypress.Commands.add('signIn', (options = { failOnStatusCode: true }) => {
-  cy.request('/')
-  return cy.task('getSignInUrl').then((url: string) => cy.visit(url, options))
+Cypress.Commands.add('signIn', (options = { failOnStatusCode: true, redirectPath: '/' }) => {
+  const { failOnStatusCode, redirectPath } = options
+  cy.request(redirectPath)
+  return cy.task('getSignInUrl').then((url: string) => cy.visit(url, { failOnStatusCode }))
 })

server/data/localMockData/baseClientsResponseMock.ts

@@ -1,4 +1,8 @@
-import { GetBaseClientResponse, ListBaseClientsResponse } from '../../interfaces/baseClientApi/baseClientResponse'
+import {
+  GetBaseClientResponse,
+  ListBaseClientsResponse,
+  ListClientInstancesResponse,
+} from '../../interfaces/baseClientApi/baseClientResponse'
 
 export const listBaseClientsResponseMock: ListBaseClientsResponse = {
   clients: [
@@ -7,6 +11,7 @@ export const listBaseClientsResponseMock: ListBaseClientsResponse = {
       clientType: 'SERVICE',
       teamName: null,
       grantType: 'client_credentials',
+      roles: 'ROLE_ONE, ROLE_TWO',
       count: 1,
     },
     {
@@ -21,13 +26,14 @@ export const listBaseClientsResponseMock: ListBaseClientsResponse = {
       clientType: 'SERVICE',
       teamName: 'Team 2',
       grantType: 'client_credentials',
+      roles: 'ROLE_TWO, ROLE_THREE',
       count: 1,
     },
   ],
 }
 
 export const getBaseClientResponseMock: GetBaseClientResponse = {
-  clientId: 'baseClientId1',
+  clientId: 'base_client_id_1',
   scopes: ['read', 'write'],
   authorities: ['ROLE_CLIENT_CREDENTIALS'],
   ips: [],
@@ -48,3 +54,21 @@ export const getBaseClientResponseMock: GetBaseClientResponse = {
     deploymentInfo: 'deployment deployment info',
   },
 }
+
+export const getListClientInstancesResponseMock: ListClientInstancesResponse = {
+  clients: [
+    {
+      clientId: 'base_client_id_1_01',
+      created: '2020-01-01T00:00:00.000',
+    },
+    {
+      clientId: 'base_client_id_1_02',
+      created: '2020-01-01T00:00:00.000',
+    },
+    {
+      clientId: 'base_client_id_1_03',
+      created: '2020-01-01T00:00:00.000',
+    },
+  ],
+  grantType: 'client_credentials',
+}

server/views/pages/base-clients.njk

@@ -33,6 +33,9 @@
       text: 'Role',
       classes: 'govuk-label--m'
     },
+    attributes: {
+      'data-qa': 'roleFilterInputBox'
+    },
     value: presenter.filter.roleSearch
   }) }}
 
@@ -127,7 +130,10 @@
           items: [{
             text: 'Add new client',
             href:"/base-clients/new",
-            classes: 'govuk-button--primary'
+            classes: 'govuk-button--primary',
+            attributes: {
+              'data-qa': 'addNewBaseClientButton'
+            }
           }]
         }) }}
       </div>

server/views/presenters/listBaseClientsPresenter.ts

@@ -75,6 +75,9 @@ const indexTableRows = (data: BaseClient[], filter?: BaseClientListFilter) => {
   return dataItems.map(item => [
     {
       html: `<a href='/base-clients/${item.baseClientId}'>${item.baseClientId}</a>`,
+      attributes: {
+        'data-qa': 'baseClientList',
+      },
     },
     {
       html: item.count > 1 ? `<span class='moj-badge'>${item.count}</span>` : '',
@@ -116,21 +119,29 @@ export const filterBaseClient = (baseClient: BaseClient, filter: BaseClientListF
     }
   }
 
-  if (baseClient.grantType === 'client_credentials' && !filter.clientCredentials) {
+  const grantType = baseClient.grantType ? baseClient.grantType.trim().toLowerCase() : ''
+  const clientType = baseClient.clientType ? baseClient.clientType.trim().toLowerCase() : ''
+
+  if (grantType === 'client_credentials' && !filter.clientCredentials) {
     return false
   }
 
-  if (baseClient.grantType === 'authorisation_code' && !filter.authorisationCode) {
+  if (grantType === 'authorisation_code' && !filter.authorisationCode) {
     return false
   }
 
-  if (baseClient.clientType === 'PERSONAL' && !filter.personalClientType) {
+  if (clientType === 'personal' && !filter.personalClientType) {
     return false
   }
-  if (baseClient.clientType === 'SERVICE' && !filter.serviceClientType) {
+  if (clientType === 'service' && !filter.serviceClientType) {
     return false
   }
-  return filter.blankClientType
+
+  if (clientType === '' && !filter.blankClientType) {
+    return false
+  }
+
+  return true
 }
 
 export default (data: BaseClient[], filter?: BaseClientListFilter) => {

server/views/presenters/viewBaseClientPresenter.ts

@@ -12,7 +12,7 @@ export default (baseClient: BaseClient, clients: Client[]) => {
         html: item.created.toLocaleDateString('en-GB'),
       },
       {
-        html: item.accessed.toLocaleDateString('en-GB'),
+        html: item.accessed ? item.accessed.toLocaleDateString('en-GB') : '',
       },
       {
         html: `<a class="govuk-link" href="/base-clients/${baseClient.baseClientId}/clients/${item.clientId}/delete">delete</a>`,