diff --git a/app/assets/javascripts/projects/your_work/components/app.vue b/app/assets/javascripts/projects/your_work/components/app.vue index 7d284c33e5b96d5498d58b8c5c3c5267c9f102c1..65c94421f34e8d168d197c3bb0435f1cffc61154 100644 --- a/app/assets/javascripts/projects/your_work/components/app.vue +++ b/app/assets/javascripts/projects/your_work/components/app.vue @@ -129,11 +129,20 @@ export default { return this.$route.query.sort; }, sort() { - if (this.sortQuery) { + const sortOptionValues = SORT_OPTIONS.flatMap(({ value }) => [ + `${value}_${SORT_DIRECTION_ASC}`, + `${value}_${SORT_DIRECTION_DESC}`, + ]); + + if (this.sortQuery && sortOptionValues.includes(this.sortQuery)) { return this.sortQuery; } - return this.initialSort || `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`; + if (sortOptionValues.includes(this.initialSort)) { + return this.initialSort; + } + + return `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`; }, activeSortOption() { return SORT_OPTIONS.find((sortItem) => this.sort.includes(sortItem.value)); diff --git a/spec/frontend/projects/your_work/components/app_spec.js b/spec/frontend/projects/your_work/components/app_spec.js index dca040ad1fc411806ca03857a818e8e421323745..d0b0932cf46a88580988e98020aecd5d05468be7 100644 --- a/spec/frontend/projects/your_work/components/app_spec.js +++ b/spec/frontend/projects/your_work/components/app_spec.js @@ -83,6 +83,7 @@ describe('YourWorkProjectsApp', () => { }); const createComponent = async ({ + provide = {}, projectsCountHandler = successHandler, userPreferencesUpdateHandler = userPreferencesUpdateSuccessHandler, route = defaultRoute, @@ -100,7 +101,7 @@ describe('YourWorkProjectsApp', () => { stubs: { TabView: stubComponent(TabView), }, - provide: defaultProvide, + provide: { ...defaultProvide, ...provide }, }); }; @@ -355,6 +356,45 @@ describe('YourWorkProjectsApp', () => { }); }); + describe('when sort query param is invalid', () => { + beforeEach(async () => { + await createComponent({ + route: { + ...defaultRoute, + query: { + sort: 'foo_bar', + }, + }, + }); + }); + + it('falls back to initial sort', () => { + expect(findTabView().props()).toMatchObject({ + sort: `${SORT_OPTION_CREATED.value}_${SORT_DIRECTION_DESC}`, + }); + }); + }); + + describe('when sort query param and initial sort are invalid', () => { + beforeEach(async () => { + await createComponent({ + provide: { initialSort: 'foo_bar' }, + route: { + ...defaultRoute, + query: { + sort: 'foo_bar', + }, + }, + }); + }); + + it('falls back to updated in ascending order', () => { + expect(findTabView().props()).toMatchObject({ + sort: `${SORT_OPTION_UPDATED.value}_${SORT_DIRECTION_ASC}`, + }); + }); + }); + describe('onTabUpdate', () => { describe('when tab is already active', () => { beforeEach(async () => {