diff --git a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts index a13e935c01..26d431145b 100644 --- a/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts +++ b/apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts @@ -508,3 +508,122 @@ describe('record with file distributions', () => { .should('deep.eq', ['csv (csv)', 'json (json)', 'geojson (geojson)']) }) }) + +describe('api cards', () => { + beforeEach(() => { + cy.visit('/dataset/accroche_velos') + cy.get('gn-ui-api-card').first().as('firstCard') + }) + + it('should display the open panel button', () => { + cy.get('@firstCard') + .find('button') + .children('mat-icon') + .should('have.text', 'more_horiz') + }) + it('should open and close the panel on click on open panel button', () => { + cy.get('@firstCard').click() + cy.get('gn-ui-record-api-form').should('be.visible') + cy.get('@firstCard').click() + cy.get('gn-ui-record-api-form').should('not.be.visible') + }) +}) + +describe('api form', () => { + beforeEach(() => { + cy.visit('/dataset/accroche_velos') + cy.get('gn-ui-api-card').first().find('button').click() + cy.get('gn-ui-record-api-form').children('div').as('apiForm') + }) + it('should have request inputs', () => { + cy.get('@apiForm').find('gn-ui-text-input').should('have.length', 2) + cy.get('@apiForm').find('gn-ui-dropdown-selector').should('have.length', 1) + cy.get('@apiForm') + .children('div') + .first() + .children('div') + .first() + .find('button') + .should('have.length', 1) + cy.get('@apiForm').find('gn-ui-copy-text-button').should('have.length', 1) + }) + it('should change url on input change', () => { + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .then((url) => { + cy.get('@apiForm').find('gn-ui-text-input').first().clear() + cy.get('@apiForm').find('gn-ui-text-input').first().type('54') + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .then((newUrl) => { + expect(newUrl).to.not.eq(url) + expect(newUrl).to.include('54') + }) + }) + }) + it('should set limit to zero on click on "All" button', () => { + cy.get('@apiForm').find('gn-ui-text-input').first().clear() + cy.get('@apiForm').find('gn-ui-text-input').first().type('54') + cy.get('@apiForm').find('input[type="checkbox"]').check() + cy.get('@apiForm').find('gn-ui-text-input').first().should('have.value', '') + }) + it('should reset all 3 inputs and link on click', () => { + cy.get('@apiForm').find('gn-ui-text-input').first().as('firstInput') + cy.get('@firstInput').clear() + cy.get('@firstInput').type('54') + + cy.get('@apiForm').find('gn-ui-text-input').eq(1).as('secondInput') + cy.get('@secondInput').clear() + cy.get('@secondInput').type('87') + + cy.get('@apiForm').find('gn-ui-dropdown-selector').click() + cy.get('button[data-cy-value="csv"]').click() + + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .should('include', 'offset=87&limit=54&f=csv') + + cy.get('@apiForm').children('div').first().find('button').first().click() + + cy.get('@firstInput').find('input').should('have.value', '') + cy.get('@secondInput').find('input').should('have.value', '') + cy.get('@apiForm') + .find('gn-ui-dropdown-selector') + .find('button') + .children('div') + .should('have.text', ' JSON ') + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .should('include', 'f=json') + }) + it('should close the panel on click', () => { + cy.get('gn-ui-record-api-form').prev().find('button').click() + cy.get('gn-ui-record-api-form').should('not.be.visible') + }) + it('should switch to other card url if card already open', () => { + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .then((url) => { + cy.get('@apiForm').find('gn-ui-text-input').first().clear() + cy.get('@apiForm').find('gn-ui-text-input').first().type('54') + cy.get('gn-ui-api-card').eq(1).find('button').click() + cy.get('@apiForm') + .find('gn-ui-copy-text-button') + .find('input') + .invoke('val') + .then((newUrl) => { + expect(newUrl).to.not.eq(url) + }) + }) + }) +}) diff --git a/apps/datahub-e2e/src/e2e/home.cy.ts b/apps/datahub-e2e/src/e2e/home.cy.ts index 46883d3de6..339b81e756 100644 --- a/apps/datahub-e2e/src/e2e/home.cy.ts +++ b/apps/datahub-e2e/src/e2e/home.cy.ts @@ -1,7 +1,7 @@ /* eslint-disable cypress/no-unnecessary-waiting */ import 'cypress-real-events' -describe('header', () => { +describe('home', () => { beforeEach(() => cy.visit('/')) describe('general display', () => { diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.css b/apps/datahub/src/app/record/record-apis/record-apis.component.css index e69de29bb2..5b19499cd1 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.css +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.css @@ -0,0 +1,3 @@ +.tab-header-label { + @apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker; +} diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.html b/apps/datahub/src/app/record/record-apis/record-apis.component.html index b7b623d5e7..fc5b7d0556 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.html +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.html @@ -1,25 +1,66 @@ -

- record.metadata.api -

- - +

- - + record.metadata.api +

+ + + + + +
+
+
+
+

+ record.metadata.api.form.title +

+ +
+ +
+
+
diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts index 948b6b2fc0..28c7318b45 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.spec.ts @@ -1,19 +1,28 @@ import { ComponentFixture, TestBed } from '@angular/core/testing' -import { Subject } from 'rxjs' import { RecordApisComponent } from './record-apis.component' +import { TranslateModule } from '@ngx-translate/core' +import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' +import { BehaviorSubject } from 'rxjs' class MdViewFacadeMock { - apiLinks$ = new Subject() + selectedApiLink$ = new BehaviorSubject([]) } -describe('DataApisComponent', () => { +const serviceDistributionMock = { + type: 'service', + url: new URL('http://myogcapifeatures.test'), + accessServiceProtocol: 'ogcFeatures', +} as DatasetServiceDistribution + +describe('RecordApisComponent', () => { let component: RecordApisComponent let fixture: ComponentFixture beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [RecordApisComponent], + imports: [TranslateModule.forRoot()], providers: [ { provide: MdViewFacade, @@ -21,9 +30,7 @@ describe('DataApisComponent', () => { }, ], }).compileComponents() - }) - beforeEach(() => { fixture = TestBed.createComponent(RecordApisComponent) component = fixture.componentInstance fixture.detectChanges() @@ -32,4 +39,32 @@ describe('DataApisComponent', () => { it('should create', () => { expect(component).toBeTruthy() }) + + describe('#openRecordApiForm', () => { + beforeEach(() => { + component.openRecordApiForm(serviceDistributionMock) + }) + it('should update selectedApiLink', () => { + expect(component.selectedApiLink).toEqual(serviceDistributionMock) + }) + it('should update maxHeight for transition', () => { + expect(component.maxHeight).toEqual('500px') + }) + it('should update opacity for transition', () => { + expect(component.opacity).toEqual(1) + }) + }) + + describe('#closeRecordApiForm', () => { + it('should update selectedApiLink', () => { + component.closeRecordApiForm() + expect(component.selectedApiLink).toBeUndefined() + }) + it('should update maxHeight for transition', () => { + expect(component.maxHeight).toEqual('0px') + }) + it('should update opacity for transition', () => { + expect(component.opacity).toEqual(0) + }) + }) }) diff --git a/apps/datahub/src/app/record/record-apis/record-apis.component.ts b/apps/datahub/src/app/record/record-apis/record-apis.component.ts index 8bcfd1ce86..1473720d76 100644 --- a/apps/datahub/src/app/record/record-apis/record-apis.component.ts +++ b/apps/datahub/src/app/record/record-apis/record-apis.component.ts @@ -1,4 +1,5 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core' +import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core' +import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record' import { MdViewFacade } from '@geonetwork-ui/feature/record' @Component({ @@ -7,6 +8,29 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record' styleUrls: ['./record-apis.component.css'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class RecordApisComponent { +export class RecordApisComponent implements OnInit { + maxHeight = '0px' + opacity = 0 + selectedApiLink: DatasetServiceDistribution constructor(public facade: MdViewFacade) {} + + ngOnInit(): void { + this.setStyle(undefined) + this.selectedApiLink = undefined + } + + openRecordApiForm(link: DatasetServiceDistribution) { + this.selectedApiLink = link + this.setStyle(link) + } + + closeRecordApiForm() { + this.selectedApiLink = undefined + this.setStyle(undefined) + } + + setStyle(link: DatasetServiceDistribution) { + this.maxHeight = link === undefined ? '0px' : '500px' + this.opacity = link === undefined ? 0 : 1 + } } diff --git a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html index f7f020a96c..e332f92203 100644 --- a/apps/datahub/src/app/record/record-metadata/record-metadata.component.html +++ b/apps/datahub/src/app/record/record-metadata/record-metadata.component.html @@ -114,13 +114,16 @@ -