Skip to content

Commit

Permalink
feat(dh): api form
Browse files Browse the repository at this point in the history
  • Loading branch information
cmoinier committed Dec 6, 2023
1 parent 0dd0958 commit 39e6a56
Show file tree
Hide file tree
Showing 36 changed files with 876 additions and 42 deletions.
117 changes: 117 additions & 0 deletions apps/datahub-e2e/src/e2e/datasetDetailPage.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -497,3 +497,120 @@ 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').find('button').click()
cy.get('gn-ui-record-api-form').should('be.visible')
cy.get('@firstCard').find('button').click()
cy.get('gn-ui-record-api-form').should('not.exist')
})
})

describe.only('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()
.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', 0)
cy.get('@secondInput').find('input').should('have.value', 0)
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.exist')
})
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)
})
})
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.tab-header-label {
@apply uppercase text-sm text-primary opacity-75 hover:text-primary-darker;
}
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@
let last = last
"
[link]="link"
[currentLink]="facade.selectedApiLink$ | async"
class="w-80"
[ngClass]="{
'mr-[var(--container-outside-width)]': last,
'ml-[var(--container-outside-width)]': first
'ml-[var(--container-outside-width)]': first,
'shadow-xl bg-white': link === (facade.selectedApiLink$ | async),
'bg-neutral-100': link !== (facade.selectedApiLink$ | async)
}"
(openRecordApiForm)="openRecordApiForm($event)"
>
</gn-ui-api-card>
</gn-ui-carousel>
Original file line number Diff line number Diff line change
@@ -1,35 +1,54 @@
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, firstValueFrom } 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<RecordApisComponent>
let facade

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [RecordApisComponent],
imports: [TranslateModule.forRoot()],
providers: [
{
provide: MdViewFacade,
useClass: MdViewFacadeMock,
},
],
}).compileComponents()
})

beforeEach(() => {
fixture = TestBed.createComponent(RecordApisComponent)
component = fixture.componentInstance
facade = TestBed.inject(MdViewFacade)
fixture.detectChanges()
})

it('should create', () => {
expect(component).toBeTruthy()
})

describe('#openRecordApiForm', () => {
beforeEach(() => {
component.openRecordApiForm(serviceDistributionMock)
})
it('should update value in facade.selectedApiLink$', async () => {
const apiLink = await firstValueFrom(facade.selectedApiLink$)
expect(apiLink).toEqual(serviceDistributionMock)
})
})
})
13 changes: 12 additions & 1 deletion apps/datahub/src/app/record/record-apis/record-apis.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { Component, ChangeDetectionStrategy } from '@angular/core'
import {
Component,
ChangeDetectionStrategy,
Output,
EventEmitter,
Input,
} from '@angular/core'
import { DatasetServiceDistribution } from '@geonetwork-ui/common/domain/model/record'
import { MdViewFacade } from '@geonetwork-ui/feature/record'

@Component({
Expand All @@ -9,4 +16,8 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
})
export class RecordApisComponent {
constructor(public facade: MdViewFacade) {}

openRecordApiForm(link: DatasetServiceDistribution) {
this.facade.selectedApiLink$.next(link)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,35 @@
</div>

<div *ngIf="displayApi$ | async">
<datahub-record-apis class="block mt-6"></datahub-record-apis>
<datahub-record-apis
[isPanelOpen]="isPanelOpen"
(selectedLink)="selectApiLink($event)"
class="block mt-6"
></datahub-record-apis>
</div>
</div>
<div
class="bg-primary-opacity-10 pt-8 overflow-visible sm:pt-5"
*ngIf="facade.selectedApiLink$ | async"
>
<div class="flex flex-col container-lg px-4 lg:mx-auto gap-6">
<div class="flex flex-wrap justify-between mb-6 sm:mb-2 ng-star-inserted">
<p class="text-[28px] text-title font-title" translate>
record.metadata.api.form.title
</p>
<button type="button" class="text-main" (click)="closeForm()">
<span class="text-sm text-primary" translate
>record.metadata.api.form.closeButton</span
>
<mat-icon
class="material-symbols-outlined ml-1 align-middle leading-none text-primary"
>close</mat-icon
>
</button>
</div>
<gn-ui-record-api-form
[apiLink]="facade.selectedApiLink$ | async"
></gn-ui-record-api-form>
</div>
</div>

Expand Down
Loading

0 comments on commit 39e6a56

Please sign in to comment.