Skip to content

Commit

Permalink
get collections as options
Browse files Browse the repository at this point in the history
  • Loading branch information
JLSchaap committed Dec 16, 2024
1 parent 3e5aa01 commit 4a7be7e
Show file tree
Hide file tree
Showing 8 changed files with 360 additions and 3 deletions.
133 changes: 133 additions & 0 deletions viewer/cypress/fixtures/collectionfix.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
{
"links": [
{
"rel": "self",
"type": "application/json",
"title": "This document as JSON",
"href": "https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod/collections?f=json"
},
{
"rel": "alternate",
"type": "text/html",
"title": "This document as HTML",
"href": "https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod/collections?f=html"
},
{
"rel": "license",
"type": "text/html",
"title": "CC0 1.0",
"href": "http://creativecommons.org/publicdomain/zero/1.0/deed.nl"
}
],
"collections": [
{
"id": "functioneel_gebied",
"title": "functioneel_gebied",
"version": 1,
"displayNameTemplate": "{{.typefunctioneelgebied | firstupper}} {{.naamnl}}",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "functioneel_gebied_multivlak",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_multivlak"
},
{
"rel": "source",
"type": "text/html",
"title": "functioneel_gebied_punt",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_punt"
},
{
"rel": "source",
"type": "text/html",
"title": "functioneel_gebied_vlak",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/functioneel_gebied_vlak"
}
]
},
{
"id": "geografisch_gebied",
"title": "geografisch_gebied",
"version": 1,
"displayNameTemplate": "{{.typegeografischgebied | firstupper}} {{.naamnl}}",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "geografisch_gebied_multivlak",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_multivlak"
},
{
"rel": "source",
"type": "text/html",
"title": "geografisch_gebied_punt",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_punt"
},
{
"rel": "source",
"type": "text/html",
"title": "geografisch_gebied_vlak",
"href": "https://api.pdok.nl/brt/top10nl/ogc/v1/collections/geografisch_gebied_vlak"
}
]
},
{
"id": "ligplaats",
"title": "ligplaats",
"version": 1,
"displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "ligplaats",
"href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/ligplaats"
}
]
},
{
"id": "standplaats",
"title": "standplaats",
"version": 1,
"displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "standplaats",
"href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/standplaats"
}
]
},
{
"id": "verblijfsobject",
"title": "verblijfsobject",
"version": 1,
"displayNameTemplate": "{{.openbare_ruimte_naam}} {{.huisnummer}}{{.huisletter}}, {{.postcode}} {{.woonplaats_naam}} ({{.bronhouder_naam}})",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "verblijfsobject",
"href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/verblijfsobject"
}
]
},
{
"id": "woonplaats",
"title": "woonplaats",
"version": 1,
"displayNameTemplate": "{{.woonplaats}} ({{.bronhouder_naam}})",
"links": [
{
"rel": "source",
"type": "text/html",
"title": "woonplaats",
"href": "https://api.pdok.nl/lv/bag/ogc/v1-demo/collections/woonplaats"
}
]
}
],
"numberReturned": 6
}
108 changes: 108 additions & 0 deletions viewer/cypress/location-search-test.cy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
import { HttpClientModule } from '@angular/common/http'
import { LoggerModule } from 'ngx-logger'
import { environment } from './../src/environments/environment'
import { LocationSearchComponent } from './../src/app/location-search/location-search.component'
import { checkAccessibility, injectAxe } from './shared'

function loadLocationSearchEmpty() {
cy.mount(LocationSearchComponent, {
imports: [
HttpClientModule,
LoggerModule.forRoot({
level: environment.loglevel,
}),
],
})
}
function loadLocationSearchWithUrl() {
cy.intercept('GET', 'https://visualisation.example.com/locationapi*/**', { fixture: 'collectionfix.json' }).as('col')
cy.mount(LocationSearchComponent, {
imports: [
HttpClientModule,
LoggerModule.forRoot({
level: environment.loglevel,
}),
],
componentProperties: {
url: 'https://visualisation.example.com/locationapi',
},
})
cy.wait('@col')
}

function loadLocationSearch(fixture: string, labelText: string, placeholder: string, title: string) {
cy.intercept('GET', 'https://visualisation.example.com/locationapi*', { fixture: 'collectionfix.json' }).as('col')
cy.mount(LocationSearchComponent, {
imports: [
HttpClientModule,
LoggerModule.forRoot({
level: environment.loglevel,
}),
],
componentProperties: {
url: 'https://visualisation.example.com/locationapi',
label: labelText,
placeholder,
title,
},
})
}

describe('location-search-test', () => {
it('it show no url message', () => {
loadLocationSearchEmpty()
cy.get('body').contains('please provide url to location url')
})

it('Has no detectable a11y violations on mount and show default values', () => {
injectAxe()
loadLocationSearchWithUrl()
cy.get('#searchboxlabel').should('have.text', 'Search location')
cy.get('#searchBox')
.should('have.attr', 'placeholder', 'Enter location to search')
.should('have.attr', 'title', 'Enter the location you want to search for')
checkAccessibility('body')
})

it('Label can be changed', () => {
injectAxe()
const expectedText = 'label can be changed'
const expectedPlaceholder = 'placeholder'
const expectedTitle = 'titel'
loadLocationSearch('', expectedText, expectedPlaceholder, expectedTitle)
cy.get('label').should('have.text', expectedText)
cy.get('#searchBox').should('have.attr', 'placeholder', expectedPlaceholder).should('have.attr', 'title', expectedTitle)
checkAccessibility('body')
})

it('can have search input', () => {
loadLocationSearchWithUrl()
cy.get('#searchBox').should('be.visible').should('be.enabled').type('A')
})

it('should verify all checkboxes are checked', () => {
loadLocationSearchWithUrl()
cy.get('input[type="checkbox"').each($checkbox => {
cy.wrap($checkbox).should('be.checked').should('be.enabled')
})
})

it('verify all titles from collections', () => {
loadLocationSearchWithUrl()
const expectedLabels = ['functioneel_gebied', 'geografisch_gebied', 'ligplaats', 'standplaats', 'verblijfsobject', 'woonplaats']
expectedLabels.forEach(label => {
// Verify the checkbox is checked
//cy.get(`input[type="checkbox"][value="${label}"]`).should('be.checked')

// Verify the label text
cy.get('body').contains(label)
})
})

it('disable collection and typeahead', () => {
loadLocationSearchWithUrl()
cy.get(':nth-child(3) > label > input[type=checkbox]').uncheck()
cy.get(':nth-child(6) > label > input[type=checkbox]').uncheck()
cy.get('#searchBox').should('be.visible').should('be.enabled').type('AAAAA')
})
})
9 changes: 6 additions & 3 deletions viewer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,16 @@
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run format && npm run lint && ng build --configuration production --verbose --output-hashing none",
"build": "npm run apigen && npm run format && npm run lint && ng build --configuration production --verbose --output-hashing none",
"watch": "ng build --watch --configuration development",
"test": "npx cypress info && npx cypress run --component",
"ghpage": "angular-cli-ghpages --dir=dist/view-component/browser",
"lint": "ng lint",
"cypress": "export CYPRESS_REMOTE_DEBUGGING_PORT=9222; npx cypress open",
"format": "npx prettier --write .",
"upgrade": "ng update @angular/cli @angular/core angular-cli-ghpages @angular-devkit/build-angular @angular/elements @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/schematics --force && npm update && npm audit fix --force",
"bundle-size": "ng build && esbuild-visualizer --metadata ./dist/view-component/stats.json"
"bundle-size": "ng build && esbuild-visualizer --metadata ./dist/view-component/stats.json",
"apigen": "ng-openapi-gen --input https://api.pdok.nl/bzk/location-api/autocomplete/v1-preprod/api?f=json --output ./src/app/api"
},
"private": true,
"dependencies": {
Expand Down Expand Up @@ -53,9 +54,11 @@
"eslint": "8.57.0",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-prettier": "5.1.3",
"ng-openapi-gen": "^0.52.0",
"openapi-typescript": "^7.4.4",
"prettier": "3.3.1",
"prettier-eslint": "16.3.0",
"typescript": "^5.4.5",
"typescript": "^5.6.3",
"webpack-bundle-analyzer": "^4.10.1"
}
}
5 changes: 5 additions & 0 deletions viewer/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { NgModule, Injector } from '@angular/core'
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
import { LegendViewComponent } from './legend-view/legend-view.component'
import { FeatureViewComponent } from './feature-view/feature-view.component'
import { LocationSearchComponent } from './location-search/location-search.component'

import { LoggerModule, NgxLoggerLevel } from 'ngx-logger'
import { environment } from 'src/environments/environment'

Expand Down Expand Up @@ -35,6 +37,9 @@ export class AppModule {

const featureView = createCustomElement(FeatureViewComponent, { injector })
customElements.define('app-feature-view', featureView)

const locationSearch = createCustomElement(LocationSearchComponent, { injector })
customElements.define('app-location-search', locationSearch)
}

// eslint-disable-next-line
Expand Down
Empty file.
25 changes: 25 additions & 0 deletions viewer/src/app/location-search/location-search.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<div *ngIf="url" role="search">
<label id="searchboxlabel" for="searchBox">{{ label }}</label>
<input
role="textbox"
class="search-box"
autoComplete="off"
[value]="searchLocation"
id="searchBox"
(keyup)="updateSearchField($event)"
type="text"
[placeholder]="placeholder"
[title]="title"
list="locatie-auto-complete"
aria-label="Search for a location" />

<div>
<div *ngFor="let collection of collections; let i = index">
<label>
<input type="checkbox" [checked]="isActiveCollection(collection.title)" />
{{ collection.title }}
</label>
</div>
</div>
</div>
{{ infomessage }}
22 changes: 22 additions & 0 deletions viewer/src/app/location-search/location-search.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing'

import { LocationSearchComponent } from './location-search.component'

describe('LocationSearchComponent', () => {
let component: LocationSearchComponent
let fixture: ComponentFixture<LocationSearchComponent>

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [LocationSearchComponent],
}).compileComponents()

fixture = TestBed.createComponent(LocationSearchComponent)
component = fixture.componentInstance
fixture.detectChanges()
})

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

0 comments on commit 4a7be7e

Please sign in to comment.