From 827a82bb4fbe6bebc07e6817e00fd7cf3d5c494c Mon Sep 17 00:00:00 2001 From: Lucas Terriel Date: Tue, 19 Mar 2024 17:52:58 +0100 Subject: [PATCH] fix PersonDataTimeline : render correct ISO date order + add person timeline tests (dates order, events number by date) --- .github/workflows/node.js.yml | 4 +- package.json | 3 +- src/components/PersonDataTimeline.vue | 54 ++++- tests/fixtures/eventsResponse.json | 228 ++++++++++++++++++ tests/fixtures/store.js | 56 +++++ tests/unit/PersonDataTimeline.spec.js | 13 - .../components/PersonDataTimeline.spec.js | 52 ++++ 7 files changed, 389 insertions(+), 21 deletions(-) create mode 100644 tests/fixtures/eventsResponse.json create mode 100644 tests/fixtures/store.js delete mode 100644 tests/unit/PersonDataTimeline.spec.js create mode 100644 tests/unit/components/PersonDataTimeline.spec.js diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 2028b3c..e3a13a3 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -1,7 +1,7 @@ # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs -name: Node.js CI +name: e-NDP Vue Node.js CI on: push: @@ -27,4 +27,4 @@ jobs: node-version: ${{ matrix.node-version }} cache: 'npm' - run: npm install --force - - run: npm run test + - run: npm run test::unit diff --git a/package.json b/package.json index b6c338d..cc1ae21 100644 --- a/package.json +++ b/package.json @@ -6,8 +6,9 @@ "serve": "vue-cli-service serve --port 9091", "build": "vue-cli-service build", "lint": "vue-cli-service lint", - "test": "jest --no-cache --silent" + "test::unit": "jest --no-cache --verbose" }, + "dependencies": { "@vuepic/vue-datepicker": "^7.4.1", "axios": "^1.6.5", diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue index b593bcd..60526bc 100644 --- a/src/components/PersonDataTimeline.vue +++ b/src/components/PersonDataTimeline.vue @@ -7,7 +7,8 @@
-
+
{{ formatDate(group.date) }}
@@ -76,7 +77,8 @@ export default { }, computed: { ...mapState(['months', 'mappingSha1VolumesJSON']), - groupedEvents() { + /*groupedEvents() { + //console.log('this.eventsResponse',this.eventsResponse); const normalizeDate = (date) => { return date.length === 4 ? `${date}-01-01` : date; // Normalisation des dates }; @@ -106,8 +108,50 @@ export default { groupedArray.push({date: 'Date inconnue', events: eventsWithoutDate}); } + //console.log('groupedArray',groupedArray); + return groupedArray; - }, + },*/ + groupedEvents() { + // Parse une date et retourne un objet avec année, mois, jour et un poids pour le tri. + const parseDate = (date) => { + const parts = date ? date.split('-').map(Number) : []; + return { + year: parts[0] || 0, + month: parts[1] || 0, + day: parts[2] || 0, + // Le poids indique la précision de la date (utile pour le tri). + weight: parts.length + }; + }; + + // Compare deux dates. + const compareDates = (a, b) => { + const dateA = parseDate(a.date), dateB = parseDate(b.date); + // Compare année, puis mois, puis jour, puis poids. + if (dateA.year !== dateB.year) return dateA.year - dateB.year; + if (dateA.month !== dateB.month) return dateA.month - dateB.month; + if (dateA.day !== dateB.day) return dateA.day - dateB.day; + return dateA.weight - dateB.weight; + }; + + // Tri des événements par date. + const eventsWithDate = this.eventsResponse.filter(e => e.date).sort(compareDates); + const eventsWithoutDate = this.eventsResponse.filter(e => !e.date); + + // Groupement des événements par date unique. + let grouped = eventsWithDate.reduce((acc, event) => { + const foundIndex = acc.findIndex(item => item.date === event.date); + foundIndex === -1 ? acc.push({date: event.date, events: [event]}) : acc[foundIndex].events.push(event); + return acc; + }, []); + + // Ajoute les événements sans date à la fin. + if (eventsWithoutDate.length) grouped.push({date: 'Date inconnue', events: eventsWithoutDate}); + + return grouped; + } + }, mounted() { @@ -123,8 +167,8 @@ export default { * @returns {void} */ navigateInCarousel(group, direction) { - console.log(group) - console.log('navigateInCarousel',group.events); + //console.log(group) + console.log('navigateInCarousel', group.events); const totalEvents = group.events.length; let currentIndex = this.activePopupIndex[group.date] || 0; let newIndex = currentIndex + direction; diff --git a/tests/fixtures/eventsResponse.json b/tests/fixtures/eventsResponse.json new file mode 100644 index 0000000..dd503d7 --- /dev/null +++ b/tests/fixtures/eventsResponse.json @@ -0,0 +1,228 @@ +[ + { + "data": [ + { + "date": "1392-06-26", + "type": "Entrée" + }, + { + "date": "1392-06-26", + "type": "Entrée" + }, + { + "date": "1415", + "type": "Entrée" + }, + { + "date": "1415-07-12", + "type": "Entrée" + }, + { + "date": "1418", + "type": "Entrée" + }, + { + "date": "1424-07-12", + "type": "Sortie" + }, + { + "date": "1424-07-12", + "type": "Entrée" + }, + { + "date": "1424-07-21", + "type": "Entrée" + }, + { + "date": "1424-08-02", + "type": "Entrée" + } + ], + "toChecked": { + "orderDateExpected": [ + "1392-06-26", + "1415", + "1415-07-12", + "1418", + "1424-07-12", + "1424-07-21", + "1424-08-02" + ], + "totalEventsByDateExpected": { + "1392-06-26": 2, + "1415": 1, + "1415-07-12": 1, + "1418": 1, + "1424-07-12": 2, + "1424-07-21": 1, + "1424-08-02": 1 + } + } + }, + { + "data": [ + { + "date": "1392-01-01", + "type": "Entrée" + }, + { + "date": null, + "type": "Entrée" + }, + { + "date": "1392-01-01", + "type": "Sortie" + }, + { + "date": "1425", + "type": "Sortie" + }, + { + "date": null, + "type": "Entrée" + }, + { + "date": null, + "type": "Sortie" + }, + { + "date": "1392-05", + "type": "Sortie" + }, + { + "date": "1392-01", + "type": "Sortie" + }, + { + "date": "1392", + "type": "Sortie" + }, + { + "date": "1425-01", + "type": "Entrée" + } + ], + "toChecked": { + "orderDateExpected": [ + "1392", + "1392-01", + "1392-01-01", + "1392-05", + "1425", + "1425-01", + "Date inconnue" + ], + "totalEventsByDateExpected": { + "1392": 1, + "1392-01": 1, + "1392-01-01": 2, + "1392-05": 1, + "1425": 1, + "1425-01": 1, + "Date inconnue": 3 + } + } + }, + { + "data": [ + { + "date": null, + "type": "Entrée" + }, + { + "date": null, + "type": "Entrée" + }, + { + "date": null, + "type": "Sortie" + }, + { + "date": null, + "type": "Sortie" + }, + { + "date": null, + "type": "Sortie" + }, + { + "date": null, + "type": "Sortie" + } + ], + "toChecked": { + "orderDateExpected": [ + "Date inconnue" + ], + "totalEventsByDateExpected": { + "Date inconnue": 6 + } + } + }, + { + "data": [ + { + "date": "1504", + "type": "Entrée" + }, + { + "date": null, + "type": "Entrée" + }, + { + "date": "1504", + "type": "Sortie" + }, + { + "date": "1504-01-01", + "type": "Entrée" + }, + { + "date": "1235-04", + "type": "Entrée" + }, + { + "date": "1324-01", + "type": "Sortie" + }, + { + "date": null, + "type": "Sortie" + }, + { + "date": "1524-12-05", + "type": "Sortie" + }, + { + "date": "1524-12-01", + "type": "Sortie" + }, + { + "date": "1234-12", + "type": "Sortie" + } + ], + "toChecked": { + "orderDateExpected": [ + "1234-12", + "1235-04", + "1324-01", + "1504", + "1504-01-01", + "1524-12-01", + "1524-12-05", + "Date inconnue" + ], + "totalEventsByDateExpected": { + "1234-12": 1, + "1235-04": 1, + "1324-01": 1, + "1504": 2, + "1504-01-01": 1, + "1524-12-01": 1, + "1524-12-05": 1, + "Date inconnue": 2 + } + } + } +] \ No newline at end of file diff --git a/tests/fixtures/store.js b/tests/fixtures/store.js new file mode 100644 index 0000000..72c11e8 --- /dev/null +++ b/tests/fixtures/store.js @@ -0,0 +1,56 @@ +import {createStore} from 'vuex'; + + +import navByDatesJSON from 'data/stable/endp_nav_by_dates.json'; +import navByVolumesJSON from "data/stable/endp_nav_by_volumes.json"; +import metadataVolumesJSON from 'data/stable/endp_volumes_metadata.json'; +import mappingSha1VolumesJSON from 'data/stable/endp_mapping_nakala_sha1_img_volumes.json'; +import miradorSettings from "settings/mirador.conf.json"; + +export const store = createStore({ + state: { + // Utils + canvasId: 0, + endpVolume: "collection", + months: [ + {iso_code: '01', name: 'Janvier'}, + {iso_code: '02', name: 'Février'}, + {iso_code: '03', name: 'Mars'}, + {iso_code: '04', name: 'Avril'}, + {iso_code: '05', name: 'Mai'}, + {iso_code: '06', name: 'Juin'}, + {iso_code: '07', name: 'Juillet'}, + {iso_code: '08', name: 'Août'}, + {iso_code: '09', name: 'Septembre'}, + {iso_code: '10', name: 'Octobre'}, + {iso_code: '11', name: 'Novembre'}, + {iso_code: '12', name: 'Décembre'} + ], + // Data-driven JSON + navByDatesJSON: navByDatesJSON, + navByVolumesJSON: navByVolumesJSON, + metadataVolumesJSON: metadataVolumesJSON, + mappingSha1VolumesJSON: mappingSha1VolumesJSON, + // Configuration files + miradorSettings: miradorSettings, + // constants services endpoints + personDbApi: process.env.VUE_APP_DB_API, + personDbAdmin: process.env.VUE_APP_DB_ADMIN, + personDbAdminShow: process.env.VUE_APP_DB_SHOW, + noSketchService: process.env.VUE_APP_NOSKETCH_APP, + iiifEncService: process.env.VUE_APP_IIIF_ENC, + nakalaAppService: process.env.VUE_APP_NAKALA_APP, + nakalaApiService: process.env.VUE_APP_NAKALA_API, + nakalaApiIIIFService: process.env.VUE_APP_NAKALA_API_IIIF, + nakalaDoiImages: process.env.VUE_APP_NAKALA_COLLECTION_IMAGES_DOI, + nakalaDoiAlto: process.env.VUE_APP_NAKALA_COLLECTION_ALTO_DOI, + }, + mutations: { + setCanvasId(state, id) { + state.canvasId = id; + }, + setEndpVolume(state, volume) { + state.endpVolume = volume; + } + }, +}); \ No newline at end of file diff --git a/tests/unit/PersonDataTimeline.spec.js b/tests/unit/PersonDataTimeline.spec.js deleted file mode 100644 index 0b3f5c1..0000000 --- a/tests/unit/PersonDataTimeline.spec.js +++ /dev/null @@ -1,13 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import PersonDataTimeline from 'components/PersonDataTimeline.vue'; - -describe('PersonDataTimeline.vue', () => { - it('renders correctly', () => { - const wrapper = shallowMount(PersonDataTimeline, { - propsData: { - eventsResponse: [] // Ajoutez ici des données mock si nécessaire - } - }); - expect(wrapper.exists()).toBe(true); - }); -}); diff --git a/tests/unit/components/PersonDataTimeline.spec.js b/tests/unit/components/PersonDataTimeline.spec.js new file mode 100644 index 0000000..0473010 --- /dev/null +++ b/tests/unit/components/PersonDataTimeline.spec.js @@ -0,0 +1,52 @@ +import {shallowMount} from '@vue/test-utils'; +import PersonDataTimeline from 'components/PersonDataTimeline.vue'; + +import eventsResponseJSON from '../../fixtures/eventsResponse.json'; +import { store } from '../../fixtures/store'; + + +describe('PersonDataTimeline.vue', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallowMount(PersonDataTimeline, { + global: { + mocks: { + $store: store + }, + stubs: { + RouterLink: true + } + }, + props: { + eventsResponse: [] + } + }); + }); + + it('renders correctly', () => { + expect(wrapper.exists()).toBe(true); + }); + + it('check date order events', async () => { + for (const eventResponseItem of eventsResponseJSON) { + await wrapper.setProps({eventsResponse: eventResponseItem.data}); + const events = wrapper.vm.groupedEvents; + expect(events.map(event => event.date)).toEqual(eventResponseItem.toChecked.orderDateExpected); + + } + }); + + it('check total grouped events by date', async () => { + for (const eventResponseItem of eventsResponseJSON) { + await wrapper.setProps({eventsResponse: eventResponseItem.data}); + const events = wrapper.vm.groupedEvents; + for (const event of events) { + expect(event.events.length).toEqual(eventResponseItem.toChecked.totalEventsByDateExpected[event.date]); + } + } + }); +}); + + +