MAN-82 update styling of results count

ministryofjustice · Jan 28, 2025 · 19b7e23 · 19b7e23
1 parent e7870ec
commit 19b7e23
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/integration_tests/e2e/activityLog.cy.ts b/integration_tests/e2e/activityLog.cy.ts
@@ -166,7 +166,9 @@ context('Activity log', () => {
     page.getSelectedFilterTags().should('have.length', 1)
     page.getSelectedFilterTag(1).should('contain.text', `${fromDate} - ${toDate}`)
     page.getCardHeader('timeline1').should('contain.text', 'Phone call from Eula Schmeler')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 1 of 1')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '1')
   })
   it('should remove the tag, clear both date fields and reset the list if the date range tag is clicked', () => {
     cy.visit('/case/X000001/activity-log')
@@ -181,7 +183,9 @@ context('Activity log', () => {
     page.getDateFromInput().should('have.value', '')
     page.getDateToInput().should('have.value', '')
     page.getCardHeader('timeline1').should('contain.text', 'Video call')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 10 of 54')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '10')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '54')
   })
   it('should display the 3 filter tags and filter the list if all compliance filters as clicked and submitted', () => {
     cy.visit('/case/X000001/activity-log')
@@ -200,7 +204,9 @@ context('Activity log', () => {
     page.getCardHeader('timeline1').should('contain.text', 'AP PA - Attitudes, thinking & behaviours at 9:15am')
     page.getCardHeader('timeline2').should('contain.text', 'Pre-Intervention Session 1 at 9:15am')
     page.getCardHeader('timeline3').should('contain.text', 'Initial Appointment - Home Visit (NS) at 9:15am')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 3 of 3')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '3')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '3')
   })
   it(`should display 2 filter tags, uncheck the filter option and filter the list when 'Not complied' tag is clicked`, () => {
     cy.visit('/case/X000001/activity-log')
@@ -219,7 +225,9 @@ context('Activity log', () => {
     page.getComplianceFilter(3).should('not.be.checked')
     page.getCardHeader('timeline1').should('contain.text', 'AP PA - Attitudes, thinking & behaviours at 9:15am')
     page.getCardHeader('timeline2').should('contain.text', 'Pre-Intervention Session 1 at 9:15am')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 2 of 2')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '2')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '2')
   })
   it(`should display 1 filter tag, uncheck the deselected filter options and filter the list when 'complied' and 'Not complied' tags are clicked`, () => {
     cy.visit('/case/X000001/activity-log')
@@ -250,7 +258,9 @@ context('Activity log', () => {
     page.getApplyFiltersButton().click()
     page.getSelectedFilterTags().should('have.length', 5)
     page.getCardHeader('timeline1').should('contain.text', 'Phone call from Eula Schmeler')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 1 of 1')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '1')
     cy.get('.govuk-pagination').should('not.exist')
     cy.get('.moj-filter__heading-action a').click()
     page.getSelectedFilterTags().should('not.exist')
@@ -261,7 +271,9 @@ context('Activity log', () => {
     page.getComplianceFilter(2).should('not.be.checked')
     page.getComplianceFilter(3).should('not.be.checked')
     page.getCardHeader('timeline1').should('contain.text', 'Video call')
-    cy.get('[data-qa="results-count"]').should('contain.text', 'Showing results 1 to 10 of 54')
+    cy.get('[data-qa="results-count-start"]').should('contain.text', '1')
+    cy.get('[data-qa="results-count-end"]').should('contain.text', '10')
+    cy.get('[data-qa="results-count-total"]').should('contain.text', '54')
     cy.get('.govuk-pagination').should('exist')
   })
   it('Activity log page is rendered in default view', () => {

diff --git a/server/views/pages/activity-log.njk b/server/views/pages/activity-log.njk
@@ -79,7 +79,7 @@
     {% if personActivity.activities.length %}
     <div class="flex flex--space-between">
  {% include "./activity-log/_switch-views.njk" %}
- <p class="govuk-!-margin-bottom-0" data-qa="results-count">Showing results {{ resultsStart }} to {{ resultsEnd }} of {{ personActivity.totalResults }}</p>
+ <p class="govuk-!-margin-bottom-0" data-qa="results-count">Showing <span class="govuk-!-font-weight-bold" data-qa="results-count-start">{{ resultsStart }}</span> to <span class="govuk-!-font-weight-bold"  data-qa="results-count-end">{{ resultsEnd }}</span> of <span class="govuk-!-font-weight-bold" data-qa="results-count-total">{{ personActivity.totalResults }}</span> results</p>
  </div>
     {% set entries = activityLog(entries, category or 'all-previous-activity') %}
     {% if entries.length > 0 %}