Rewrite MismatchesTable with Vue3 syntax (#828)

guergana · chukarave · commit 6a3756a115cb · 2024-01-12T09:23:08.000+01:00
* Rewrite MismatchesTable with Vue3 syntax Bug: T354375
diff --git a/resources/js/Components/MismatchesTable.vue b/resources/js/Components/MismatchesTable.vue
@@ -22,27 +22,18 @@
     </wikit-table>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { Table as WikitTable } from '@wmde/wikit-vue-components';
 
 import MismatchRow from './MismatchRow.vue';
 
-import { LabelledMismatch } from '../types/Mismatch';
+import type { LabelledMismatch } from '../types/Mismatch';
 
-export default defineComponent({
-    components: {
-        MismatchRow,
-        WikitTable,
-    },
-    props: {
-        mismatches: Array as PropType<LabelledMismatch[]>,
-        disabled: {
-            type: Boolean,
-            default: false
-        }
-    }
+withDefaults(defineProps<{
+	mismatches: LabelledMismatch[],
+    disabled: boolean
+}>(), {
+	disabled: false
 });
 </script>
 
diff --git a/tests/Vue/Components/MismatchesTable.spec.js b/tests/Vue/Components/MismatchesTable.spec.js
@@ -1,6 +1,13 @@
 import { mount } from '@vue/test-utils';
 import MismatchesTable from '@/Components/MismatchesTable.vue';
 import MismatchRow from '@/Components/MismatchRow.vue';
+import { createI18n } from 'vue-banana-i18n';
+
+const i18n = createI18n({
+    messages: {},
+    locale: 'en',
+    wikilinks: true
+});
 
 describe('MismatchesTable.vue', () => {
     it('accepts a mismatches property', () => {
@@ -22,10 +29,7 @@ describe('MismatchesTable.vue', () => {
         const wrapper = mount(MismatchesTable, {
             props: { mismatches },
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n]
             }
         });
 
@@ -59,10 +63,7 @@ describe('MismatchesTable.vue', () => {
         const wrapper = mount(MismatchesTable, {
             props: { disabled, mismatches },
             global: {
-                mocks: {
-                    // Mock the banana-i18n plugin dependency
-                    $i18n: key => key
-                }
+                plugins: [i18n]
             }
         });
 
