SW/geovisio-website
2
0
Fork 0
forked from Ivasoft/geovisio-website
Code Pull Requests Packages Releases Activity

edit changelog + add test sequence list

Browse Source
This commit is contained in:
Andreani Jean
2023-06-13 15:13:01 +02:00
parent a4e56aa8ae
commit ed1e3afe53
5 changed files with 173 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
CHANGELOG.md
View File

@@ -4,10 +4,25 @@ All notable changes to this project will be documented in this file.
Before _1.0.0_ Changelog didn't exist.
## [1.0.0] -
## [1.0.0] -
### Added
- A new page `/mes-sequences` to access to a list of sequences for a logged user ([#14](https://gitlab.com/geovisio/website/-/issues/14)) :
- the user can see all his sequences
- the user can filter sequences
- the user can enter to a specific sequence
- A new page `/sequence/:id` to access to a sequence of photos for a logged user ([#14](https://gitlab.com/geovisio/website/-/issues/14)) :
- the user can see the sequence on the map and move on the map from photos to photos
- the user can see information about the sequence
- the user can see all the sequence's photos
- the user can disable one or many photo(s) of the sequence
- Add of `vitest.config.js` to manage test configuration
### Changed
### Fixed
- Header have now a new entry `Mes photos` when the user is logged to access to the sequence list
### Fixed

170
src/tests/unit/views/MySequences.spec.js
View File

@@ -1,9 +1,10 @@
import { it, describe, expect, vi } from 'vitest'
import { it, describe, expect, vi, beforeEach } from 'vitest'
import { flushPromises, shallowMount } from '@vue/test-utils'
import MySequencesView from '../../../views/MySequencesView.vue'
import axios from 'axios'
import { createI18n } from 'vue-i18n'
import fr from '../../../locales/fr.json'
import Button from '../../../components/Button.vue'
vi.mock('@/utils/dates', () => ({
formatDate: vi.fn()
@@ -22,31 +23,28 @@ const i18n = createI18n({
const mockResponseSequences = [
{
title: 'my sequences',
description: 'my sequences',
generated_at: '2023-05-16T11:08:11.247187+00:00',
href: 'https://my-link',
rel: 'self',
type: 'application/json'
},
{
href: 'https://my-link',
id: 'my-id',
links: [
{
href: 'https://my-link',
rel: 'self',
type: 'application/json'
},
{
href: 'https://my-link',
id: 'my-id',
rel: 'child',
'stats:items': { count: 16 },
title: 'toto'
rel: 'child',
'stats:items': { count: 16 },
title: 'ma sequence 1',
extent: {
temporal: {
interval: [['2022-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']]
}
]
}
}
]
describe('Template', () => {
it('should render the view without sequences', async () => {
import.meta.env.VITE_API_URL = 'api-url/'
axios.get.mockReturnValue({ data: mockResponseSequences })
await axios.get.mockReturnValue({ data: { links: [] } })
const wrapper = shallowMount(MySequencesView, {
global: {
plugins: [i18n],
@@ -56,7 +54,6 @@ describe('Template', () => {
}
})
await flushPromises()
await wrapper.vm.$nextTick()
expect(axios.get).toHaveBeenCalledWith(
`${import.meta.env.VITE_API_URL}api/users/me/catalog`
)
@@ -64,4 +61,139 @@ describe('Template', () => {
expect(wrapper.html()).contains('general.header.contribute_text')
expect(wrapper.html()).contains('path="/partager-des-photos"')
})
it('should render the view with a sequence in the list', async () => {
import.meta.env.VITE_API_URL = 'api-url/'
await axios.get.mockReturnValue({ data: { links: mockResponseSequences } })
const wrapper = shallowMount(MySequencesView, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
}
}
})
await flushPromises()
expect(axios.get).toHaveBeenCalledWith(
`${import.meta.env.VITE_API_URL}api/users/me/catalog`
)
expect(wrapper.vm.userSequences).toEqual([mockResponseSequences[1]])
expect(wrapper.html()).contains('src="https://my-link/thumb.jpg"')
expect(wrapper.html()).contains('ma sequence 1')
expect(wrapper.html()).contains('16')
})
})
describe('Methods', () => {
describe('sortElements', () => {
const mockResponseSequencesToSort = [
{
href: 'https://my-link',
id: 'my-id',
rel: 'child',
'stats:items': { count: 16 },
title: 'za sequence 1',
extent: {
temporal: {
interval: [
['2030-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']
]
}
}
},
{
href: 'https://my-link',
id: 'my-id',
rel: 'child',
'stats:items': { count: 2 },
title: 'ma sequence 1',
extent: {
temporal: {
interval: [
['2022-09-22T08:03:08+00:00', '2022-09-22T08:03:08+00:00']
]
}
}
}
]
beforeEach(async () => {
import.meta.env.VITE_API_URL = 'api-url/'
await axios.get.mockReturnValue({
data: { links: mockResponseSequencesToSort }
})
await flushPromises()
})
it('should should sort sequences by title', async () => {
const wrapper = shallowMount(MySequencesView, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
},
components: {
Button
}
}
})
await wrapper.vm.$nextTick()
const spy = vi.spyOn(wrapper.vm, 'sortElements')
const buttonWrapper = wrapper.findComponent(
'[data-test="button-sort-title"]'
)
await buttonWrapper.vm.$emit('trigger')
expect(spy).toHaveBeenCalledWith('alpha')
expect(wrapper.vm.userSequences[0]).toEqual(
mockResponseSequencesToSort[1]
)
})
it('should should sort sequences by number of pictures', async () => {
const wrapper = shallowMount(MySequencesView, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
},
components: {
Button
}
}
})
await wrapper.vm.$nextTick()
const spy = vi.spyOn(wrapper.vm, 'sortElements')
const buttonWrapper = wrapper.findComponent(
'[data-test="button-sort-number"]'
)
await buttonWrapper.vm.$emit('trigger')
expect(spy).toHaveBeenCalledWith('num')
expect(wrapper.vm.userSequences[0]).toEqual(
mockResponseSequencesToSort[1]
)
})
it('should should sort sequences by date', async () => {
const wrapper = shallowMount(MySequencesView, {
global: {
plugins: [i18n],
mocks: {
$t: (msg) => msg
},
components: {
Button
}
}
})
await wrapper.vm.$nextTick()
const spy = vi.spyOn(wrapper.vm, 'sortElements')
const buttonWrapper = wrapper.findComponent(
'[data-test="button-sort-date"]'
)
await buttonWrapper.vm.$emit('trigger')
expect(spy).toHaveBeenCalledWith('date')
expect(wrapper.vm.userSequences[0]).toEqual(
mockResponseSequencesToSort[1]
)
})
})
})

1
src/views/MySequenceView.vue
View File

@@ -170,6 +170,7 @@ watchEffect(async () => {
if (viewerMap && viewerMap.addEventListener) {
viewerMap.addEventListener('picture-loaded', (e: EventInterface): void => {
itemSelected.value = e.detail.picId
scrollIntoSelected(e.detail.picId)
})
}
})

7
src/views/MySequencesView.vue
View File

@@ -9,6 +9,7 @@
:text="$t('pages.sequences.sequence_name')"
look="link--grey"
icon="bi bi-arrow-down-up"
data-test="button-sort-title"
@trigger="sortElements('alpha')"
/>
</div>
@@ -17,6 +18,7 @@
:text="$t('pages.sequences.sequence_photos')"
look="link--grey"
icon="bi bi-arrow-down-up"
data-test="button-sort-number"
@trigger="sortElements('num')"
/>
</div>
@@ -25,6 +27,7 @@
:text="$t('pages.sequences.sequence_date')"
look="link--grey"
icon="bi bi-arrow-down-up"
data-test="button-sort-date"
@trigger="sortElements('date')"
/>
</div>
@@ -149,9 +152,7 @@ function sortElements(type: string): void {
onMounted(async () => {
try {
const { data } = await axios.get(
`${
import.meta.env.VITE_API_URL
}api/users/6b845c81-0985-433c-84f4-4aa1ce540628/catalog`
`${import.meta.env.VITE_API_URL}api/users/me/catalog`
)
const relChild = data.links.filter(
(el: LinkInterface) => el.rel === 'child'

1
vite.config.ts
View File

@@ -8,7 +8,6 @@ export default defineConfig({
server: {
host: true,
port: 5173,
strictPort: true,
hmr: {
port: 9000
}