Merge pull request #29 from fraidakis/fraidakis

feat: enhance UI/UX

Author: fraidakis

cypress/e2e/auth_happy_unhappy.cy.js

@@ -10,17 +10,17 @@
  */
 Cypress.Commands.add('login', (email, password) => {
   cy.visit('/login');
-  
+
   // Fill in login form using data-cy attributes
   cy.get('[data-cy="input-email"]').clear().type(email);
   cy.get('[data-cy="input-password"]').clear().type(password);
-  
+
   // Submit the form
   cy.get('[data-cy="btn-submit"]').click();
-  
+
   // Wait for redirect or success indication
   cy.url().should('not.include', '/login', { timeout: 10000 });
-  
+
   // Verify token is stored
   cy.window().its('localStorage.token').should('exist');
 });
@@ -33,7 +33,7 @@ Cypress.Commands.add('login', (email, password) => {
  */
 Cypress.Commands.add('loginViaAPI', (email, password) => {
   const apiUrl = Cypress.env('apiUrl') || 'http://localhost:3001';
-  
+
   cy.request({
     method: 'POST',
     url: `${apiUrl}/auth/login`,
@@ -45,19 +45,19 @@ Cypress.Commands.add('loginViaAPI', (email, password) => {
     expect(response.status).to.eq(200);
     expect(response.body).to.have.property('success');
     expect(response.body.success).to.be.true;
-    
+
     // Handle response structure: { success, data: { token, user } }
     const token = response.body.data?.token || response.body.token;
     const user = response.body.data?.user || response.body.user;
-    
+
     // Visit the home page first to set up the window context
     cy.visit('/');
-    
+
     // Store token and user info in localStorage
     cy.window().then((win) => {
       win.localStorage.setItem('token', token);
       win.localStorage.setItem('user', JSON.stringify(user));
-      
+
       // Dispatch login event
       win.dispatchEvent(new CustomEvent('user:login', { detail: user }));
     });
@@ -72,7 +72,7 @@ Cypress.Commands.add('logout', () => {
   // Clear authentication data
   cy.clearLocalStorage();
   cy.clearCookies();
-  
+
   // Visit home or login page
   cy.visit('/');
 });
@@ -88,19 +88,19 @@ Cypress.Commands.add('logout', () => {
  */
 Cypress.Commands.add('register', (userData) => {
   cy.visit('/signup');
-  
+
   // Fill in registration form using data-cy attributes
   cy.get('[data-cy="input-name"]').clear().type(userData.name);
   cy.get('[data-cy="input-email"]').clear().type(userData.email);
   cy.get('[data-cy="input-password"]').clear().type(userData.password);
   cy.get('[data-cy="input-confirmPassword"]').clear().type(userData.confirmPassword || userData.password);
-  
+
   // Submit the form
   cy.get('[data-cy="btn-submit"]').click();
-  
+
   // Wait for redirect or success indication
   cy.url().should('not.include', '/signup', { timeout: 10000 });
-  
+
   // Verify token is stored
   cy.window().its('localStorage.token').should('exist');
 });
@@ -145,11 +145,11 @@ Cypress.Commands.add('clearAuthToken', () => {
 Cypress.Commands.add('loginAsTestUser', (role = 'validUser') => {
   cy.fixture('test-users').then((users) => {
     const user = users[role];
-    
+
     if (!user) {
       throw new Error(`User role "${role}" not found in test-users fixture`);
     }
-    
+
     // Use API login for speed
     cy.loginViaAPI(user.email, user.password);
   });
@@ -213,12 +213,12 @@ Cypress.Commands.add('interceptAPI', (endpoint, method = 'GET') => {
     navigation: { pattern: '**/navigation*', alias: 'getNavigation' },
     calculateRoute: { pattern: '**/routes*', alias: 'calculateRoute' }
   };
-  
+
   const config = aliasMap[endpoint];
   if (!config) {
     throw new Error(`Unknown API endpoint: ${endpoint}. Available: ${Object.keys(aliasMap).join(', ')}`);
   }
-  
+
   cy.intercept(method, config.pattern).as(config.alias);
 });
 
@@ -234,22 +234,34 @@ Cypress.Commands.add('interceptAPI', (endpoint, method = 'GET') => {
 Cypress.Commands.add('waitForAPIAndLoading', (alias, options = {}) => {
   const { waitForLoading = true, timeout = 10000 } = options;
   const cleanAlias = alias.startsWith('@') ? alias : `@${alias}`;
-  
+
   cy.wait(cleanAlias, { timeout });
-  
+
   if (waitForLoading) {
     cy.get('[data-cy="loading-spinner"], .loading, .spinner', { timeout }).should('not.exist');
   }
 });
 
 /**
  * Navigate to a page using navigation link and verify URL
+ * Handles items inside user dropdown by opening it first
  * @param {string} dataCy - data-cy attribute value for the navigation link
  * @param {string} expectedPath - Expected path in URL after navigation
  * @example cy.navigateViaNav('nav-recommendations', '/recommendations')
  */
 Cypress.Commands.add('navigateViaNav', (dataCy, expectedPath) => {
-  cy.get(`[data-cy="${dataCy}"]`).click();
+  // Items that are inside the user dropdown
+  const dropdownItems = ['nav-preferences', 'nav-profile'];
+
+  if (dropdownItems.includes(dataCy)) {
+    // First open the user dropdown
+    cy.get('[data-cy="user-dropdown-trigger"]').should('be.visible').click();
+    // Wait for dropdown menu to appear, then click the item
+    cy.get(`[data-cy="${dataCy}"]`).should('be.visible').click();
+  } else {
+    // Regular nav item - just click it
+    cy.get(`[data-cy="${dataCy}"]`).click();
+  }
   cy.url().should('include', expectedPath);
 });
 

cypress/e2e/happy_paths.cy.js

@@ -587,8 +587,9 @@ export const verifyPlaceDetailsVisible = () => {
   cy.get('[data-cy="place-title"]').should('be.visible');
   cy.get('[data-cy="place-description-card"]').should('be.visible');
   cy.get('[data-cy="place-actions"]').should('be.visible');
-  expectTextVisible(/description/i);
-  expectTextVisible(/address|location/i);
+  expectTextVisible(/information/i);
+  // Address is now displayed with just an icon, verify the card contains an address value
+  cy.get('.place-address-row').should('be.visible');
 };
 
 /**
@@ -643,7 +644,9 @@ export const verifyAuthenticationSuccess = () => {
   cy.url().should('not.include', '/login');
   cy.url().should('not.include', '/signup');
   cy.window().its('localStorage.token').should('exist');
-  cy.get('[data-cy="btn-logout"]').should('exist');
+  // Check for user dropdown trigger which indicates logged-in state
+  // The logout button is now inside the dropdown, not directly visible
+  cy.get('[data-cy="user-dropdown-trigger"]').should('exist');
 };
 
 /**

cypress/support/commands.js

@@ -50,4 +50,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

cypress/support/helpers.js

@@ -1,27 +1,56 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { LanguageProvider } from './i18n';
-import { ToastProvider } from './components/ui';
+import { ThemeProvider } from './context';
+import { ToastProvider, BottomNavigation } from './components/ui';
 import Header from './components/Header.jsx';
 import Footer from './components/Footer.jsx';
 import AppRoutes from './router/index.jsx';
 import './App.css';
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+    // Check for existing token on mount
+    const token = localStorage.getItem('token');
+    setIsAuthenticated(!!token);
+
+    // Listen for login/logout events
+    const handleLogin = () => setIsAuthenticated(true);
+    const handleLogout = () => setIsAuthenticated(false);
+
+    window.addEventListener('user:login', handleLogin);
+    window.addEventListener('user:logout', handleLogout);
+    window.addEventListener('storage', (e) => {
+      if (e.key === 'token') {
+        setIsAuthenticated(!!e.newValue);
+      }
+    });
+
+    return () => {
+      window.removeEventListener('user:login', handleLogin);
+      window.removeEventListener('user:logout', handleLogout);
+    };
+  }, []);
+
   return (
-    <LanguageProvider>
-      <ToastProvider>
-        <Router>
-          <div className="App">
-            <Header />
-            <main className="main-content">
-              <AppRoutes />
-            </main>
-            <Footer />
-          </div>
-        </Router>
-      </ToastProvider>
-    </LanguageProvider>
+    <ThemeProvider>
+      <LanguageProvider>
+        <ToastProvider>
+          <Router>
+            <div className="App">
+              <Header />
+              <main className="main-content">
+                <AppRoutes />
+              </main>
+              <Footer />
+              <BottomNavigation isAuthenticated={isAuthenticated} />
+            </div>
+          </Router>
+        </ToastProvider>
+      </LanguageProvider>
+    </ThemeProvider>
   );
 }