Skip to content

Commit b6188ab

Browse files
guerganaguergana
committed
Rewrite MismatchRow in Vue3 script setup syntax
Some tests are still failing likely because MismatchesTable needs to be changed in the syntax as well. This PR is rebased on top of the Results Page PR(#805). Otherwise the tests fail. Bug: T354346
1 parent df9d939 commit b6188ab

File tree

2 files changed

+68
-112
lines changed

2 files changed

+68
-112
lines changed

‎resources/js/Components/MismatchRow.vue‎

Lines changed: 49 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -106,15 +106,15 @@
106106
</tr>
107107
</template>
108108

109-
<script lang="ts">
109+
<script setup lang="ts">
110110
import { formatISO } from 'date-fns';
111111
112112
import type { PropType } from 'vue';
113-
import { defineComponent } from 'vue';
113+
import { computed, ref } from 'vue';
114114
import { CdxButton, CdxDialog, CdxSelect } from "@wikimedia/codex";
115115
import { MenuItem } from '@wmde/wikit-vue-components/dist/components/MenuItem';
116-
117116
import { LabelledMismatch, ReviewDecision } from "../types/Mismatch";
117+
import { useI18n } from 'vue-banana-i18n';
118118
119119
const truncateLength = 100;
120120
@@ -126,72 +126,55 @@ type ReviewOptionMap = {
126126
[key: string]: ReviewMenuItem;
127127
};
128128
129-
interface MismatchRowState {
130-
statusOptions: ReviewOptionMap;
131-
decision: ReviewMenuItem;
132-
reviewStatus: string;
133-
fullDescriptionDialog: boolean;
134-
}
129+
const props = withDefaults(defineProps<{
130+
mismatch: LabelledMismatch
131+
disabled: boolean
132+
}>(), {
133+
disabled: false
134+
});
135135
136-
export default defineComponent({
137-
components: {
138-
CdxButton,
139-
CdxDialog,
140-
CdxSelect
141-
},
142-
props: {
143-
mismatch: Object as PropType<LabelledMismatch>,
144-
disabled: {
145-
type: Boolean,
146-
default: false
147-
}
136+
const messages = useI18n();
137+
138+
const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
139+
(options: ReviewOptionMap, decision: ReviewDecision) => ({
140+
...options,
141+
[decision]: {
142+
value: decision,
143+
label: messages.i18n(`review-status-${decision}`),
144+
description: "",
148145
},
149-
computed: {
150-
uploadDate(): string {
151-
return formatISO(new Date(this.mismatch.import_meta.created_at), {
152-
representation: 'date'
153-
});
154-
},
155-
statementUrl(): string {
156-
return `https://www.wikidata.org/wiki/${this.mismatch.item_id}#${this.mismatch.statement_guid}`;
157-
},
158-
shouldTruncate(): boolean {
159-
const text = this.mismatch.import_meta.description;
160-
return text ? text.length > truncateLength : false;
161-
},
162-
uploadInfoDescription(): string {
163-
const text = this.mismatch.import_meta.description;
164-
return this.shouldTruncate ?
165-
text.substring(0, truncateLength) + '...' : text;
166-
}
167-
},
168-
data(): MismatchRowState {
169-
// The following reducer generates the list of dropdown options based on a list of allowed status values
170-
const statusOptions: ReviewOptionMap = Object.values(ReviewDecision).reduce(
171-
(options: ReviewOptionMap, decision: ReviewDecision) => ({
172-
...options,
173-
[decision]: {
174-
value: decision,
175-
label: this.$i18n(`review-status-${decision}`),
176-
description: "",
177-
},
178-
}),
179-
{}
180-
);
181-
return {
182-
statusOptions,
183-
decision: statusOptions[this.mismatch.review_status],
184-
reviewStatus: String(this.mismatch.review_status),
185-
fullDescriptionDialog: false
186-
};
187-
},
188-
methods: {
189-
showDialog(e: Event) {
190-
e.preventDefault();
191-
this.fullDescriptionDialog = true;
192-
}
193-
}
146+
}),
147+
{}
148+
);
149+
150+
const uploadDate = computed<string>(() => {
151+
return formatISO(new Date(props.mismatch.import_meta.created_at), {
152+
representation: 'date'
153+
});
194154
});
155+
156+
const statementUrl = computed<string>(() => {
157+
return `https://www.wikidata.org/wiki/${props.mismatch.item_id}#${props.mismatch.statement_guid}`;
158+
});
159+
160+
const shouldTruncate = computed<boolean>(() => {
161+
const text = props.mismatch.import_meta.description;
162+
return text ? text.length > truncateLength : false;
163+
});
164+
165+
const uploadInfoDescription = computed<string>(() => {
166+
const text = props.mismatch.import_meta.description;
167+
return shouldTruncate.value ? text.substring(0, truncateLength) + '...' : text;
168+
});
169+
170+
const decision = statusOptions[props.mismatch.review_status];
171+
const reviewStatus = String(props.mismatch.review_status);
172+
const fullDescriptionDialog = ref(false);
173+
174+
function showDialog(e: Event) {
175+
e.preventDefault();
176+
fullDescriptionDialog.value = true;
177+
}
195178
</script>
196179

197180
<style lang="scss">

‎tests/Vue/Components/MismatchRow.spec.js‎

Lines changed: 19 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@ import {CdxSelect} from "@wikimedia/codex";
55
import {ReviewDecision} from '@/types/Mismatch.ts';
66

77
import MismatchRow from '@/Components/MismatchRow.vue';
8+
import { createI18n } from 'vue-banana-i18n';
9+
10+
const i18n = createI18n({
11+
messages: {},
12+
locale: 'en',
13+
wikilinks: true
14+
});
815

916
describe('MismatchesRow.vue', () => {
1017
it('accepts a disabled property', () => {
@@ -25,10 +32,7 @@ describe('MismatchesRow.vue', () => {
2532
const wrapper = mount(MismatchRow, {
2633
props: {mismatch, disabled},
2734
global: {
28-
mocks: {
29-
// Mock the banana-i18n plugin dependency
30-
$i18n: key => key
31-
}
35+
plugins: [i18n],
3236
}
3337
});
3438

@@ -57,10 +61,7 @@ describe('MismatchesRow.vue', () => {
5761
const wrapper = mount(MismatchRow, {
5862
props: {mismatch},
5963
global: {
60-
mocks: {
61-
// Mock the banana-i18n plugin dependency
62-
$i18n: key => key
63-
}
64+
plugins: [i18n],
6465
}
6566
});
6667
const rowText = wrapper.find('tr').text();
@@ -97,10 +98,7 @@ describe('MismatchesRow.vue', () => {
9798
const wrapper = mount(MismatchRow, {
9899
props: {mismatch},
99100
global: {
100-
mocks: {
101-
// Mock the banana-i18n plugin dependency
102-
$i18n: key => key
103-
}
101+
plugins: [i18n],
104102
}
105103
});
106104

@@ -129,10 +127,7 @@ describe('MismatchesRow.vue', () => {
129127
const wrapper = mount(MismatchRow, {
130128
props: {mismatch},
131129
global: {
132-
mocks: {
133-
// Mock the banana-i18n plugin dependency
134-
$i18n: key => key
135-
}
130+
plugins: [i18n],
136131
}
137132
});
138133

@@ -161,10 +156,7 @@ describe('MismatchesRow.vue', () => {
161156
const wrapper = mount(MismatchRow, {
162157
props: {mismatch},
163158
global: {
164-
mocks: {
165-
// Mock the banana-i18n plugin dependency
166-
$i18n: key => key
167-
}
159+
plugins: [i18n],
168160
}
169161
});
170162

@@ -198,10 +190,7 @@ describe('MismatchesRow.vue', () => {
198190
const wrapper = mount(MismatchRow, {
199191
props: {mismatch},
200192
global: {
201-
mocks: {
202-
// Mock the banana-i18n plugin dependency
203-
$i18n: key => key
204-
}
193+
plugins: [i18n],
205194
}
206195
});
207196

@@ -241,10 +230,7 @@ describe('MismatchesRow.vue', () => {
241230
const wrapper = mount(MismatchRow, {
242231
props: {mismatch},
243232
global: {
244-
mocks: {
245-
// Mock the banana-i18n plugin dependency
246-
$i18n: key => key
247-
}
233+
plugins: [i18n],
248234
}
249235
});
250236

@@ -279,10 +265,7 @@ describe('MismatchesRow.vue', () => {
279265
const wrapper = mount(MismatchRow, {
280266
props: {mismatch},
281267
global: {
282-
mocks: {
283-
// Mock the banana-i18n plugin dependency
284-
$i18n: key => key
285-
},
268+
plugins: [i18n],
286269
stubs: {
287270
teleport: true,
288271
transition: true
@@ -312,10 +295,7 @@ describe('MismatchesRow.vue', () => {
312295
const wrapper = mount(MismatchRow, {
313296
props: {mismatch},
314297
global: {
315-
mocks: {
316-
// Mock the banana-i18n plugin dependency
317-
$i18n: key => key
318-
}
298+
plugins: [i18n],
319299
}
320300
});
321301

@@ -339,10 +319,7 @@ describe('MismatchesRow.vue', () => {
339319
const wrapper = mount(MismatchRow, {
340320
props: {mismatch},
341321
global: {
342-
mocks: {
343-
// Mock the banana-i18n plugin dependency
344-
$i18n: key => key
345-
}
322+
plugins: [i18n],
346323
}
347324
});
348325

@@ -371,10 +348,7 @@ describe('MismatchesRow.vue', () => {
371348
const wrapper = mount(MismatchRow, {
372349
props: {mismatch},
373350
global: {
374-
mocks: {
375-
// Mock the banana-i18n plugin dependency
376-
$i18n: key => `${key}`
377-
}
351+
plugins: [i18n],
378352
}
379353
});
380354

@@ -404,9 +378,8 @@ describe('MismatchesRow.vue', () => {
404378
const wrapper = mount(MismatchRow, {
405379
props: {mismatch},
406380
global: {
381+
plugins: [i18n],
407382
mocks: {
408-
// Mock the banana-i18n plugin dependency
409-
$i18n: key => `${key}`,
410383
$bubble: bubbleStub
411384
}
412385
}

0 commit comments

Comments
 (0)