minor test refactor for component instances

.vscode/settings.json

@@ -11,5 +11,8 @@
             "fileMatch": ["cypress.json"],
             "url": "https://on.cypress.io/cypress.schema.json"
         }
-    ]
+    ],
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    }
 }

src/boot/i18n.js

@@ -2,12 +2,14 @@ import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
 
-export default boot(({ app }) => {
 const i18n = createI18n({
     locale: 'en',
     messages,
 });
 
+export default boot(({ app }) => {
     // Set i18n instance on app
     app.use(i18n);
 });
+
+export { i18n };

src/components/UserPanel.vue

@@ -1,3 +1,51 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { Dark, useQuasar } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+
+import { useState } from 'src/composables/useState';
+import { useSession } from 'src/composables/useSession';
+
+const quasar = useQuasar();
+const state = useState();
+const session = useSession();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const darkMode = computed({
+    get() {
+        return Dark.isActive;
+    },
+    set(value) {
+        Dark.set(value);
+    },
+});
+
+const user = state.getUser();
+const token = session.getToken();
+
+onMounted(async () => {
+    try {
+        const roles = await axios.get('/api/accounts/acl')
+        state.setUser(roles.user);
+    } catch (error) {
+        quasar.notify({
+            message: t('errors.statusUnauthorized'),
+            type: 'negative',
+        });
+        logout();
+    }
+});
+
+function logout() {
+    session.destroy();
+    router.push('/login');
+}
+
+</script>
+
 <template>
     <q-menu>
         <div class="row no-wrap q-pa-md">
@@ -34,7 +82,7 @@
                 <div class="text-subtitle1 q-mt-md">
                     <strong>{{ user.nickname }}</strong>
                 </div>
-                <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>
+                <div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.name }}</div>
 
                 <q-btn
                     color="orange"
@@ -49,56 +97,3 @@
         </div>
     </q-menu>
 </template>
-
-<script setup>
-import { onMounted, computed } from 'vue';
-import { Dark, useQuasar } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import axios from 'axios';
-
-import { useState } from 'src/composables/useState';
-import { useSession } from 'src/composables/useSession';
-
-const quasar = useQuasar();
-const state = useState();
-const session = useSession();
-const router = useRouter();
-const { t, locale } = useI18n();
-
-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
-
-const user = state.getUser();
-const token = session.getToken();
-
-onMounted(() => {
-    axios
-        .get('/api/accounts/acl')
-        .then(({ data }) => {
-            state.setUser({
-                id: data.user.id,
-                username: data.user.name,
-                nickname: data.user.nickname,
-            });
-        })
-        .catch(() => {
-            quasar.notify({
-                message: t('errors.statusUnauthorized'),
-                type: 'negative',
-            });
-            logout();
-        });
-});
-
-function logout() {
-    session.destroy();
-    router.push('/login');
-}
-</script>

src/components/__tests__/UserPanel.spec.js

@@ -1,11 +1,17 @@
 import { describe, expect, it, jest } from '@jest/globals';
 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
-import { mount } from '@vue/test-utils';
+import { mount, flushPromises } from '@vue/test-utils';
+import axios from 'axios';
 import { i18n } from 'src/boot/i18n';
 import UserPanel from '../UserPanel.vue';
+import { Notify } from 'quasar';
 
 // Specify here Quasar config you'll need to test your component
-installQuasarPlugin();
+installQuasarPlugin({
+    plugins: {
+        Notify
+    }
+});
 const mockPush = jest.fn();
 
 jest.mock('vue-router', () => ({
@@ -14,15 +20,48 @@ jest.mock('vue-router', () => ({
     }),
 }));
 
-describe('UserPanel', () => {
+function createWrapper(component) {
-    it('should have the function logout defined', () => {
+    const wrapper = mount(component, {
-        const wrapper = mount(UserPanel, {
         global: {
             plugins: [i18n]
         }
     });
-        const { vm } = wrapper;
+    const vm = wrapper.vm;
 
-        expect(vm.logout).toBeDefined();
+    return { vm, wrapper };
+}
+
+describe('UserPanel', () => {
+    describe('onMounted', () => {
+        it('should define the user into state', async () => {
+            const userMock = {
+                user: {
+                    id: 1,
+                    name: 'myName',
+                    nickname: 'myNickName'
+                }
+            }
+            jest.spyOn(axios, 'get').mockResolvedValue(userMock);
+            const { vm } = createWrapper(UserPanel);
+
+            await flushPromises()
+
+            const expectedUser = expect.objectContaining(userMock.user)
+            expect(vm.state.getUser().value).toEqual(expectedUser);
+        });
+
+        it('should logout and notify the expected error', async () => {
+            jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
+
+            const { vm } = createWrapper(UserPanel);
+
+            jest.spyOn(vm.quasar, 'notify');
+
+            await flushPromises()
+
+            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
+                { 'type': 'negative' }
+            ));
+        });
     });
 });

src/composables/useState.js

@@ -2,7 +2,7 @@ import { ref, computed } from 'vue';
 
 const user = ref({
     id: 0,
-    username: '',
+    name: '',
     nickname: '',
 });
 
@@ -13,7 +13,7 @@ export function useState() {
         return computed(() => {
             return {
                 id: user.value.id,
-                username: user.value.username,
+                name: user.value.name,
                 nickname: user.value.nickname,
             };
         });
@@ -22,7 +22,7 @@ export function useState() {
     function setUser(data) {
         user.value = {
             id: data.id,
-            username: data.username,
+            name: data.name,
             nickname: data.nickname,
         };
     }