From 34eeb4e03c2ba543dd0d5136db772f32d13dd2e7 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Wed, 13 Dec 2023 09:23:28 +0100 Subject: [PATCH 1/9] Add component max-lines with toggle --- .../src/lib/max-lines/max-lines.component.css | 0 .../lib/max-lines/max-lines.component.html | 15 ++++ .../src/lib/max-lines/max-lines.component.ts | 83 +++++++++++++++++++ .../metadata-info.component.html | 11 +-- .../ui/elements/src/lib/ui-elements.module.ts | 4 +- 5 files changed, 107 insertions(+), 6 deletions(-) create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.css create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.html create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.ts diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.css b/libs/ui/elements/src/lib/max-lines/max-lines.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.html b/libs/ui/elements/src/lib/max-lines/max-lines.component.html new file mode 100644 index 0000000000..ca94208cde --- /dev/null +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.html @@ -0,0 +1,15 @@ +
+ +
+
+ {{ isExpanded ? 'Show Less' : 'Read More' }} +
diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts new file mode 100644 index 0000000000..22654cba0f --- /dev/null +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts @@ -0,0 +1,83 @@ +import { + Component, + Input, + ElementRef, + ChangeDetectionStrategy, + AfterViewInit, + ViewChild, + OnDestroy, + ChangeDetectorRef, +} from '@angular/core' + +@Component({ + selector: 'gn-ui-max-lines', + templateUrl: './max-lines.component.html', + styleUrls: ['./max-lines.component.css'], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class MaxLinesComponent implements AfterViewInit, OnDestroy { + @Input() maxLines = 6 + + isExpanded = false + maxHeight = '' + showToggleButton = false + observer: ResizeObserver + + @ViewChild('container') container!: ElementRef + + constructor(private cdr: ChangeDetectorRef) {} + + ngAfterViewInit() { + this.calculateMaxHeight() + + this.observer = new ResizeObserver((mutations) => { + mutations.forEach(() => { + this.calculateMaxHeight() + }) + }) + + this.observer.observe(this.container.nativeElement.children[0]) + } + + toggleDisplay() { + this.isExpanded = !this.isExpanded + this.calculateMaxHeight() + } + + calculateMaxHeight() { + const containerElement = this.container.nativeElement + const contentElement = containerElement.children[0] + const contentHeight = contentElement.getBoundingClientRect().height + + if (contentHeight) { + if (contentHeight > this.maxLines * this.getLineHeight(contentElement)) { + this.showToggleButton = true + + this.maxHeight = this.isExpanded + ? `${contentHeight}px` + : `${this.maxLines * this.getLineHeight(contentElement)}px` + } else { + this.showToggleButton = false + this.maxHeight = `${contentHeight}px` + } + containerElement.setAttribute( + 'style', + `height: ${this.maxHeight}; max-height: ${this.maxHeight}; overflow: hidden` + ) + + this.cdr.detectChanges() + } + } + + getLineHeight(element: HTMLElement): number { + const computedStyle = window.getComputedStyle(element) + const lineHeight = parseFloat(computedStyle.lineHeight) + const fontSize = parseFloat(computedStyle.fontSize || '14') + const result = isNaN(lineHeight) ? fontSize * 1.2 : lineHeight // Use a default if line height is not specified + return result + } + + ngOnDestroy(): void { + this.observer.unobserve(this.container.nativeElement.children[0]) + } +} diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html index 49f224d172..0ab056c244 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html @@ -6,11 +6,12 @@

-

+ +

+
diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts index b0faaf4305..de219197c5 100644 --- a/libs/ui/elements/src/lib/ui-elements.module.ts +++ b/libs/ui/elements/src/lib/ui-elements.module.ts @@ -26,7 +26,8 @@ import { FormsModule } from '@angular/forms' import { AvatarComponent } from './avatar/avatar.component' import { UserPreviewComponent } from './user-preview/user-preview.component' import { GnUiLinkifyDirective } from './metadata-info/linkify.directive' -import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component' +import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'; +import { MaxLinesComponent } from './max-lines/max-lines.component' @NgModule({ imports: [ @@ -61,6 +62,7 @@ import { PaginationButtonsComponent } from './pagination-buttons/pagination-butt UserPreviewComponent, GnUiLinkifyDirective, PaginationButtonsComponent, + MaxLinesComponent, ], exports: [ MetadataInfoComponent, From 0f9c51d0e4db3a2b80b64063459da15929933c3b Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Wed, 13 Dec 2023 13:56:59 +0100 Subject: [PATCH 2/9] feat(ui): Add storybook story for max-lines component --- .../max-lines/max-lines.component.stories.ts | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.stories.ts diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.stories.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.stories.ts new file mode 100644 index 0000000000..07c296f742 --- /dev/null +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.stories.ts @@ -0,0 +1,40 @@ +import { + applicationConfig, + componentWrapperDecorator, + Meta, + moduleMetadata, + StoryObj, +} from '@storybook/angular' +import { MaxLinesComponent } from './max-lines.component' + +export default { + title: 'Elements/MaxLinesComponent', + component: MaxLinesComponent, + decorators: [ + moduleMetadata({ + declarations: [MaxLinesComponent], + imports: [], + }), + applicationConfig({ + providers: [], + }), + componentWrapperDecorator( + (story) => `
${story}
` + ), + ], +} as Meta + +const largeContent = `

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin purus elit, tincidunt et gravida sit amet, mattis eget orci. Suspendisse dignissim magna sed neque rutrum lobortis. Aenean vitae quam sapien. Phasellus eleifend tortor ac imperdiet tristique. Curabitur aliquet mauris tristique, iaculis est sit amet, pulvinar ipsum. Maecenas lacinia varius felis sit amet tempor. Curabitur pulvinar ipsum eros, quis accumsan odio hendrerit sit amet. + +Vestibulum placerat posuere lectus, sed lacinia orci sagittis consectetur. Duis eget eros consectetur, pretium nulla semper, pretium justo. Nullam facilisis maximus ipsum, a tempus erat eleifend non. Nulla nec lorem sed lorem porttitor ornare. Aliquam condimentum ante at laoreet dignissim. Vestibulum vel laoreet libero. Nam finibus augue ut ligula vulputate porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Nunc lorem nunc, interdum sed leo vel, vestibulum venenatis diam. Nam eget dignissim purus. Cras convallis leo sed porta tristique.

` + +export const Primary: StoryObj = { + args: { + maxLines: 6, + }, + render: (args) => ({ + template: `
+ ${largeContent} +
`, + }), +} From 82f2d3302bd663eb5194eda934a8514438b13e50 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Wed, 13 Dec 2023 17:04:30 +0100 Subject: [PATCH 3/9] feat(ui): Add tests WIP --- .../lib/max-lines/max-lines.component.spec.ts | 76 +++++++++++++++++++ libs/ui/elements/src/test-setup.ts | 7 ++ 2 files changed, 83 insertions(+) create mode 100644 libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts new file mode 100644 index 0000000000..28afa3195e --- /dev/null +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts @@ -0,0 +1,76 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing' + +import { MaxLinesComponent } from './max-lines.component' +import { Component } from '@angular/core' + +@Component({ + template: ` + +
+

Lorem ipsum dolor sit amet

+
+ + `, +}) +class TestHostComponent { + maxLines: number +} +describe('MaxLinesComponent', () => { + let fixture: ComponentFixture + let hostComponent: TestHostComponent + let maxLinesComponent: MaxLinesComponent + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [MaxLinesComponent, TestHostComponent], + }) + fixture = TestBed.createComponent(TestHostComponent) + hostComponent = fixture.componentInstance + maxLinesComponent = fixture.debugElement.children[0].componentInstance + fixture.detectChanges() + }) + + it('should create', () => { + expect(maxLinesComponent).toBeTruthy() + }) + + it('should render content correctly', () => { + hostComponent.maxLines = 10 + fixture.detectChanges() + + const contentElement: HTMLElement = + fixture.nativeElement.querySelector('.test-content') + expect(contentElement.childNodes[0].textContent).toBe( + 'Lorem ipsum dolor sit amet' + ) + }) + + it('should adjust maxHeight based on content height', () => { + let contentElement: HTMLElement = + fixture.nativeElement.querySelector('.test-content') + + contentElement = fixture.nativeElement.querySelector('.test-content') + + const expectedHeight = `${ + maxLinesComponent.getLineHeight(contentElement) * + maxLinesComponent.maxLines + }px` + + expect(maxLinesComponent.maxHeight).toBe(expectedHeight) + }) + + it('should show "Show More" button for long content', () => { + expect(maxLinesComponent.showToggleButton).toBeTruthy() + }) + + it('should toggle display when "Show More" button is clicked', () => { + maxLinesComponent.toggleDisplay() + + expect(maxLinesComponent.isExpanded).toBeTruthy() + expect(maxLinesComponent.maxHeight).toBe('') + }) + + afterEach(() => { + fixture.destroy() + }) +}) diff --git a/libs/ui/elements/src/test-setup.ts b/libs/ui/elements/src/test-setup.ts index 70e41af1c8..19b403b6c7 100644 --- a/libs/ui/elements/src/test-setup.ts +++ b/libs/ui/elements/src/test-setup.ts @@ -13,3 +13,10 @@ getTestBed().initTestEnvironment( platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } } ) + +class ResizeObserverMock { + observe = jest.fn() + unobserve = jest.fn() +} + +;(window as any).ResizeObserver = ResizeObserverMock From 8327b872ee12cd509013ee150bc005a28556b011 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Tue, 19 Dec 2023 15:08:42 +0100 Subject: [PATCH 4/9] feat(ui): Adjust tests and make them pass --- .../lib/max-lines/max-lines.component.spec.ts | 87 ++++++++++++++----- 1 file changed, 65 insertions(+), 22 deletions(-) diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts index 28afa3195e..00a857e1ff 100644 --- a/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.spec.ts @@ -6,7 +6,7 @@ import { Component } from '@angular/core' @Component({ template: ` -
+

Lorem ipsum dolor sit amet

@@ -27,10 +27,10 @@ describe('MaxLinesComponent', () => { fixture = TestBed.createComponent(TestHostComponent) hostComponent = fixture.componentInstance maxLinesComponent = fixture.debugElement.children[0].componentInstance - fixture.detectChanges() }) it('should create', () => { + fixture.detectChanges() expect(maxLinesComponent).toBeTruthy() }) @@ -38,36 +38,79 @@ describe('MaxLinesComponent', () => { hostComponent.maxLines = 10 fixture.detectChanges() - const contentElement: HTMLElement = - fixture.nativeElement.querySelector('.test-content') - expect(contentElement.childNodes[0].textContent).toBe( + const maxLinesElement: HTMLElement = + fixture.nativeElement.querySelector('.max-lines') + expect(maxLinesElement.childNodes[0].textContent).toBe( 'Lorem ipsum dolor sit amet' ) }) - it('should adjust maxHeight based on content height', () => { - let contentElement: HTMLElement = - fixture.nativeElement.querySelector('.test-content') + describe('should adjust maxHeight based on content height', () => { + const contentHeight = 120 + beforeEach(() => { + jest + .spyOn( + fixture.nativeElement.querySelector('.test-content'), + 'getBoundingClientRect' + ) + .mockReturnValueOnce({ + left: 100, + top: 50, + right: 20, + bottom: 10, + x: 30, + y: 40, + widht: 150, + height: contentHeight, + }) + }) + it('use content height if content height is smaller than max space', () => { + hostComponent.maxLines = 10 + + fixture.detectChanges() - contentElement = fixture.nativeElement.querySelector('.test-content') + expect(maxLinesComponent.maxHeight).toBe(`${contentHeight}px`) + }) - const expectedHeight = `${ - maxLinesComponent.getLineHeight(contentElement) * - maxLinesComponent.maxLines - }px` + it('use max space height if content height is bigger than max space', () => { + hostComponent.maxLines = 2 - expect(maxLinesComponent.maxHeight).toBe(expectedHeight) - }) + const contentElement = + fixture.nativeElement.querySelector('.test-content') + fixture.detectChanges() - it('should show "Show More" button for long content', () => { - expect(maxLinesComponent.showToggleButton).toBeTruthy() - }) + const maxSpace = + maxLinesComponent.getLineHeight(contentElement) * + maxLinesComponent.maxLines + + expect(maxLinesComponent.maxHeight).toBe(`${maxSpace}px`) + }) + + it('should show "Show More" button for long content', () => { + hostComponent.maxLines = 2 + + fixture.detectChanges() + + expect(maxLinesComponent.showToggleButton).toBeTruthy() + }) + + it('should toggle display when "Show More" button is clicked', () => { + hostComponent.maxLines = 2 - it('should toggle display when "Show More" button is clicked', () => { - maxLinesComponent.toggleDisplay() + const contentElement = + fixture.nativeElement.querySelector('.test-content') + fixture.detectChanges() - expect(maxLinesComponent.isExpanded).toBeTruthy() - expect(maxLinesComponent.maxHeight).toBe('') + maxLinesComponent.toggleDisplay() + + expect(maxLinesComponent.isExpanded).toBeTruthy() + expect(maxLinesComponent.maxHeight).toBe( + `${ + maxLinesComponent.maxLines * + maxLinesComponent.getLineHeight(contentElement) + }px` + ) + }) }) afterEach(() => { From b4d4d1628b079f0898433f95fac39f4120184d39 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Tue, 19 Dec 2023 15:45:24 +0100 Subject: [PATCH 5/9] fix(e2e): Fix e2e test about description --- apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 0fd48c48db..3e65952974 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -106,6 +106,8 @@ describe('dataset pages', () => { .find('[id="about"]') .find('gn-ui-metadata-info') .find('gn-ui-content-ghost') + .find('gn-ui-max-lines') + .children('div') .children('p') .should(($element) => { const text = $element.text().trim() From eef415df1c1865b558f3350e90d26220577819e0 Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Tue, 19 Dec 2023 16:32:50 +0100 Subject: [PATCH 6/9] feat(ui): Add translations for read more, read less --- libs/ui/elements/src/lib/max-lines/max-lines.component.html | 2 +- libs/ui/elements/src/lib/ui-elements.module.ts | 2 +- translations/de.json | 2 ++ translations/en.json | 2 ++ translations/es.json | 2 ++ translations/fr.json | 2 ++ translations/it.json | 2 ++ translations/nl.json | 2 ++ translations/pt.json | 2 ++ translations/sk.json | 2 ++ 10 files changed, 18 insertions(+), 2 deletions(-) diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.html b/libs/ui/elements/src/lib/max-lines/max-lines.component.html index ca94208cde..040a870e84 100644 --- a/libs/ui/elements/src/lib/max-lines/max-lines.component.html +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.html @@ -11,5 +11,5 @@ (click)="toggleDisplay()" class="text-primary cursor-pointer pt-2.5" > - {{ isExpanded ? 'Show Less' : 'Read More' }} + {{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
diff --git a/libs/ui/elements/src/lib/ui-elements.module.ts b/libs/ui/elements/src/lib/ui-elements.module.ts index de219197c5..377675c95f 100644 --- a/libs/ui/elements/src/lib/ui-elements.module.ts +++ b/libs/ui/elements/src/lib/ui-elements.module.ts @@ -26,7 +26,7 @@ import { FormsModule } from '@angular/forms' import { AvatarComponent } from './avatar/avatar.component' import { UserPreviewComponent } from './user-preview/user-preview.component' import { GnUiLinkifyDirective } from './metadata-info/linkify.directive' -import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component'; +import { PaginationButtonsComponent } from './pagination-buttons/pagination-buttons.component' import { MaxLinesComponent } from './max-lines/max-lines.component' @NgModule({ diff --git a/translations/de.json b/translations/de.json index 6ecb5d6d4a..53e9c81a52 100644 --- a/translations/de.json +++ b/translations/de.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "HTML kopieren", "tooltip.url.copy": "URL kopieren", "tooltip.url.open": "URL öffnen", + "ui.readLess": "Weniger lesen", + "ui.readMore": "Weiterlesen", "wfs.featuretype.notfound": "Kein passender Feature-Typ wurde im Dienst gefunden", "wfs.geojsongml.notsupported": "Dieser Dienst unterstützt das GeoJSON- oder GML-Format nicht", "wfs.unreachable.cors": "Der Dienst konnte aufgrund von CORS-Beschränkungen nicht erreicht werden", diff --git a/translations/en.json b/translations/en.json index cce6353f66..26a9cf9506 100644 --- a/translations/en.json +++ b/translations/en.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "Copy HTML", "tooltip.url.copy": "Copy URL", "tooltip.url.open": "Open URL", + "ui.readLess": "Read less", + "ui.readMore": "Read more", "wfs.featuretype.notfound": "No matching feature type was found in the service", "wfs.geojsongml.notsupported": "This service does not support the GeoJSON or GML format", "wfs.unreachable.cors": "The service could not be reached because of CORS limitations", diff --git a/translations/es.json b/translations/es.json index 9e4bd02a79..daf3244485 100644 --- a/translations/es.json +++ b/translations/es.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "", "tooltip.url.copy": "", "tooltip.url.open": "", + "ui.readLess": "", + "ui.readMore": "", "wfs.featuretype.notfound": "", "wfs.geojsongml.notsupported": "", "wfs.unreachable.cors": "", diff --git a/translations/fr.json b/translations/fr.json index 795fff860d..96ccb278b4 100644 --- a/translations/fr.json +++ b/translations/fr.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "Copier le HTML", "tooltip.url.copy": "Copier l'URL", "tooltip.url.open": "Ouvrir l'URL", + "ui.readLess": "Réduire", + "ui.readMore": "Lire la suite", "wfs.featuretype.notfound": "La classe d'objet n'a pas été trouvée dans le service", "wfs.geojsongml.notsupported": "Le service ne supporte pas le format GeoJSON ou GML", "wfs.unreachable.cors": "Le service n'est pas accessible en raison de limitations CORS", diff --git a/translations/it.json b/translations/it.json index b5c7f49092..5a8638635c 100644 --- a/translations/it.json +++ b/translations/it.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "", "tooltip.url.copy": "", "tooltip.url.open": "", + "ui.readLess": "", + "ui.readMore": "", "wfs.featuretype.notfound": "", "wfs.geojsongml.notsupported": "", "wfs.unreachable.cors": "", diff --git a/translations/nl.json b/translations/nl.json index 2176b77624..e0dffaca5e 100644 --- a/translations/nl.json +++ b/translations/nl.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "", "tooltip.url.copy": "", "tooltip.url.open": "", + "ui.readLess": "", + "ui.readMore": "", "wfs.featuretype.notfound": "", "wfs.geojsongml.notsupported": "", "wfs.unreachable.cors": "", diff --git a/translations/pt.json b/translations/pt.json index 4a2bdba25c..232c3f7051 100644 --- a/translations/pt.json +++ b/translations/pt.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "", "tooltip.url.copy": "", "tooltip.url.open": "", + "ui.readLess": "", + "ui.readMore": "", "wfs.featuretype.notfound": "", "wfs.geojsongml.notsupported": "", "wfs.unreachable.cors": "", diff --git a/translations/sk.json b/translations/sk.json index c43cce6973..107da7447d 100644 --- a/translations/sk.json +++ b/translations/sk.json @@ -294,6 +294,8 @@ "tooltip.html.copy": "", "tooltip.url.copy": "", "tooltip.url.open": "", + "ui.readLess": "", + "ui.readMore": "", "wfs.featuretype.notfound": "", "wfs.geojsongml.notsupported": "", "wfs.unreachable.cors": "", From 8622d11debcedec9de4e1a9c70b30287a2755ddd Mon Sep 17 00:00:00 2001 From: Angelika Kinas Date: Wed, 20 Dec 2023 12:43:52 +0100 Subject: [PATCH 7/9] feat(DH): Include keywords in toggle block, adapt e2e --- .../src/e2e/datasetDetailPage.cy.ts | 36 ++++++++++------- .../lib/max-lines/max-lines.component.html | 2 +- .../src/lib/max-lines/max-lines.component.ts | 2 +- .../metadata-info.component.html | 39 ++++++++++--------- 4 files changed, 44 insertions(+), 35 deletions(-) diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index 3e65952974..a13e935c01 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -108,6 +108,7 @@ describe('dataset pages', () => { .find('gn-ui-content-ghost') .find('gn-ui-max-lines') .children('div') + .children('div') .children('p') .should(($element) => { const text = $element.text().trim() @@ -148,8 +149,11 @@ describe('dataset pages', () => { cy.get('datahub-record-metadata') .find('[id="about"]') .find('gn-ui-metadata-info') + .find('gn-ui-content-ghost') + .find('gn-ui-max-lines') + .children('div') + .children('div') .children('div') - .eq(1) .children('gn-ui-badge') .should('have.length.gt', 0) }) @@ -195,22 +199,26 @@ describe('dataset pages', () => { cy.get('datahub-record-metadata') .find('[id="about"]') .find('gn-ui-metadata-info') + .find('gn-ui-content-ghost') + .find('gn-ui-max-lines') + .children('div') + .contains('Read more') + .click() + + cy.get('datahub-record-metadata') + .find('gn-ui-badge') .children('div') - .eq(1) - .children('gn-ui-badge') .first() .as('keyword') - cy.get('@keyword') - .children('div') - .then((key) => { - keyword = key.text().toUpperCase() - cy.get('@keyword').click() - cy.url().should('include', '/search?q=') - cy.get('gn-ui-fuzzy-search') - .find('input') - .should('have.value', keyword) - }) + cy.get('@keyword').then((key) => { + keyword = key.text().toUpperCase() + cy.get('@keyword').first().click() + cy.url().should('include', '/search?q=') + cy.get('gn-ui-fuzzy-search') + .find('input') + .should('have.value', keyword) + }) }) }) }) @@ -445,7 +453,7 @@ describe('dataset pages', () => { .find('gn-ui-copy-text-button') .find('button') .first() - .click({ force: true }) + .realClick() // attempt to make the whole page focused cy.get('body').focus() cy.get('body').realClick() diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.html b/libs/ui/elements/src/lib/max-lines/max-lines.component.html index 040a870e84..42dee99803 100644 --- a/libs/ui/elements/src/lib/max-lines/max-lines.component.html +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.html @@ -9,7 +9,7 @@
{{ (isExpanded ? 'ui.readLess' : 'ui.readMore') | translate }}
diff --git a/libs/ui/elements/src/lib/max-lines/max-lines.component.ts b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts index 22654cba0f..ff55be7b87 100644 --- a/libs/ui/elements/src/lib/max-lines/max-lines.component.ts +++ b/libs/ui/elements/src/lib/max-lines/max-lines.component.ts @@ -62,7 +62,7 @@ export class MaxLinesComponent implements AfterViewInit, OnDestroy { } containerElement.setAttribute( 'style', - `height: ${this.maxHeight}; max-height: ${this.maxHeight}; overflow: hidden` + `max-height: ${this.maxHeight}; overflow: hidden` ) this.cdr.detectChanges() diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html index 0ab056c244..d614a93be2 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html @@ -7,29 +7,30 @@
-

+
+

+ +

+ record.metadata.keywords +

+
+ {{ keyword }} +
+ +
- -

- record.metadata.keywords -

-
- {{ keyword }} -
- -