Final updates

Author: Prashant-thakur77

contentcuration/contentcuration/frontend/shared/views/StudioNavigationTab.vue

@@ -19,6 +19,7 @@
       <span
         v-if="showBadge"
         class="studio-navigation-tab-badge"
+        :style="badgeStyles"
       >
         {{ $formatNumber(badgeValue) }}
       </span>
@@ -69,6 +70,12 @@
           color: this.$themeTokens.text,
         };
       },
+      badgeStyles() {
+        return {
+          color: this.$themeTokens.surface,
+          backgroundColor: this.$themeTokens.text,
+        };
+      },
       indicatorStyles() {
         return {
           backgroundColor: this.$themeTokens.surface,
@@ -140,8 +147,6 @@
     width: 22px;
     height: 22px;
     font-size: 14px;
-    color: white;
-    background-color: black;
     border-radius: 50%;
     transition: 0.3s;
   }

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigation.spec.js

@@ -7,6 +7,9 @@ import StudioNavigation from '../StudioNavigation';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
+localVue.use(VueRouter);
+
+
 
 global.window.Urls = {
   channels: jest.fn(() => '/channels'),
@@ -19,26 +22,18 @@ const mockActions = {
   trackClick: jest.fn(),
 };
 
-const createMockStore = (currentUser = null) => {
-  return new Vuex.Store({
+const renderComponent = (props = {}, user = null) => {
+  const store = new Vuex.Store({
     modules: {
       session: {
-        state: {
-          currentUser: currentUser,
-        },
-        getters: {
-          loggedIn: () => !!currentUser,
-        },
-        actions: {
-          logout: mockActions.logout,
-        },
+        state: { currentUser: user },
+        getters: { loggedIn: () => !!user },
+        actions: { logout: mockActions.logout },
       },
     },
   });
-};
 
-const createMockRouter = () => {
-  return new VueRouter({
+  const router = new VueRouter({
     routes: [
       { path: '/', name: 'home' },
       { path: '/channels', name: 'channels' },
@@ -47,88 +42,59 @@ const createMockRouter = () => {
       { path: '/library', name: 'library' },
     ],
   });
-};
-
-const stubs = {
-  KToolbar: { template: '<div><slot name="icon"></slot><slot name="brand"></slot><slot name="actions"></slot></div>' },
-  KIconButton: { 
-    props: ['icon', 'ariaLabel'], 
-    template: '<button :aria-label="ariaLabel || icon" v-on="$listeners"><slot></slot></button>' 
-  },
-  KExternalLink: { 
-    props: ['href', 'text'], 
-    template: '<a :href="href">{{ text }}<slot></slot></a>' 
-  },
-  KLogo: { template: '<img alt="Kolibri Logo" />' },
-  KDropdownMenu: {
-    props: ['options'],
-    template: `
-      <div data-testid="dropdown-menu">
-        <button v-for="opt in options" :key="opt.value" @click="$emit('select', opt)">
-          {{ opt.label }}
-        </button>
-      </div>
-    `
-  },
-  StudioNavigationTab: { 
-    props: ['to'],
-    template: '<router-link :to="to"><slot></slot></router-link>' 
-  },
-  SidePanelModal: { 
-    template: `
-      <div role="dialog" aria-label="Navigation menu">
-        <button aria-label="Close" @click="$emit('closePanel')">Close</button>
-        <slot name="header"></slot>
-        <slot></slot>
-      </div>
-    ` 
-  },
-  StudioNavigationOption: { 
-    props: ['label', 'link'], 
-    template: '<a :href="link" @click="$emit(\'select\') || $emit(\'click\')">{{ label }}</a>' 
-  },
-  SkipNavigationLink: { template: '<a>Skip</a>' },
-  LanguageSwitcherModal: { template: '<div role="dialog">Language Modal</div>' },
-};
-
-const renderComponent = (props = {}, user = null) => {
-  const store = createMockStore(user);
-  const router = createMockRouter();
 
   return render(StudioNavigation, {
     localVue,
     store,
-    routes: router,
+    router,
     props: {
       title: 'Kolibri Studio',
       ...props,
     },
-    stubs,
+  
     mocks: {
+      $formatNumber: n => n,
       $tr: (key) => {
-        const strings = {
+        const map = {
           title: 'Kolibri Studio',
           openMenu: 'Open navigation menu',
-          navigationMenu: 'Navigation menu',
           userMenuLabel: 'User menu',
           guestMenuLabel: 'Guest menu',
+          navigationMenu: 'Navigation menu',
           signIn: 'Sign in',
           signOut: 'Sign out',
-          administration: 'Administration',
+          channels: 'Channels',
           settings: 'Settings',
           help: 'Help and support',
           changeLanguage: 'Change language',
-          channels: 'Channels',
+          administration: 'Administration',
           copyright: '© 2026 Learning Equality',
           giveFeedback: 'Give feedback',
+          confirmAction: 'Confirm',
+          cancelAction: 'Cancel',
+          changeLanguageModalHeader: 'Change language',
+          skipToMainContentAction: 'Skip to main content',
         };
-        return strings[key] || key;
+        return map[key] || key;
       },
     },
   });
 };
 
 describe('StudioNavigation', () => {
+  const originalLocation = window.location;
+  beforeAll(() => {
+    delete window.location;
+    window.location = { href: '', assign: jest.fn() };
+    window.open = jest.fn();
+  
+  });
+
+  afterAll(() => {
+    window.location = originalLocation;
+    jest.restoreAllMocks();
+  });
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -148,20 +114,15 @@ describe('StudioNavigation', () => {
       expect(screen.queryByRole('button', { name: /Open navigation menu/i })).not.toBeInTheDocument();
     });
 
-    it('should display correct guest dropdown options', async () => {
+    it('opens guest menu and shows options', async () => {
       const user = userEvent.setup();
       renderComponent({}, null);
 
       const guestMenuTrigger = screen.getByRole('button', { name: /Guest menu/i });
       expect(guestMenuTrigger).toBeVisible();
       await user.click(guestMenuTrigger);
-
-      // Verify buttons exist
-      expect(screen.getByRole('button', { name: 'Sign in' })).toBeVisible();
-      // Dropdown items are inside the button trigger scope in the DOM structure often, 
-      // but strictly speaking, "Change language" appears in both Guest Dropdown and User Dropdown.
-      // Since we are in Guest View, we just check existence.
-      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByText('Sign in')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
     });
   });
 
@@ -177,32 +138,40 @@ describe('StudioNavigation', () => {
       expect(screen.getByRole('button', { name: /Open navigation menu/i })).toBeVisible();
       expect(screen.getByRole('button', { name: /User menu/i })).toBeVisible();
       expect(screen.getByText('TestUser')).toBeVisible();
-      expect(screen.queryByRole('link', { name: /Kolibri Logo/i })).not.toBeInTheDocument();
     });
 
-    it('should show correct user dropdown options for non-admin', () => {
+    it('renders user menu options when clicked', async () => {
+      const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
-      // We explicitly check items that are unique to the user menu or common
-      expect(screen.getByRole('button', { name: 'Settings' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Help and support' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Change language' })).toBeVisible();
-      expect(screen.getByRole('button', { name: 'Sign out' })).toBeVisible();
-      
-      expect(screen.queryByRole('button', { name: 'Administration' })).not.toBeInTheDocument();
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Settings')).toBeVisible();
+      expect(screen.getByText('Sign out')).toBeVisible();
+      expect(screen.getByText('Help and support')).toBeVisible();
+      expect(screen.getByText('Change language')).toBeVisible();
+      expect(screen.queryByText('Administration')).not.toBeInTheDocument();
     });
 
-    it('should show administration option for admin user', () => {
+    it('renders admin options for admin users', async () => {
+      const user = userEvent.setup();
       renderComponent({}, { ...defaultUser, is_admin: true });
-      expect(screen.getByRole('button', { name: 'Administration' })).toBeVisible();
+
+      const userMenuTrigger = screen.getByRole('button', { name: /User menu/i });
+      expect(userMenuTrigger).toBeVisible();
+      await user.click(userMenuTrigger);
+
+      expect(screen.getByText('Administration')).toBeVisible();
     });
 
-    it('should call logout action when Sign out is clicked', async () => {
+    it('triggers logout action', async () => {
       const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
-      const logoutBtn = screen.getByRole('button', { name: 'Sign out' });
-      await user.click(logoutBtn);
+      await user.click(screen.getByRole('button', { name: /User menu/i }));
+      await user.click(screen.getByText('Sign out'));
 
       expect(mockActions.logout).toHaveBeenCalled();
     });
@@ -219,61 +188,53 @@ describe('StudioNavigation', () => {
 
       await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
-      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
-      expect(dialog).toBeVisible();
-      
-      // FIX 1: Ambiguous "Kolibri Studio" text (Title in bar vs Title in panel)
-      // We check that the title exists specifically INSIDE the dialog
-      expect(within(dialog).getByText('Kolibri Studio')).toBeVisible();
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      expect(sidePanel).toBeVisible();
+      const panelScope = within(sidePanel);
+      expect(panelScope.getByText(/Kolibri Studio/)).toBeVisible();
     });
-
     it('should display correct navigation links in side panel', async () => {
       const user = userEvent.setup();
       renderComponent({}, defaultUser);
 
       await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
 
-      const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
 
-      // FIX 2: Ambiguous "Settings" text (Button in User Dropdown vs Link in Side Panel)
-   
-      const sidePanel = within(dialog);
+      const panelScope = within(sidePanel);
 
-      expect(sidePanel.getByText('Channels')).toBeVisible();
-      expect(sidePanel.getByText('Settings')).toBeVisible();
-      expect(sidePanel.getByText('Help and support')).toBeVisible();
-      expect(sidePanel.getByText('Sign out')).toBeVisible();
+      expect(panelScope.getByText('Channels')).toBeVisible();
+      expect(panelScope.getByText('Settings')).toBeVisible();
+      expect(panelScope.getByText('Help and support')).toBeVisible();
+      expect(panelScope.getByText('Sign out')).toBeVisible();
     });
 
-    it('should trigger Language Modal from side panel', async () => {
-        const user = userEvent.setup();
-        renderComponent({}, defaultUser);
-  
-        await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
-        
-        const dialog = screen.getByRole('dialog', { name: /Navigation menu/i });
-        const sidePanel = within(dialog);
-
-        // FIX 3: Ambiguous "Change language" text
-        // Scope to side panel
-        const changeLangLink = sidePanel.getByText('Change language');
-        await user.click(changeLangLink);
+    it('opens language modal from side panel', async () => {
+      const user = userEvent.setup();
+      renderComponent({}, defaultUser);
 
-        expect(screen.getByText('Language Modal')).toBeVisible();
+      await user.click(screen.getByRole('button', { name: /Open navigation menu/i }));
+      const sidePanel = screen.getByRole('region', { name: 'Navigation menu' });
+      await user.click(within(sidePanel).getByText('Change language'));
+      expect(await screen.findByRole('dialog', { name: 'Change language' })).toBeVisible();
+      expect(screen.getByLabelText('English')).toBeVisible();
+   
     });
   });
 
-  describe('navigation tabs', () => {
+  describe('Tab Navigation', () => {
     const tabs = [
-      { id: '1', label: 'My Channels', to: { name: 'channels' } },
-      { id: '2', label: 'Content Library', to: { name: 'library' } },
+      { id: '1', label: 'My Channels', to: { name: 'channels' }, badgeValue: 0 },
+      { id: '2', label: 'Content Library', to: { name: 'library' }, badgeValue: 5 },
     ];
 
-    it('should render navigation tabs when provided', () => {
-      renderComponent({ tabs }, null);
+    it('renders tabs correctly', () => {
+      renderComponent({ tabs }, { first_name: 'User' });
+
 
       expect(screen.getByText('My Channels')).toBeVisible();
       expect(screen.getByText('Content Library')).toBeVisible();
+      expect(screen.getByText('5')).toBeVisible();
     });
   });
 });

contentcuration/contentcuration/frontend/shared/views/__tests__/StudioNavigationOption.spec.js

@@ -1,5 +1,5 @@
 import { render, screen, cleanup } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
+
 import { createLocalVue } from '@vue/test-utils';
 import VueRouter from 'vue-router';
 import StudioNavigationOption from '../StudioNavigationOption.vue';
@@ -41,7 +41,7 @@ const renderComponent = (props = {}, options = {}) => {
 };
 
 describe('StudioNavigationOption', () => {
-  const user = userEvent.setup();
+
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -89,19 +89,4 @@ describe('StudioNavigationOption', () => {
     });
   });
 
-  describe('Click handling', () => {
-    it('should emit select event when clicked without link', async () => {
-      const { emitted } = renderComponent({
-        label: 'Logout',
-        icon: validIcons.logout,
-        link: null,
-      });
-
-      const menuItem = screen.getByRole('menuitem', { name: 'Logout' });
-      await user.click(menuItem);
-
-      expect(emitted().select).toHaveLength(1);
-      expect(emitted().click).toHaveLength(1);
-    });
-  });
 });