diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss index 0251beb465..b6d9e9f600 100644 --- a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss @@ -1,4 +1,11 @@ .adf-about-license-cell { white-space: pre-line; line-height: 30px; + align-items: flex-start; + flex-direction: column; + justify-content: center; + + div { + white-space: nowrap; + } } diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.spec.ts b/lib/core/src/lib/about/about-license-list/about-license-list.component.spec.ts new file mode 100644 index 0000000000..7502760802 --- /dev/null +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.spec.ts @@ -0,0 +1,81 @@ +/*! + * @license + * Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AboutLicenseListComponent, UnitTestingUtils } from '@alfresco/adf-core'; +import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; + +describe('AboutLicenseListComponent', () => { + let fixture: ComponentFixture; + let component: AboutLicenseListComponent; + let unitTestingUtils: UnitTestingUtils; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [AboutLicenseListComponent] + }); + fixture = TestBed.createComponent(AboutLicenseListComponent); + component = fixture.componentInstance; + unitTestingUtils = new UnitTestingUtils(fixture.debugElement, TestbedHarnessEnvironment.loader(fixture)); + }); + + describe('Property value', () => { + const innerTextPropertyName = 'innerText'; + const columnName = 'value'; + + beforeEach(() => { + component.data = [ + { + property: 'Test Property', + value: '✅ Value 1' + } + ]; + }); + + it('should display correct value when contains green check mark icon', async () => { + fixture.detectChanges(); + expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual( + '✅ ABOUT.LICENSE.ENABLED Value 1' + ); + }); + + it('should display correct value when contains red cross icon', async () => { + component.data[0].value = '❌ Value 1'; + + fixture.detectChanges(); + expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual( + '❌ ABOUT.LICENSE.DISABLED Value 1' + ); + }); + + it('should display correct value when contains no icon', async () => { + component.data[0].value = 'Value 1'; + + fixture.detectChanges(); + expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual( + 'Value 1' + ); + }); + + it('should display correct value when there is number value', async () => { + component.data[0].value = 3; + + fixture.detectChanges(); + expect(await (await (await unitTestingUtils.getMatCellByColumnName(columnName)).host()).getProperty(innerTextPropertyName)).toEqual('3'); + }); + }); +}); diff --git a/lib/core/src/lib/about/about-license-list/about-license-list.component.ts b/lib/core/src/lib/about/about-license-list/about-license-list.component.ts index 0a21fe0543..bbde079f8d 100644 --- a/lib/core/src/lib/about/about-license-list/about-license-list.component.ts +++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.ts @@ -18,7 +18,7 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core'; import { LicenseData } from '../interfaces'; import { CommonModule } from '@angular/common'; -import { TranslatePipe } from '@ngx-translate/core'; +import { TranslatePipe, TranslateService } from '@ngx-translate/core'; import { MatTableModule } from '@angular/material/table'; @Component({ @@ -39,7 +39,24 @@ export class AboutLicenseListComponent { { columnDef: 'value', header: 'ABOUT.LICENSE.VALUE', - cell: (row: LicenseData) => `${row.value}` + cell: (row: LicenseData) => { + const enabledIcon = '✅'; + const disabledIcon = '❌'; + const statusAndValueGroupsRegex = new RegExp(`(${enabledIcon}|${disabledIcon})\\s*([^&#]+)`, 'g'); + return typeof row.value === 'string' + ? row.value.replace( + statusAndValueGroupsRegex, + (_match, icon, label) => + `
+ + + ${this.translateService.instant(icon === enabledIcon ? 'ABOUT.LICENSE.ENABLED' : 'ABOUT.LICENSE.DISABLED')} + + ${label} +
` + ) + : row.value; + } } ]; @@ -47,4 +64,6 @@ export class AboutLicenseListComponent { @Input({ required: true }) data: LicenseData[] = []; + + constructor(private readonly translateService: TranslateService) {} } diff --git a/lib/core/src/lib/about/interfaces.ts b/lib/core/src/lib/about/interfaces.ts index a7e6a535e5..482fddc995 100644 --- a/lib/core/src/lib/about/interfaces.ts +++ b/lib/core/src/lib/about/interfaces.ts @@ -27,5 +27,5 @@ export interface StatusData { export interface LicenseData { property: string; - value: string; + value: string | number; } diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index f77ec47585..264127e0b1 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -605,7 +605,9 @@ "LICENSE": { "TITLE": "License", "PROPERTY": "Property", - "VALUE": "Value" + "VALUE": "Value", + "ENABLED": "Enabled", + "DISABLED": "Disabled" }, "STATUS": { "TITLE": "Status", diff --git a/lib/core/src/lib/testing/unit-testing-utils.ts b/lib/core/src/lib/testing/unit-testing-utils.ts index 5e5e068b8b..223ae88ea4 100644 --- a/lib/core/src/lib/testing/unit-testing-utils.ts +++ b/lib/core/src/lib/testing/unit-testing-utils.ts @@ -33,6 +33,7 @@ import { MatToolbarHarness } from '@angular/material/toolbar/testing'; import { MatSnackBarHarness } from '@angular/material/snack-bar/testing'; import { MatProgressBarHarness } from '@angular/material/progress-bar/testing'; import { MatListOptionHarness } from '@angular/material/list/testing'; +import { MatCellHarness } from '@angular/material/table/testing'; export class UnitTestingUtils { constructor( @@ -463,4 +464,10 @@ export class UnitTestingUtils { async getAllMatListOptions(): Promise { return this.loader.getAllHarnesses(MatListOptionHarness); } + + /** MatCell related methods */ + + async getMatCellByColumnName(columnName: string): Promise { + return this.loader.getHarness(MatCellHarness.with({ columnName })); + } }