Adjust tests to new TextareaHome component

wmde · Nov 30, 2023 · 242bf73 · 242bf73
1 parent 5021f51
commit 242bf73
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 114 deletions.
diff --git a/resources/js/Components/TextareaHome.vue b/resources/js/Components/TextareaHome.vue
@@ -19,6 +19,7 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import { useStore } from '../store';
+import { MAX_NUM_IDS } from '../Pages/Home.vue';
 import { CdxIcon, CdxMessage, CdxTextArea, CdxField, CdxProgressBar } from "@wikimedia/codex";
 
 // Run it with compat mode
@@ -28,8 +29,6 @@ import { CdxIcon, CdxMessage, CdxTextArea, CdxField, CdxProgressBar } from "@wik
     COMPONENT_V_MODEL: false,
 };
 
-const MAX_NUM_IDS = 600;
-
 export default defineComponent({
     components: {
       CdxField,

diff --git a/tests/Vue/Components/TextareaHome.spec.js b/tests/Vue/Components/TextareaHome.spec.js
@@ -0,0 +1,126 @@
+import { mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { MAX_NUM_IDS } from '@/Pages/Home.vue';
+import TextareaHome from '@/Components/TextareaHome.vue';
+
+describe('TextareaHome.vue', () => {
+
+    const mocks = {
+        $i18n: key => key,
+        $page: {
+            props: { flash: {} }
+        },
+    }
+
+    it('sanitises input with empty lines', async () => {
+
+        const itemsInput = 'Q1\n\nQ2\n';
+
+        const wrapper = mount(TextareaHome, {
+            global: {
+                mocks,
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
+                    }
+                })],
+            }
+        });
+
+        expect( wrapper.vm.serializeInput() ).toEqual('Q1|Q2');
+    });
+
+    it('restores lastSearchIds value from store on page load', async () => {
+
+        const itemsInput = 'Q1\n\nQ2\n';
+
+        const wrapper = mount(TextareaHome, {
+            global: {
+                mocks,
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
+                    }
+                })]
+            }
+        });
+
+        expect( wrapper.vm.textareaInputValue).toEqual(itemsInput);
+    });
+
+    it('validates that textarea input is not empty', async () => {
+        const itemsInput = '';
+
+        const wrapper = mount(TextareaHome, {
+            global: {
+                mocks,
+                plugins: [createTestingPinia()]
+            },
+            data() {
+                return {
+                    form: {
+                        itemsInput
+                    }
+                 }
+            }
+        });
+
+        wrapper.vm.validate();
+
+        expect(wrapper.vm.validationError).toStrictEqual({
+            type: 'error',
+            message: { error: 'item-form-error-message-empty' }}
+        );
+    });
+
+    it('validates that items in textarea input dont exceed the maximum number of ids', async () => {
+        const itemsInput = Array(MAX_NUM_IDS + 2).fill('Q21').join('\n');
+
+        const wrapper = mount(TextareaHome, {
+            global: {
+                mocks,
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
+                    }
+                })],
+            }
+        });
+
+        wrapper.vm.validate();
+        expect(wrapper.vm.validationError).toStrictEqual({
+            type: 'error',
+            message: { error: 'item-form-error-message-max'}}
+        );
+    });
+
+    it('validates that items in textarea input are well-formed', async () => {
+        const itemsInput = 'L12345';
+
+        const wrapper = mount(TextareaHome, {
+            global: {
+                mocks,
+                plugins: [createTestingPinia({
+                    initialState: {
+                        storeId: {
+                            lastSearchedIds: itemsInput
+                        }
+                    }
+                })],
+            }
+        });
+
+        wrapper.vm.validate();
+        expect(wrapper.vm.validationError).toStrictEqual({
+            type: 'error',
+            message: { error: 'item-form-error-message-invalid' } }
+        );
+    });
+
+})
diff --git a/tests/Vue/Pages/Home.spec.js b/tests/Vue/Pages/Home.spec.js
@@ -15,47 +15,6 @@ describe('Home.vue', () => {
         },
     }
 
-
-    it('sanitises input with empty lines', async () => {
-
-        const itemsInput = 'Q1\n\nQ2\n';
-
-        const wrapper = mount(Home, {
-            global: {
-                mocks,
-                plugins: [createTestingPinia({
-                    initialState: {
-                        storeId: {
-                            lastSearchedIds: itemsInput
-                        }
-                    }
-                })],
-            }
-        });
-
-        expect( wrapper.vm.serializeInput() ).toEqual('Q1|Q2');
-    });
-
-    it('restores lastSearchIds value from store on page load', async () => {
-
-        const itemsInput = 'Q1\n\nQ2\n';
-
-        const wrapper = mount(Home, {
-            global: {
-                mocks,
-                plugins: [createTestingPinia({
-                    initialState: {
-                        storeId: {
-                            lastSearchedIds: itemsInput
-                        }
-                    }
-                })]
-            }
-        });
-
-        expect( wrapper.vm.textareaInputValue).toEqual(itemsInput);
-    });
-
     it('shows dialog after clicking the more info button', async () => {
 
         const wrapper = mount(Home, {
@@ -74,77 +33,6 @@ describe('Home.vue', () => {
         expect(dialog.isVisible()).toBe(true);
     });
 
-    it('validates that textarea input is not empty', async () => {
-        const itemsInput = '';
-
-        const wrapper = mount(Home, {
-            global: {
-                mocks,
-                plugins: [createTestingPinia()]
-            },
-            data() {
-                return {
-                    form: {
-                        itemsInput
-                    }
-                 }
-            }
-        });
-
-        wrapper.vm.validate();
-
-        expect(wrapper.vm.validationError).toStrictEqual({
-            type: 'error',
-            message: { error: 'item-form-error-message-empty' }}
-        );
-    });
-
-    it('validates that items in textarea input dont exceed the maximum number of ids', async () => {
-        const itemsInput = Array(MAX_NUM_IDS + 2).fill('Q21').join('\n');
-
-        const wrapper = mount(Home, {
-            global: {
-                mocks,
-                plugins: [createTestingPinia({
-                    initialState: {
-                        storeId: {
-                            lastSearchedIds: itemsInput
-                        }
-                    }
-                })],
-            }
-        });
-
-        wrapper.vm.validate();
-        expect(wrapper.vm.validationError).toStrictEqual({
-            type: 'error',
-            message: { error: 'item-form-error-message-max'}}
-        );
-    });
-
-    it('validates that items in textarea input are well-formed', async () => {
-        const itemsInput = 'L12345';
-
-        const wrapper = mount(Home, {
-            global: {
-                mocks,
-                plugins: [createTestingPinia({
-                    initialState: {
-                        storeId: {
-                            lastSearchedIds: itemsInput
-                        }
-                    }
-                })],
-            }
-        });
-
-        wrapper.vm.validate();
-        expect(wrapper.vm.validationError).toStrictEqual({
-            type: 'error',
-            message: { error: 'item-form-error-message-invalid' } }
-        );
-    });
-
     it('shows error message upon serverside validation errors', async () => {
         mocks.$page.props.errors = { 'someKey' : 'someError'}
         const wrapper = mount(Home, { global: {