From d6baa1f6c51134cb654e3428b9433cc16ca700ee Mon Sep 17 00:00:00 2001 From: Samson Akol Date: Sat, 24 Aug 2024 00:06:40 +0300 Subject: [PATCH 1/4] Fixes UI glitch on cards in collections --- .../views/ChannelSet/ChannelItem.vue | 7 ++++- .../views/ChannelSet/ChannelSelectionList.vue | 29 +++++++++++++------ 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue index 879ca23a3b..22a3eaeb57 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelItem.vue @@ -1,6 +1,6 @@ @@ -112,6 +117,12 @@ }, methods: { ...mapActions('channel', ['loadChannelList']), + handleSelectChannel(channelId) { + this.selectedChannels = this.selectedChannels.includes(channelId) + ? this.selectedChannels.filter(id => id !== channelId) + : [...this.selectedChannels, channelId]; + console.log('clicked'); + }, }, $trs: { searchText: 'Search for a channel', From ace7f64dcf959767e8548dba7783f3e57ca3ffbb Mon Sep 17 00:00:00 2001 From: Samson Akol Date: Sat, 24 Aug 2024 00:21:44 +0300 Subject: [PATCH 2/4] Removes logging statement --- .../channelList/views/ChannelSet/ChannelSelectionList.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue index 12d6eed359..d6b5b39198 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSelectionList.vue @@ -121,7 +121,6 @@ this.selectedChannels = this.selectedChannels.includes(channelId) ? this.selectedChannels.filter(id => id !== channelId) : [...this.selectedChannels, channelId]; - console.log('clicked'); }, }, $trs: { From 773b3beee2baa4a744cd30b157c06fbc8bd07870 Mon Sep 17 00:00:00 2001 From: Samson Akol Date: Sat, 24 Aug 2024 00:51:11 +0300 Subject: [PATCH 3/4] Adds tests to verify clickability of channel items --- .../__tests__/channelSelectionList.spec.js | 38 +++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js index efdcbf96f5..53138692be 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js @@ -1,4 +1,5 @@ import { mount } from '@vue/test-utils'; +import Vuex from 'vuex'; import ChannelSelectionList from '../ChannelSelectionList'; import { ChannelListTypes } from 'shared/constants'; @@ -25,6 +26,25 @@ const publicChannel = { published: true, }; +const getters = { + channels: jest.fn(() => [editChannel, editChannel2, publicChannel]), + getChannel: jest.fn(() => () => editChannel), +}; + +const actions = { + loadChannelList: jest.fn(() => Promise.resolve()), +}; + +const store = new Vuex.Store({ + modules: { + channel: { + namespaced: true, + getters, + actions, + }, + }, +}); + function makeWrapper() { return mount(ChannelSelectionList, { sync: false, @@ -41,9 +61,7 @@ function makeWrapper() { return Promise.resolve(); }, }, - stubs: { - ChannelItem: true, - }, + store, }); } @@ -77,4 +95,18 @@ describe('channelSelectionList', () => { expect(wrapper.vm.listChannels.find(c => c.id === editChannel.id)).toBeTruthy(); expect(wrapper.vm.listChannels.find(c => c.id === editChannel2.id)).toBeFalsy(); }); + + it('should select channels when the channel card has been clicked', () => { + wrapper.setData({ loading: false }); + wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).trigger('click'); + expect(wrapper.emitted('input')[0][0]).toEqual([editChannel.id]); + }); + it('should deselect channels when the channel card has been clicked', () => { + wrapper.setData({ loading: false }); + wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).element.click(); // Check the channel + wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).element.click(); // Uncheck the channel + + expect(wrapper.emitted('input')[0].length).toEqual(1); // Only one event should be emitted (corresponding to the initial check) + expect(wrapper.emitted('input')[0][0]).toEqual([editChannel.id]); // The initial check event should be emitted + }); }); From 88470da4841cf45275c4ba1568b3642d923bf8c9 Mon Sep 17 00:00:00 2001 From: Samson Akol Date: Sat, 24 Aug 2024 00:52:13 +0300 Subject: [PATCH 4/4] Remove spaces --- .../views/ChannelSet/__tests__/channelSelectionList.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js index 53138692be..b35725f43a 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSelectionList.spec.js @@ -95,7 +95,6 @@ describe('channelSelectionList', () => { expect(wrapper.vm.listChannels.find(c => c.id === editChannel.id)).toBeTruthy(); expect(wrapper.vm.listChannels.find(c => c.id === editChannel2.id)).toBeFalsy(); }); - it('should select channels when the channel card has been clicked', () => { wrapper.setData({ loading: false }); wrapper.find(`[data-test="channel-item-${editChannel.id}"]`).trigger('click');