Skip to content

Commit 4aa3274

Browse files
marcellamakimarcellamaki
authored
Merge pull request #5356 from akolson/fix-css-override-troubles
Fix css override troubles
2 parents 9b318f7 + e83ef5d commit 4aa3274

File tree

10 files changed

+268
-250
lines changed

10 files changed

+268
-250
lines changed

‎contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,9 +179,9 @@
179179

180180
<NewTopicModal
181181
v-if="showNewTopicModal"
182-
v-model="showNewTopicModal"
183182
data-test="newtopicmodal"
184183
@createTopic="createTopic"
184+
@cancelCreateTopic="showNewTopicModal = false"
185185
/>
186186
</FullscreenModal>
187187

‎contentcuration/contentcuration/frontend/channelEdit/components/move/NewTopicModal.vue‎

Lines changed: 27 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,51 @@
11
<template>
22

3-
<MessageDialog
4-
v-model="dialog"
5-
:header="$tr('createTopic')"
3+
<KModal
4+
:title="$tr('createTopic')"
5+
:cancelText="$tr('cancel')"
6+
:submitText="$tr('create')"
7+
data-test="newtopicmodal"
8+
@cancel="cancel"
9+
@submit="create"
610
>
7-
<VForm
8-
ref="form"
9-
lazy-validation
10-
@submit.prevent="create"
11-
>
12-
<VTextField
13-
v-model="title"
14-
maxlength="200"
15-
counter
16-
:label="$tr('topicTitle')"
17-
box
18-
:rules="titleRules"
19-
required
20-
/>
21-
</VForm>
22-
<template #buttons="{ close }">
23-
<VBtn
24-
flat
25-
data-test="close"
26-
@click="close"
27-
>
28-
{{ $tr('cancel') }}
29-
</VBtn>
30-
<VBtn
31-
color="primary"
32-
data-test="create"
33-
@click="create"
34-
>
35-
{{ $tr('create') }}
36-
</VBtn>
37-
</template>
38-
</MessageDialog>
11+
<KTextbox
12+
ref="title"
13+
v-model="title"
14+
:label="$tr('topicTitle')"
15+
:maxlength="200"
16+
:invalid="showErrorText"
17+
:invalidText="titleError"
18+
:showInvalidText="showErrorText"
19+
/>
20+
</KModal>
3921

4022
</template>
4123

4224

4325
<script>
4426
45-
import MessageDialog from 'shared/views/MessageDialog';
46-
4727
export default {
4828
name: 'NewTopicModal',
49-
components: {
50-
MessageDialog,
51-
},
52-
props: {
53-
value: {
54-
type: Boolean,
55-
default: false,
56-
},
57-
},
5829
data() {
5930
return {
6031
title: '',
32+
titleError: null,
33+
showErrorText: false,
6134
};
6235
},
63-
computed: {
64-
dialog: {
65-
get() {
66-
return this.value;
67-
},
68-
set(value) {
69-
this.$emit('input', value);
70-
},
71-
},
72-
titleRules() {
73-
return [v => !!v || this.$tr('topicTitleRequired')];
74-
},
75-
},
7636
methods: {
7737
create() {
78-
if (this.$refs.form.validate()) {
38+
if (!this.title) {
39+
this.titleError = this.$tr('topicTitleRequired');
40+
this.showErrorText = true;
41+
this.$refs.title.focus();
42+
} else {
7943
this.$emit('createTopic', this.title);
8044
}
8145
},
46+
cancel() {
47+
this.$emit('cancelCreateTopic');
48+
},
8249
},
8350
$trs: {
8451
topicTitle: 'Folder title',

‎contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/moveModal.spec.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,10 @@ function makeWrapper(selected) {
5050
Breadcrumbs: true,
5151
ResourceDrawer: true,
5252
OfflineText: true,
53+
NewTopicModal: {
54+
name: 'NewTopicModal',
55+
template: '<div data-test="newtopicmodal"></div>',
56+
},
5357
},
5458
});
5559
}

‎contentcuration/contentcuration/frontend/channelEdit/components/move/__tests__/newTopicModal.spec.js‎

Lines changed: 81 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,33 +18,88 @@ describe('newTopicModal', () => {
1818
beforeEach(() => {
1919
wrapper = makeWrapper();
2020
});
21-
it('dialog should reflect v-model value', async () => {
22-
expect(wrapper.vm.dialog).toBe(true);
23-
wrapper.setProps({ value: false });
24-
await wrapper.vm.$nextTick();
25-
expect(wrapper.vm.dialog).toBe(false);
26-
});
27-
it('create button should validate form', async () => {
28-
wrapper.find('[data-test="create"]').trigger('click');
29-
await wrapper.vm.$nextTick();
30-
expect(wrapper.findComponent({ ref: 'form' }).vm.value).toBe(false);
21+
22+
it('renders correctly with default data', () => {
23+
expect(wrapper.find('[data-test="newtopicmodal"]').exists()).toBe(true);
24+
expect(wrapper.vm.title).toBe('');
25+
expect(wrapper.vm.showErrorText).toBe(false);
26+
});
27+
28+
it('displays modal with required props', () => {
29+
const modal = wrapper.findComponent({ name: 'KModal' });
30+
expect(modal.props('title')).toBeDefined();
31+
expect(modal.props('title').length).toBeGreaterThan(0);
32+
expect(modal.props('cancelText')).toBeDefined();
33+
expect(modal.props('submitText')).toBeDefined();
34+
});
35+
36+
it('updates title when user types in textbox', async () => {
37+
const testInput = 'Test Topic';
38+
const textbox = wrapper.findComponent({ name: 'KTextbox' });
39+
await textbox.vm.$emit('input', testInput);
40+
expect(wrapper.vm.title).toBe(testInput);
41+
});
42+
43+
it('shows error state when creating topic with empty title', async () => {
44+
wrapper.setData({ title: '' });
45+
await wrapper.vm.create();
46+
expect(wrapper.vm.titleError).toBeDefined();
47+
expect(wrapper.vm.titleError.length).toBeGreaterThan(0);
48+
expect(wrapper.vm.showErrorText).toBe(true);
49+
});
50+
51+
it('emits createTopic event with provided title', async () => {
52+
const testTitle = 'Valid Topic Title';
53+
wrapper.setData({ title: testTitle });
54+
await wrapper.vm.create();
55+
expect(wrapper.emitted('createTopic')).toBeTruthy();
56+
expect(wrapper.emitted('createTopic')[0]).toEqual([testTitle]);
57+
});
58+
59+
it('does not emit createTopic event when title is empty', async () => {
60+
wrapper.setData({ title: '' });
61+
await wrapper.vm.create();
3162
expect(wrapper.emitted('createTopic')).toBeFalsy();
3263
});
33-
it('create button should emit createTopic event if valid', async () => {
34-
wrapper.setData({ title: 'test title' });
35-
await wrapper.vm.$nextTick();
36-
wrapper.findComponent('[data-test="create"]').trigger('click');
37-
await wrapper.vm.$nextTick();
38-
expect(wrapper.emitted('createTopic')[0][0]).toBe('test title');
39-
});
40-
it('close button should emit input event with false value', async () => {
41-
wrapper.findComponent('[data-test="close"]').trigger('click');
42-
await wrapper.vm.$nextTick();
43-
expect(wrapper.emitted('input')[0][0]).toBe(false);
44-
});
45-
it('closing modal should clear title', async () => {
46-
wrapper.findComponent('[data-test="close"]').trigger('click');
47-
await wrapper.vm.$nextTick();
48-
expect(wrapper.vm.title).toBe('');
64+
65+
it('emits cancelCreateTopic event when cancel is called', async () => {
66+
await wrapper.vm.cancel();
67+
expect(wrapper.emitted('cancelCreateTopic')).toBeTruthy();
68+
});
69+
70+
it('focuses title input when validation fails', async () => {
71+
const focusSpy = jest.spyOn(wrapper.vm.$refs.title, 'focus');
72+
wrapper.setData({ title: '' });
73+
await wrapper.vm.create();
74+
expect(focusSpy).toHaveBeenCalled();
75+
});
76+
77+
it('configures textbox with correct constraints', () => {
78+
const textbox = wrapper.findComponent({ name: 'KTextbox' });
79+
expect(textbox.props('label')).toBeDefined();
80+
expect(textbox.props('maxlength')).toBe(200);
81+
});
82+
83+
it('shows invalid state on textbox when error occurs', async () => {
84+
const textbox = wrapper.findComponent({ name: 'KTextbox' });
85+
wrapper.setData({ title: '' });
86+
await wrapper.vm.create();
87+
expect(textbox.props('invalid')).toBe(true);
88+
expect(textbox.props('showInvalidText')).toBe(true);
89+
expect(textbox.props('invalidText')).toBeDefined();
90+
});
91+
92+
it('clears error state when valid title is provided', async () => {
93+
// Invalid title
94+
wrapper.setData({ title: '' });
95+
await wrapper.vm.create();
96+
expect(wrapper.vm.showErrorText).toBe(true);
97+
98+
// Valid title
99+
const validTitle = 'Valid Title';
100+
wrapper.setData({ title: validTitle });
101+
await wrapper.vm.create();
102+
expect(wrapper.emitted('createTopic')).toBeTruthy();
103+
expect(wrapper.emitted('createTopic')[0]).toEqual([validTitle]);
49104
});
50105
});

‎contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/SearchOrBrowseWindow.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@
219219
<p
220220
v-if="showFeedbackErrorMessage"
221221
class="feedback-form-error"
222-
:style="{ color: $themeTokens.error, backgroundColor: $themePalette.red.v_100 }"
222+
:style="{ color: $themeTokens.error, backgroundColor: $themePalette.pink.v_100 }"
223223
>
224224
<KLabeledIcon
225225
icon="error"

0 commit comments

Comments
 (0)