Fix/1595 brackets wrap on workplace ids with whitespace

frontend/src/app/features/wdf/wdf-data-change/funding-requirements/funding-requirements.component.html

@@ -1,6 +1,7 @@
 <div class="govuk-grid">
   <div class="govuk-grid-column-two-thirds">
-    <span class="govuk-caption-xl">{{ workplace.name }} (Workplace ID: {{ workplace.nmdsId }})</span>
+    <span class="govuk-caption-xl">{{ workplace.name }}</span>
+    <span class="govuk-caption-xl">(Workplace ID: {{ workplace.nmdsId | removeTrailingWhitespace }})</span>
     <h1 class="govuk-heading-l govuk-!-margin-bottom-6">
       ASC-WDS funding requirements for {{ wdfStartDate | date: 'yyyy' }} to {{ wdfEndDate | date: 'yyyy' }}
     </h1>

frontend/src/app/features/wdf/wdf-data-change/funding-requirements/funding-requirements.component.spec.ts

@@ -10,6 +10,7 @@ import { MockBreadcrumbService } from '@core/test-utils/MockBreadcrumbService';
 import { MockEstablishmentService } from '@core/test-utils/MockEstablishmentService';
 import { MockPagesService } from '@core/test-utils/MockPagesService';
 import { createMockWdfReport } from '@core/test-utils/MockReportService';
+import { SharedModule } from '@shared/shared.module';
 import { fireEvent, render } from '@testing-library/angular';
 
 import { FundingRequirementsComponent } from './funding-requirements.component';
@@ -20,7 +21,7 @@ describe('FundingRequirementsComponent', () => {
 
   async function setup() {
     const { fixture, getByText, queryByText, getByTestId } = await render(FundingRequirementsComponent, {
-      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule],
+      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule, SharedModule],
       providers: [
         { provide: PagesService, useClass: MockPagesService },
         { provide: EstablishmentService, useClass: MockEstablishmentService },
@@ -78,9 +79,10 @@ describe('FundingRequirementsComponent', () => {
 
     const workplaceName = component.workplace.name;
     const nmdsId = component.workplace.nmdsId;
-    const expectedTitleCaption = `${workplaceName} (Workplace ID: ${nmdsId})`;
+    const workplaceIdCaption = `(Workplace ID: ${nmdsId})`;
 
-    expect(getByText(expectedTitleCaption)).toBeTruthy();
+    expect(getByText(workplaceName)).toBeTruthy();
+    expect(getByText(workplaceIdCaption)).toBeTruthy();
   });
 
   it('should show the funding requirements inset text when requirements are not met', async () => {

frontend/src/app/features/wdf/wdf-data-change/learn-more-about-funding/learn-more-about-funding.component.html

@@ -1,6 +1,8 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <span class="govuk-caption-xl">{{ workplace.name }} (Workplace ID: {{ workplace.nmdsId }})</span>
+    <span class="govuk-caption-xl">{{ workplace.name }}</span>
+    <span class="govuk-caption-xl">(Workplace ID: {{ workplace.nmdsId | removeTrailingWhitespace }})</span>
+
     <h1 class="govuk-heading-l govuk-!-margin-bottom-6">Learn more about the funds that you can claim from</h1>
     <div class="asc-cms-content" [innerHTML]="pages?.content"></div>
     <div class="govuk-!-margin-top-8">

frontend/src/app/features/wdf/wdf-data-change/learn-more-about-funding/learn-more-about-funding.component.spec.ts

@@ -1,23 +1,25 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { getTestBed } from '@angular/core/testing';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { BreadcrumbService } from '@core/services/breadcrumb.service';
+import { EstablishmentService } from '@core/services/establishment.service';
 import { PagesService } from '@core/services/pages.service';
 import { MockActivatedRoute } from '@core/test-utils/MockActivatedRoute';
 import { MockBreadcrumbService } from '@core/test-utils/MockBreadcrumbService';
+import { MockEstablishmentService } from '@core/test-utils/MockEstablishmentService';
 import { MockPagesService } from '@core/test-utils/MockPagesService';
+import { SharedModule } from '@shared/shared.module';
 import { fireEvent, render } from '@testing-library/angular';
+
 import { LearnMoreAboutFundingComponent } from './learn-more-about-funding.component';
-import { EstablishmentService } from '@core/services/establishment.service';
-import { MockEstablishmentService } from '@core/test-utils/MockEstablishmentService';
-import { RouterTestingModule } from '@angular/router/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { getTestBed } from '@angular/core/testing';
 
 describe('LearnMoreAboutFundingComponent', () => {
   const pages = MockPagesService.pagesFactory();
 
   async function setup() {
     const { fixture, getByText, queryByText } = await render(LearnMoreAboutFundingComponent, {
-      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule],
+      imports: [RouterModule, RouterTestingModule, HttpClientTestingModule, SharedModule],
       declarations: [],
       providers: [
         { provide: PagesService, useClass: MockPagesService },
@@ -67,9 +69,10 @@ describe('LearnMoreAboutFundingComponent', () => {
 
     const workplaceName = component.workplace.name;
     const nmdsId = component.workplace.nmdsId;
-    const expectedTitleCaption = `${workplaceName} (Workplace ID: ${nmdsId})`;
+    const workplaceIdCaption = `(Workplace ID: ${nmdsId})`;
 
-    expect(getByText(expectedTitleCaption)).toBeTruthy();
+    expect(getByText(workplaceName)).toBeTruthy();
+    expect(getByText(workplaceIdCaption)).toBeTruthy();
   });
 
   it("should navigate to wdf main page when 'Does your data meet funding requirements?' is clicked", async () => {

frontend/src/app/features/wdf/wdf-data-change/wdf-data/wdf-data.component.html

@@ -1,14 +1,14 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <h1 class="govuk-heading-l govuk-!-margin-bottom-8">
-      <span class="govuk-caption-xl">
-        <ng-container *ngIf="viewingSub; else primaryWorkplacePreHeader">
-          {{ primaryWorkplaceName }} (Workplace ID: {{ primaryWorkplaceNmdsId }})
-        </ng-container>
-        <ng-template #primaryWorkplacePreHeader>
-          {{ workplace?.name }} (Workplace ID: {{ workplace?.nmdsId }})
-        </ng-template>
-      </span>
+      <ng-container *ngIf="viewingSub; else primaryWorkplacePreHeader">
+        <span class="govuk-caption-xl">{{ primaryWorkplaceName }}</span>
+        <span class="govuk-caption-xl">(Workplace ID: {{ primaryWorkplaceNmdsId | removeTrailingWhitespace }})</span>
+      </ng-container>
+      <ng-template #primaryWorkplacePreHeader>
+        <span class="govuk-caption-xl">{{ workplace?.name }}</span>
+        <span class="govuk-caption-xl">(Workplace ID: {{ workplace?.nmdsId | removeTrailingWhitespace }})</span>
+      </ng-template>
       <ng-container *ngIf="viewingSub; else mainWorkplace"> {{ workplace?.name }}: data </ng-container>
       <ng-template #mainWorkplace> Your data </ng-template>
     </h1>

frontend/src/app/features/wdf/wdf-data-change/wdf-data/wdf-data.component.spec.ts

@@ -86,13 +86,17 @@ describe('WdfDataComponent', () => {
   describe('Header', () => {
     describe('Parent or standalone', () => {
       it('should display the workplace name and the nmds ID in brackets in caption above title', async () => {
+        const workplaceName = 'Mock Workplace Name';
         const workplace = establishmentBuilder();
-        workplace.name = 'Test Workplace';
+        workplace.name = workplaceName;
         workplace.nmdsId = 'AB123456';
 
         const { getByText } = await setup({ workplace });
 
-        expect(getByText(`${workplace.name} (Workplace ID: ${workplace.nmdsId})`)).toBeTruthy();
+        const workplaceIdCaption = `(Workplace ID: ${workplace.nmdsId})`;
+
+        expect(getByText(workplaceName, { selector: '.govuk-caption-xl' })).toBeTruthy();
+        expect(getByText(workplaceIdCaption)).toBeTruthy();
       });
 
       it('should display header text', async () => {
@@ -109,7 +113,8 @@ describe('WdfDataComponent', () => {
         const parentName = establishmentService.primaryWorkplace.name;
         const parentNmdsId = establishmentService.primaryWorkplace.nmdsId;
 
-        expect(getByText(`${parentName} (Workplace ID: ${parentNmdsId})`)).toBeTruthy();
+        expect(getByText(parentName)).toBeTruthy();
+        expect(getByText(`(Workplace ID: ${parentNmdsId})`)).toBeTruthy();
       });
 
       it('should display the sub workplace name and data in title', async () => {

frontend/src/app/features/wdf/wdf-data-change/wdf-overview/wdf-overview.component.html

@@ -1,6 +1,8 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
-    <span class="govuk-caption-xl">{{ workplace.name }} (Workplace ID: {{ workplace.nmdsId }})</span>
+    <span class="govuk-caption-xl">{{ workplace.name }}</span>
+    <span class="govuk-caption-xl">(Workplace ID: {{ workplace.nmdsId | removeTrailingWhitespace }})</span>
+
     <h1 class="govuk-heading-l govuk-!-margin-bottom-6">
       Does your data meet funding requirements for {{ wdfStartDate | date: 'yyyy' }} to {{ wdfEndDate | date: 'yyyy' }}?
     </h1>

frontend/src/app/features/wdf/wdf-data-change/wdf-overview/wdf-overview.component.spec.ts

@@ -87,9 +87,10 @@ describe('WdfOverviewComponent', () => {
 
       const workplaceName = component.workplace.name;
       const nmdsId = component.workplace.nmdsId;
-      const expectedTitleCaption = `${workplaceName} (Workplace ID: ${nmdsId})`;
+      const workplaceIdCaption = `(Workplace ID: ${nmdsId})`;
 
-      expect(getByText(expectedTitleCaption)).toBeTruthy();
+      expect(getByText(workplaceName, { selector: '.govuk-caption-xl' })).toBeTruthy();
+      expect(getByText(workplaceIdCaption)).toBeTruthy();
     });
 
     it('should display the page with title the correct timeframe ', async () => {

frontend/src/app/shared/components/user-accounts-summary/user-accounts-summary.component.html

@@ -1,13 +1,13 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-two-thirds">
     <legend *ngIf="isParentUsers" class="fobuk-fieldset__legend govuk-fieldset__legend--l">
-      <span class="govuk-caption-l" data-testid="workplace-name"
-        >{{ workplace.name }} (Workplace ID: {{ workplace.nmdsId }})</span
-      >
+      <span class="govuk-caption-l">{{ workplace.name }}</span>
+      <span class="govuk-caption-l">(Workplace ID: {{ workplace.nmdsId | removeTrailingWhitespace }})</span>
+
       <h1 class="govuk-fieldset__heading">Users ({{ users.length }})</h1>
     </legend>
-  <h2 *ngIf="!isParentUsers" class="govuk-heading-m">Users ({{ users.length }})</h2>
-    <div *ngIf="showSecondUserBanner" [ngClass]="{ 'govuk-grid-column-full govuk-!-padding-left-0': isParentUsers }" >
+    <h2 *ngIf="!isParentUsers" class="govuk-heading-m">Users ({{ users.length }})</h2>
+    <div *ngIf="showSecondUserBanner" [ngClass]="{ 'govuk-grid-column-full govuk-!-padding-left-0': isParentUsers }">
       <app-inset-text [color]="'todo'">
         <h3 class="govuk-heading-s">You should add a second user</h3>
         <p>

frontend/src/app/shared/components/user-accounts-summary/user-accounts-summary.component.spec.ts

@@ -16,10 +16,16 @@ import { Establishment } from '../../../../mockdata/establishment';
 
 describe('UserAccountsSummaryComponent', () => {
   const setup = async (showBanner = undefined, overLimit = false, isParentUsers = false) => {
-    const { fixture, getByText, getAllByText, getByTestId, queryByText, queryByTestId } = await render(UserAccountsSummaryComponent, {
+    const workplace = Establishment;
+
+    const setupTools = await render(UserAccountsSummaryComponent, {
       imports: [SharedModule, RouterModule, RouterTestingModule, HttpClientTestingModule],
       declarations: [],
-      componentProperties: { workplace: Establishment, showSecondUserBanner: showBanner, isParentUsers: isParentUsers },
+      componentProperties: {
+        workplace,
+        showSecondUserBanner: showBanner,
+        isParentUsers: isParentUsers,
+      },
       providers: [
         {
           provide: PermissionsService,
@@ -40,33 +46,39 @@ describe('UserAccountsSummaryComponent', () => {
         },
       ],
     });
-    const component = fixture.componentInstance;
+    const component = setupTools.fixture.componentInstance;
 
-    return { component, fixture, getByText, getAllByText, getByTestId, queryByText, queryByTestId };
+    return { ...setupTools, component, workplace };
   };
 
   it('should render a User Account Summary Workplace Component', async () => {
     const { component } = await setup();
     expect(component).toBeTruthy();
   });
 
-  it('should show the workplace name and id, and the number of users', async () => {
-    const { getByTestId, getByText } = await setup(false, false, true);
+  it('should show the workplace name and id when in parent view', async () => {
+    const { getByText, workplace } = await setup(false, false, true);
 
-    const workplaceInfo = getByTestId('workplace-name');
-    const numberOfUsers = getByText('Users (1)');
+    const workplaceIdCaption = `(Workplace ID: ${workplace.nmdsId})`;
 
-    expect(workplaceInfo).toBeTruthy();
-    expect(numberOfUsers).toBeTruthy();
+    expect(getByText(workplace.name)).toBeTruthy();
+    expect(getByText(workplaceIdCaption)).toBeTruthy();
+  });
+
+  it('should not show the workplace name and id when not in parent view', async () => {
+    const { queryByText, workplace } = await setup();
+
+    const workplaceIdCaption = `(Workplace ID: ${workplace.nmdsId})`;
+
+    expect(queryByText(workplace.name)).toBeFalsy();
+    expect(queryByText(workplaceIdCaption)).toBeFalsy();
   });
 
-  it('should not show the workplace name and id, instead it should only show the number of users', async () => {
-    const { queryByText, getByText } = await setup();
+  it('should show the number of users', async () => {
+    const { getByText } = await setup(false, false, true);
 
-    const workplaceInfo = queryByText('workplace-name');
     const numberOfUsers = getByText('Users (1)');
 
-    expect(workplaceInfo).toBeFalsy();
     expect(numberOfUsers).toBeTruthy();
   });
 
@@ -179,7 +191,6 @@ describe('UserAccountsSummaryComponent', () => {
     expect(getByText(fullname)).toBeTruthy();
   });
 
-
   describe('Permissions column', () => {
     it('should have permission as Primary edit and WDF when user isPrimary and canManageWdfClaims are true and role is Edit', async () => {
       const { component, fixture, queryByText } = await setup();

frontend/src/app/shared/pipes/remove-trailing-whitespace.pipe.spec.ts

@@ -0,0 +1,38 @@
+import { RemoveTrailingWhitespacePipe } from './remove-trailing-whitespace.pipe';
+
+describe('RemoveTrailingWhitespacePipe', () => {
+  let pipe: RemoveTrailingWhitespacePipe;
+
+  beforeEach(() => {
+    pipe = new RemoveTrailingWhitespacePipe();
+  });
+
+  it('should create', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should remove trailing whitespace from a string', () => {
+    const result = pipe.transform('   Hello World   ');
+    expect(result).toBe('   Hello World');
+  });
+
+  it('should return strings with no trailing whitespace as the same', () => {
+    const result = pipe.transform('Hello World');
+    expect(result).toBe('Hello World');
+  });
+
+  it('should return an empty string if the input is null', () => {
+    const result = pipe.transform(null);
+    expect(result).toBe('');
+  });
+
+  it('should return an empty string if the input is undefined', () => {
+    const result = pipe.transform(undefined);
+    expect(result).toBe('');
+  });
+
+  it('should return an empty string if the input is an empty string', () => {
+    const result = pipe.transform('');
+    expect(result).toBe('');
+  });
+});

frontend/src/app/shared/pipes/remove-trailing-whitespace.pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'removeTrailingWhitespace',
+})
+export class RemoveTrailingWhitespacePipe implements PipeTransform {
+  transform(value: string | null | undefined): string {
+    return value ? value.replace(/\s+$/, '') : '';
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -4,8 +4,8 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { CannotCreateAccountComponent } from '@core/components/error/cannot-create-account/cannot-create-account.component';
-import { PageNotFoundComponent } from '@core/components/error/page-not-found/page-not-found.component';
 import { PageNoLongerAvailableComponent } from '@core/components/error/page-no-longer-available/page-no-longer-available.component';
+import { PageNotFoundComponent } from '@core/components/error/page-not-found/page-not-found.component';
 import { ArticleListResolver } from '@core/resolvers/article-list.resolver';
 import { PageResolver } from '@core/resolvers/page.resolver';
 import { DialogService } from '@core/services/dialog.service';
@@ -110,6 +110,7 @@ import { WdfStaffMismatchMessageComponent } from './components/wdf-staff-mismatc
 import { WdfSummaryPanel } from './components/wdf-summary-panel/wdf-summary-panel.component';
 import { WdfTabComponent } from './components/wdf-tab/wdf-tab.component';
 import { WorkplaceContinueCancelButtonComponent } from './components/workplace-continue-cancel-button.component/workplace-continue-cancel-button.component';
+import { WorkplaceNameAddress } from './components/workplace-name-address/workplace-name-address.component';
 import { WorkplaceSubmitButtonComponent } from './components/workplace-submit-button/workplace-submit-button.component';
 import { WorkplaceSummaryComponent } from './components/workplace-summary/workplace-summary.component';
 import { FileValueAccessorDirective } from './form-controls/file-control-value-accessor';
@@ -127,12 +128,12 @@ import { NursingCategoriesTextPipe } from './pipes/nursing-categories-text.pipe'
 import { NursingSpecialismsTextPipe } from './pipes/nursing-specialisms-text.pipe';
 import { OpenEndedAnswerPipe } from './pipes/open-ended-answer.pipe';
 import { OrderOtherPipe } from './pipes/order-other.pipe';
+import { RemoveTrailingWhitespacePipe } from './pipes/remove-trailing-whitespace.pipe';
 import { SelectRecordTypePipe } from './pipes/select-record-type.pipe';
 import { ServiceNamePipe } from './pipes/service-name.pipe';
 import { WorkerDaysPipe } from './pipes/worker-days.pipe';
 import { WorkerPayPipe } from './pipes/worker-pay.pipe';
 import { WorkplacePermissionsBearerPipe } from './pipes/workplace-permissions-bearer.pipe';
-import { WorkplaceNameAddress } from './components/workplace-name-address/workplace-name-address.component';
 
 @NgModule({
   imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, OverlayModule],
@@ -267,6 +268,7 @@ import { WorkplaceNameAddress } from './components/workplace-name-address/workpl
     FundingRequirementsStateComponent,
     SelectViewPanelComponent,
     WorkplaceNameAddress,
+    RemoveTrailingWhitespacePipe,
   ],
   exports: [
     AbsoluteNumberPipe,
@@ -396,6 +398,7 @@ import { WorkplaceNameAddress } from './components/workplace-name-address/workpl
     FundingRequirementsStateComponent,
     SelectViewPanelComponent,
     WorkplaceNameAddress,
+    RemoveTrailingWhitespacePipe,
   ],
   providers: [DialogService, TotalStaffComponent, ArticleListResolver, PageResolver],
 })