Merge branch 'test/Components' into 'main'

test: more tests to components

See merge request !37

src/components/InputFields/BaseInput.vue

@@ -63,7 +63,7 @@ const onInputEvent = (event: any) => {
            :required="required"
     />
     <div class="valid-feedback">{{ validMessage }}</div>
-    <div class="invalid-feedback">{{ invalidMessage }}</div>
+    <div class="invalid-feedback" id="invalid">{{ invalidMessage }}</div>
   </div>
 </template>
 

src/components/Login/LoginLink.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <p>Already have an account? <RouterLink to="/login">Login</RouterLink></p>
+  <p>Already have an account? <RouterLink to="/login" id="login">Login</RouterLink></p>
 </template>
 
 <style scoped>

src/components/Login/__tests__/LoginForm.spec.ts

+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import { useUserInfoStore } from '@/stores/UserStore';
+import MyComponent from '@/components/Login/LoginForm.vue'; // Adjust path as needed
+import router from '@/router/index'; // Adjust path as needed
+import { access } from 'fs';
+import { render, fireEvent, cleanup, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+describe('Menu and Router Tests', () => {
+    let store: any, mockRouter: any;
+
+    beforeEach(() => {
+        // Create a fresh Pinia and Router instance before each test
+        setActivePinia(createPinia());
+        store = useUserInfoStore();
+        mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: router.getRoutes(),
+        });
+        router.beforeEach((to, from, next) => {
+            const isAuthenticated = store.accessToken;
+            if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+                next({ name: 'login' });
+            } else {
+                next();
+            }
+        });
+
+    });
+
+    describe('Component Rendering', () => {
+        it('renders form correctly', () => {
+            store.setUserInfo({ firstname: 'Jane', lastname: 'Doe', accessToken: 'thisIsATestToken' });
+
+            const wrapper = mount(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            expect(wrapper.text()).toContain('email');
+            expect(wrapper.text()).toContain('password');
+        });
+    });
+
+    describe('Navigation Guards', () => {
+        it('redirects an unauthenticated user to login when accessing a protected route', async () => {
+            store.$patch({ accessToken: '' });
+
+            router.push('/');
+            await router.isReady();
+
+            expect(router.currentRoute.value.name).toBe('login');
+        });
+
+        it('allows an unauthenticated user to visit signup', async () => {
+            store.$patch({ accessToken: 'valid-token' });
+
+            mockRouter.push('/sign-up');
+
+            await mockRouter.isReady();
+
+            expect(mockRouter.currentRoute.value.name).toBe('sign up');
+        });
+    });
+
+
+    describe('Input fields', () => {
+        it('updates user credetials correctly', async () => {
+            const { getByPlaceholderText } = render(MyComponent);
+
+            const emailInput = getByPlaceholderText('Enter your email');
+            const passwordInput = getByPlaceholderText('Enter password');
+            await fireEvent.update(emailInput, 'user@example.com');
+            await fireEvent.update(passwordInput, 'Password1');
+
+            expect(emailInput.value).toBe('user@example.com');
+            expect(passwordInput.value).toBe('Password1');
+        });
+
+        it('Password error msg', async () => {
+            const { container } = render(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            const errorMsg = container.querySelector('#invalid'); // Use the actual ID here
+            expect(errorMsg?.textContent === "Password must be between 4 and 16 characters and contain one capital letter, small letter and a number")
+        });
+
+        it('logout should have empty store at application start', () => {
+            expect(store.firstname).toBe('');
+            expect(store.lastname).toBe('');
+            expect(store.accessToken).toBe('');
+        });
+    });
+
+    describe('Menu Actions', () => {
+        it('signup redirects to signup', async () => {
+            const { container } = render(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            // Assuming there's an element with id="home-link" that you want to click
+            const signupLink = container.querySelector('#signup'); // Use the actual ID here
+            if (signupLink) {
+                await userEvent.click(signupLink);
+                await mockRouter.isReady();
+            }
+
+            expect(mockRouter.currentRoute.value.name).toBe('sign up'); // Assuming 'Home' is the route name for '/'
+        });
+    });
+});

src/components/Login/__tests__/LoginLink.spec.ts

+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LoginPrompt from '@/components/Login/LoginLink.vue';
+import { useUserInfoStore } from '@/stores/UserStore';
+import router from '@/router/index';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+describe('LoginPrompt', () => {
+    let store, mockRouter;
+
+    beforeEach(() => {
+        // Create a fresh Pinia and Router instance before each test
+        setActivePinia(createPinia());
+        store = useUserInfoStore();
+        mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: router.getRoutes(),
+        });
+        router.beforeEach((to, from, next) => {
+            const isAuthenticated = store.accessToken;
+            if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+                next({ name: 'login' });
+            } else {
+                next();
+            }
+        });
+    });
+
+
+    it('renders login link correctly', async () => {
+        const router = createRouter({
+            history: createMemoryHistory(),
+            routes: [{ path: '/login', component: { template: 'Login Page' } }],
+        });
+
+        const { getByText } = render(LoginPrompt, {
+            global: {
+                plugins: [router],
+            },
+        });
+
+        await router.isReady(); // Ensure the router is ready before asserting
+
+        const loginLink = getByText('Login');
+        expect(loginLink).toBeDefined(); // Check if the 'Login' link is rendered
+    });
+
+    it('navigates to the login page when the login link is clicked', async () => {
+        const mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: [{ path: '/login', name: 'login', component: { template: 'Login Page' } }],
+        });
+    
+        const { container } = render(LoginPrompt, {
+            global: {
+                plugins: [mockRouter],
+            },
+        });
+    
+        await mockRouter.isReady(); // Ensure the router is ready before asserting
+    
+        const loginLink = container.querySelector('#login'); // Use the actual ID here
+        if (loginLink) {
+            await userEvent.click(loginLink);
+            await mockRouter.isReady();
+        }
+    
+        expect(mockRouter.currentRoute.value.path).toBe('/login'); // Check if the router navigated to the login page
+    }, 10000);
+});

src/components/SignUp/SignUpLink.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <p>Don't have an account? <RouterLink to="/sign-up">Sign up</RouterLink></p>
+  <p>Don't have an account? <RouterLink to="/sign-up" id="signup">Sign up</RouterLink></p>
 </template>
 
 <style scoped>

src/components/SignUp/__tests__/SignUpForm.spec.ts

+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import { createPinia, setActivePinia } from 'pinia';
+import { useUserInfoStore } from '@/stores/UserStore';
+import MyComponent from '@/components/SignUp/SignUpForm.vue'; // Adjust path as needed
+import router from '@/router/index'; // Adjust path as needed
+import { access } from 'fs';
+import { render, fireEvent, cleanup, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+describe('Menu and Router Tests', () => {
+    let store: any, mockRouter: any;
+
+    beforeEach(() => {
+        // Create a fresh Pinia and Router instance before each test
+        setActivePinia(createPinia());
+        store = useUserInfoStore();
+        mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: router.getRoutes(),
+        });
+        router.beforeEach((to, from, next) => {
+            const isAuthenticated = store.accessToken;
+            if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+                next({ name: 'login' });
+            } else {
+                next();
+            }
+        });
+
+    });
+
+    describe('Component Rendering', () => {
+        it('renders form correctly', () => {
+            const wrapper = mount(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            expect(wrapper.text()).toContain('First name');
+            expect(wrapper.text()).toContain('Surname');
+            expect(wrapper.text()).toContain('Email');
+        });
+    });
+
+    describe('Navigation Guards', () => {
+        it('redirects an unauthenticated user to login when accessing a protected route', async () => {
+            store.$patch({ accessToken: '' });
+
+            router.push('/');
+            await router.isReady();
+
+            expect(router.currentRoute.value.name).toBe('login');
+        });
+
+        it('allows an unauthenticated user to visit login', async () => {
+            store.$patch({ accessToken: 'valid-token' });
+
+            mockRouter.push('/login');
+
+            await mockRouter.isReady();
+
+            expect(mockRouter.currentRoute.value.name).toBe('login');
+        });
+    });
+
+
+    describe('Input fields', () => {
+        it('updates user credetials correctly', async () => {
+            const { getByPlaceholderText } = render(MyComponent);
+
+            const firstInput = getByPlaceholderText('Enter your first name');
+            const lastInput = getByPlaceholderText('Enter your surname');
+            const emailInput = getByPlaceholderText('Enter your email');
+            const passwordInput = getByPlaceholderText('Enter password');
+            await fireEvent.update(firstInput, 'Alice');
+            await fireEvent.update(lastInput, 'Alicon');
+            await fireEvent.update(emailInput, 'user@example.com');
+            await fireEvent.update(passwordInput, 'Password1');
+
+            expect(firstInput.value).toBe('Alice');
+            expect(lastInput.value).toBe('Alicon');
+            expect(emailInput.value).toBe('user@example.com');
+            expect(passwordInput.value).toBe('Password1');
+        });
+
+        it('Password error msg', async () => {
+            const { container } = render(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            const errorMsg = container.querySelector('#invalid'); // Use the actual ID here
+            expect(errorMsg?.textContent === "Password must be between 4 and 16 characters and contain one capital letter, small letter and a number")
+        });
+
+        it('logout should have empty store at application start', () => {
+            expect(store.firstname).toBe('');
+            expect(store.lastname).toBe('');
+            expect(store.accessToken).toBe('');
+        });
+    });
+
+    describe('Menu Actions', () => {
+        it('signup redirects to signup', async () => {
+            const { container } = render(MyComponent, {
+                global: {
+                    plugins: [mockRouter],
+                },
+            });
+
+            // Assuming there's an element with id="home-link" that you want to click
+            const signupLink = container.querySelector('#login'); // Use the actual ID here
+            if (signupLink) {
+                await userEvent.click(signupLink);
+                await mockRouter.isReady();
+            }
+
+            expect(mockRouter.currentRoute.value.name).toBe('login'); // Assuming 'Home' is the route name for '/'
+        });
+    });
+});

src/components/SignUp/__tests__/SignUpLink.spec.ts

+import { describe, it, expect, beforeEach } from 'vitest';
+import { render } from '@testing-library/vue';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LoginPrompt from '@/components/SignUp/SignUpLink.vue';
+import { useUserInfoStore } from '@/stores/UserStore';
+import router from '@/router/index';
+import { render, screen } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+
+describe('LoginPrompt', () => {
+    let store, mockRouter;
+
+    beforeEach(() => {
+        // Create a fresh Pinia and Router instance before each test
+        setActivePinia(createPinia());
+        store = useUserInfoStore();
+        mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: router.getRoutes(),
+        });
+        router.beforeEach((to, from, next) => {
+            const isAuthenticated = store.accessToken;
+            if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+                next({ name: 'login' });
+            } else {
+                next();
+            }
+        });
+    });
+
+
+    it('renders login link correctly', async () => {
+        const router = createRouter({
+            history: createMemoryHistory(),
+            routes: [{ path: '/signup', component: { template: 'Signup Page' } }],
+        });
+
+        const { getByText } = render(LoginPrompt, {
+            global: {
+                plugins: [router],
+            },
+        });
+
+        const loginLink = getByText('Sign up');
+        expect(loginLink).toBeDefined(); // Check if the 'Login' link is rendered
+    });
+
+    it('navigates to the login page when the login link is clicked', async () => {
+        const mockRouter = createRouter({
+            history: createMemoryHistory(),
+            routes: [{ path: '/login', name: 'login', component: { template: 'Login Page' } }],
+        });
+    
+        const { container } = render(LoginPrompt, {
+            global: {
+                plugins: [mockRouter],
+            },
+        });
+    
+        await mockRouter.isReady(); // Ensure the router is ready before asserting
+    
+        const signupLink = container.querySelector('#signup'); // Use the actual ID here
+        if (signupLink) {
+            await userEvent.click(signupLink);
+            await mockRouter.isReady();
+        }
+    
+        expect(mockRouter.currentRoute.value.path).toBe('/sign-up'); // Check if the router navigated to the login page
+    }, 10000);
+});