From c0a99ef32e93efb22c56dd5321ac3d2361b6be2b Mon Sep 17 00:00:00 2001 From: wouter-adriaens Date: Tue, 5 Dec 2023 12:16:59 +0100 Subject: [PATCH 1/3] set next dev version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 607f9a8..28324a8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "main": "./dist/vue-components.umd.js", "module": "./dist/vue-components.es.js", "typings": "./dist/src/main.d.ts", - "version": "0.16.0", + "version": "0.17.0", "exports": { ".": { "import": "./dist/vue-components.es.js", From 48c9c9ba1ae7cb109c0856dbd11e7f16ac44fcef Mon Sep 17 00:00:00 2001 From: AxelVerstappen Date: Thu, 14 Dec 2023 15:27:35 +0100 Subject: [PATCH 2/3] Feature/actor widget tests (#191) * Updated actor-widget storybook * Fixed font-awesome-icon issues in tests * Simplified test code * Added extra detail view test to actor-widget --- .storybook/main.ts | 3 +- cypress/fixtures/actor.json | 328 +++ cypress/support/component.ts | 8 + package.json | 18 +- src/__tests__/OeActorWidget.cy.ts | 35 +- src/components/smart/OeActorWidget.vue | 2 + src/components/smart/OeActorWidgetDetail.vue | 9 +- .../smart/OeActorWidgetGridActies.vue | 5 +- .../oe-actor-widget.stories.ts | 26 + yarn.lock | 2526 +++++++++++------ 10 files changed, 2030 insertions(+), 930 deletions(-) create mode 100644 cypress/fixtures/actor.json diff --git a/.storybook/main.ts b/.storybook/main.ts index f1c6c07..b0a1f43 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -5,7 +5,8 @@ const config: StorybookConfig = { addons: [ '@storybook/addon-links', '@storybook/addon-essentials', - '@storybook/addon-interactions' + '@storybook/addon-interactions', + '@storybook/addon-mdx-gfm' ], framework: { name: '@storybook/vue3-vite', diff --git a/cypress/fixtures/actor.json b/cypress/fixtures/actor.json new file mode 100644 index 0000000..ec197c7 --- /dev/null +++ b/cypress/fixtures/actor.json @@ -0,0 +1,328 @@ +{ + "id": 12564, + "uri": "https://dev-id.erfgoed.net/actoren/12564", + "self": "https://dev-actoren.onroerenderfgoed.be/actoren/12564", + "type": { + "id": 1, + "naam": "persoon", + "uri": "foaf:Person" + }, + "types": [ + "http://xmlns.com/foaf/0.1/Person", + "foaf:Person", + "https://www.w3.org/ns/prov#Person", + "prov:Person", + "https://id.erfgoed.net/vocab/ontology#ErkendArcheoloog", + "oe:ErkendArcheoloog", + "https://id.erfgoed.net/vocab/ontology#ErkendArcheoloog", + "oe:ErkendArcheoloog" + ], + "zichtbaarheid": { + "id": 1, + "naam": "privaat" + }, + "omschrijving": "Van Humbeeck, Astrid", + "naam": "Van Humbeeck", + "voornaam": "Astrid", + "afkorting": "", + "adressen": [ + { + "id": 2326, + "land": { + "code": "BE", + "naam": "Belgi\u00eb" + }, + "postcode": { + "nummer": "3360", + "uri": "https://data.vlaanderen.be/id/postinfo/3360" + }, + "gemeente": { + "naam": "Bierbeek", + "niscode": "24011" + }, + "straat": { + "naam": "Krijkelberg", + "id": "32284", + "uri": "https://data.vlaanderen.be/id/straatnaam/32284" + }, + "adres": { + "huisnummer": "18", + "busnummer": "", + "id": "3509600", + "uri": "https://data.vlaanderen.be/id/adres/3509600" + }, + "adrestype": { + "id": 2, + "naam": "Extra" + }, + "omschrijving": "Krijkelberg 18, 3360 Bierbeek", + "beschrijving": null, + "startdatum": "2023-04-17", + "einddatum": null + }, + { + "id": 2251, + "land": { + "code": "BE", + "naam": "Belgi\u00eb" + }, + "postcode": { + "nummer": "3770", + "uri": "https://data.vlaanderen.be/id/postinfo/3770" + }, + "gemeente": { + "naam": "Riemst", + "niscode": "73066" + }, + "straat": { + "naam": "Achterhofname", + "id": "122648", + "uri": "https://data.vlaanderen.be/id/straatnaam/122648" + }, + "adres": { + "huisnummer": "3", + "busnummer": "", + "id": "1021993", + "uri": "https://data.vlaanderen.be/id/adres/1021993" + }, + "adrestype": { + "id": 1, + "naam": "Primair" + }, + "omschrijving": "Achterhofname 3, 3770 Riemst", + "beschrijving": null, + "startdatum": "2020-10-14", + "einddatum": null + }, + { + "id": 2255, + "land": { + "code": "BE", + "naam": "Belgi\u00eb" + }, + "postcode": { + "nummer": "1790", + "uri": "https://data.vlaanderen.be/id/postinfo/1790" + }, + "gemeente": { + "naam": "Affligem", + "niscode": "23105" + }, + "straat": { + "naam": "Boonhof", + "id": "31373", + "uri": "https://data.vlaanderen.be/id/straatnaam/31373" + }, + "adres": { + "huisnummer": "66", + "busnummer": "", + "id": "701663", + "uri": "https://data.vlaanderen.be/id/adres/701663" + }, + "adrestype": { + "id": 2, + "naam": "Extra" + }, + "omschrijving": "Boonhof 66, 1790 Affligem", + "beschrijving": null, + "startdatum": "2020-10-27", + "einddatum": null + } + ], + "info": [ + { + "id": 1, + "naam": "Aanvaardt opdracht als archeoloog" + } + ], + "urls": [], + "telefoons": [], + "emails": [ + { + "email": "astrid.vanhumbeeck@vlaanderen.be", + "type": { + "id": 2, + "naam": "werk" + } + } + ], + "relaties": [ + { + "id": 15676, + "type": { + "id": 1, + "naam": "is deel van" + }, + "naar_id": 10082, + "naar_omschrijving": "Agentschap Onroerend Erfgoed", + "startdatum": null, + "einddatum": null + }, + { + "id": 15805, + "type": { + "id": 3, + "naam": "is sleutelgebruiker" + }, + "naar_id": 501, + "naar_omschrijving": "Agentschap Onroerend Erfgoed", + "startdatum": null, + "einddatum": null + }, + { + "id": 15678, + "type": { + "id": 3, + "naam": "is sleutelgebruiker" + }, + "naar_id": 12557, + "naar_omschrijving": "Verdugt NV", + "startdatum": "2021-03-01", + "einddatum": null + } + ], + "adres": { + "id": 2251, + "land": { + "code": "BE", + "naam": "Belgi\u00eb" + }, + "postcode": { + "nummer": "3770", + "uri": "https://data.vlaanderen.be/id/postinfo/3770" + }, + "gemeente": { + "naam": "Riemst", + "niscode": "73066" + }, + "straat": { + "naam": "Achterhofname", + "id": "122648", + "uri": "https://data.vlaanderen.be/id/straatnaam/122648" + }, + "adres": { + "huisnummer": "3", + "busnummer": "", + "id": "1021993", + "uri": "https://data.vlaanderen.be/id/adres/1021993" + }, + "adrestype": { + "id": 1, + "naam": "Primair" + }, + "omschrijving": "Achterhofname 3, 3770 Riemst", + "beschrijving": null, + "startdatum": "2020-10-14", + "einddatum": null + }, + "erkenningen": [ + { + "erkenningsnummer": "OE/ERK/Archeoloog/2020/00015", + "id": 55, + "type": "natuurlijk persoon", + "uri": "https://dev-id.erfgoed.net/actoren/12564", + "omschrijving": "Van Humbeeck, Astrid", + "erkend_voor": "Archeologie type 1", + "erkend_als": "Archeoloog type 1", + "type_erkenning_id": 1, + "reden_erkenning": { + "id": 2, + "reden_erkenning": "Van rechtswege erkend" + }, + "geldigheid": "Vanaf 01-12-2020" + }, + { + "erkenningsnummer": "OE/ERK/Archeoloog/2018/00018", + "id": 9, + "type": "rechtspersoon", + "uri": "https://dev-id.erfgoed.net/actoren/501", + "omschrijving": "Agentschap Onroerend Erfgoed", + "erkend_voor": "Archeologie type 1", + "erkend_als": "Archeoloog type 1", + "type_erkenning_id": 1, + "reden_erkenning": { + "id": 2, + "reden_erkenning": "Van rechtswege erkend" + }, + "geldigheid": "Vanaf 01-06-2018 tot 30-06-2030" + }, + { + "erkenningsnummer": "OE/ERK/Archeoloog/2021/00001", + "id": 59, + "type": "rechtspersoon", + "uri": "https://dev-id.erfgoed.net/actoren/12557", + "omschrijving": "Verdugt NV", + "erkend_voor": "Archeologie type 1", + "erkend_als": "Archeoloog type 1", + "type_erkenning_id": 1, + "reden_erkenning": { + "id": 1, + "reden_erkenning": "Erkend door Onroerend Erfgoed" + }, + "geldigheid": "Vanaf 01-03-2021" + } + ], + "overeenkomsten": [], + "systemfields": { + "created_at": "2020-10-16T14:03:24.911936+02:00", + "created_by": { + "uri": "https://dev-id.erfgoed.net/actoren/12495", + "description": "Toelatingen Beschermd Erfgoed Aanvragen" + }, + "updated_at": "2023-11-06T11:11:22.308101+01:00", + "updated_by": { + "uri": "https://dev-id.erfgoed.net/actoren/12564", + "description": "Van Humbeeck, Astrid" + } + }, + "status": { + "status": { + "id": 75, + "status": "Actief" + }, + "datum": "2020-12-02T09:24:38.485558+01:00", + "gebruiker": { + "uri": "https://dev-id.erfgoed.net/actoren/12564", + "omschrijving": "Van Humbeeck, Astrid" + }, + "opmerkingen": "" + }, + "ids": [ + { + "type": { + "id": 4, + "naam": "rrn" + }, + "extra_id": "90042818619" + }, + { + "type": { + "id": 5, + "naam": "persid" + }, + "extra_id": "-DrDAN0sRG4tJMJ0Zl34mQ" + }, + { + "type": { + "id": 7, + "naam": "uid" + }, + "extra_id": "vanhumas" + }, + { + "type": { + "id": 12, + "naam": "orcid" + }, + "extra_id": "https://orcid.org/0000-0002-1825-0097" + }, + { + "type": { + "id": 15, + "naam": "persoonid" + }, + "extra_id": "34d27418799f0f148485bacb457f7490e4350928a1169095e4501f69c633b21e" + } + ], + "opmerkingen": "" +} diff --git a/cypress/support/component.ts b/cypress/support/component.ts index 0536cbd..04468b1 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -15,9 +15,17 @@ // Import commands.js using ES2015 syntax: import '@/scss/main.scss'; import './commands'; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { fab } from '@fortawesome/free-brands-svg-icons'; +import { far } from '@fortawesome/free-regular-svg-icons'; +import { fas } from '@fortawesome/free-solid-svg-icons'; // Alternatively you can use CommonJS syntax: import { mount } from 'cypress/vue'; +library.add(fas); +library.add(far); +library.add(fab); + // Augment the Cypress namespace to include type definitions for // your custom command. // Alternatively, can be defined in cypress/support/component.d.ts diff --git a/package.json b/package.json index 28324a8..17afe55 100644 --- a/package.json +++ b/package.json @@ -79,14 +79,15 @@ "devDependencies": { "@intlify/unplugin-vue-i18n": "^0.10.0", "@rushstack/eslint-patch": "^1.2.0", - "@storybook/addon-essentials": "^7.5.3", - "@storybook/addon-interactions": "^7.5.3", - "@storybook/addon-links": "^7.5.3", - "@storybook/addon-viewport": "^7.5.3", - "@storybook/blocks": "^7.5.3", - "@storybook/builder-vite": "^7.5.3", + "@storybook/addon-essentials": "^7.6.4", + "@storybook/addon-interactions": "^7.6.4", + "@storybook/addon-links": "^7.6.4", + "@storybook/addon-mdx-gfm": "^7.6.4", + "@storybook/addon-viewport": "^7.6.4", + "@storybook/blocks": "^7.6.4", + "@storybook/builder-vite": "^7.6.4", "@storybook/testing-library": "^0.2.2", - "@storybook/vue3-vite": "^7.5.3", + "@storybook/vue3-vite": "^7.6.4", "@trivago/prettier-plugin-sort-imports": "4.1.0", "@types/node": "^18.14.2", "@types/proj4": "^2.5.2", @@ -108,6 +109,7 @@ "eslint-plugin-cypress": "^2.12.1", "eslint-plugin-import": "^2.27.5", "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-storybook": "^0.6.15", "eslint-plugin-vue": "^9.11.0", "npm-run-all": "^4.1.5", "path": "^0.12.7", @@ -117,7 +119,7 @@ "rollup-plugin-copy": "^3.4.0", "sass": "^1.62.0", "start-server-and-test": "^2.0.0", - "storybook": "^7.5.3", + "storybook": "^7.6.4", "tslib": "^2.5.0", "typescript": "~4.8.4", "vite": "^4.1.4", diff --git a/src/__tests__/OeActorWidget.cy.ts b/src/__tests__/OeActorWidget.cy.ts index 8d786a3..2c4a513 100644 --- a/src/__tests__/OeActorWidget.cy.ts +++ b/src/__tests__/OeActorWidget.cy.ts @@ -14,34 +14,47 @@ describe('OeActorWidget', () => { template: ` `, }); beforeEach(() => { - cy.intercept('GET', 'https://dev-actoren.onroerenderfgoed.be/**', { + cy.intercept('GET', 'https://dev-actoren.onroerenderfgoed.be/actoren*', { fixture: 'actoren.json', headers: { 'Content-Range': 'items 0-50/1', }, }).as('dataGet'); + cy.intercept('GET', 'https://dev-actoren.onroerenderfgoed.be/actoren/**', { + fixture: 'actor.json', + }).as('dataSingleGet'); + + cy.mount(TestComponent); + cy.wait('@dataGet'); }); it('fetches actoren and shows a grid on startup', () => { - cy.mount(TestComponent).then(() => { - cy.wait('@dataGet'); - cy.dataCy('ag-grid-vue').find('.ag-center-cols-container').children().should('have.length', 1); - }); + cy.dataCy('ag-grid-vue').find('.ag-center-cols-container').children().should('have.length', 1); }); it('enables the add button when a row is clicked', () => { - cy.mount(TestComponent).then(() => { - cy.wait('@dataGet'); - cy.dataCy('ag-grid-vue').find('.ag-center-cols-container').children().first().click(); - cy.dataCy('actor-widget-add-btn').should('be.enabled'); - }); + cy.dataCy('ag-grid-vue').find('.ag-center-cols-container').children().first().click(); + cy.dataCy('actor-widget-add-btn').should('be.enabled'); + }); + + it('shows the provided dropdown slot template', () => { + cy.dataCy('actor-widget-slot-dropdown').should('have.text', 'Test'); + }); + + it('opens the detail view after click on eye-icon and closes again after click on back btn', () => { + cy.dataCy('actor-widget-detail-btn').click(); + cy.wait('@dataSingleGet'); + cy.dataCy('actor-widget-detail').should('exist'); + cy.dataCy('actor-widget-detail-back-btn').click(); + cy.wait('@dataGet'); + cy.dataCy('actor-widget-grid').should('exist'); }); }); }); diff --git a/src/components/smart/OeActorWidget.vue b/src/components/smart/OeActorWidget.vue index b888e9f..2df984a 100644 --- a/src/components/smart/OeActorWidget.vue +++ b/src/components/smart/OeActorWidget.vue @@ -6,6 +6,7 @@ v-if="state === ActorWidgetState.Grid" :api="props.api" :get-sso-token="props.getSsoToken" + data-cy="actor-widget-grid" @set-state-detail="setStateDetail($event)" @select-actor="selectActor" @toggle-loader="loading = !loading" @@ -13,6 +14,7 @@ diff --git a/src/components/smart/OeActorWidgetDetail.vue b/src/components/smart/OeActorWidgetDetail.vue index 144fe86..cf077db 100644 --- a/src/components/smart/OeActorWidgetDetail.vue +++ b/src/components/smart/OeActorWidgetDetail.vue @@ -1,7 +1,14 @@