-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature #438: Creation of Mobile Navigation Menu
- Nav Menu: Create Navigation Service shared for Desktop & Mobile Components. - Navigation Service: Add initial Test. - Navigation components: Update Tests. - Refactor code. - Update deprecated RouterTestingModule
- Loading branch information
Showing
18 changed files
with
389 additions
and
144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 58 additions & 36 deletions
94
src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,53 +1,75 @@ | ||
| import { type ComponentFixture, TestBed } from '@angular/core/testing' | ||
| import { DesktopNavComponent } from './desktop-nav.component' | ||
| import { TranslateService } from '@ngx-translate/core' | ||
| import { of } from 'rxjs' | ||
| import { RouterModule } from '@angular/router' | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
| import { DesktopNavComponent } from './desktop-nav.component'; | ||
| import { NavService } from 'src/app/services/nav.service'; | ||
| import { TranslateModule } from '@ngx-translate/core'; | ||
| import { ActivatedRoute, RouterModule } from '@angular/router'; | ||
|
|
||
| describe('DesktopNavComponent', () => { | ||
| let component: DesktopNavComponent | ||
| let fixture: ComponentFixture<DesktopNavComponent> | ||
| let translateService: TranslateService | ||
| let translateServiceUseMock: jest.Mock | ||
| // Mock de NavService | ||
| class MockNavService { | ||
| public selectWidth = '69px'; | ||
|
|
||
| beforeEach(() => { | ||
| translateServiceUseMock = jest.fn() | ||
| openLoginModal = jest.fn(); // Simula la función openLoginModal | ||
| changeLanguage = jest.fn((language: string) => { | ||
| this.selectWidth = language === 'ca' ? '69px' : '57px'; | ||
| }); | ||
| } | ||
|
|
||
| const translateServiceStub = { | ||
| use: translateServiceUseMock, | ||
| addLangs: jest.fn(), | ||
| setDefaultLang: jest.fn(), | ||
| get: jest.fn().mockImplementation((key) => of(key)) | ||
| // Mock de ActivatedRoute para pruebas | ||
| const mockActivatedRoute = { | ||
| snapshot: { | ||
| paramMap: { | ||
| get: jest.fn().mockReturnValue(null) | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| describe('DesktopNavComponent', () => { | ||
| let component: DesktopNavComponent; | ||
| let fixture: ComponentFixture<DesktopNavComponent>; | ||
| let navService: MockNavService; | ||
|
|
||
| beforeEach(() => { | ||
| TestBed.configureTestingModule({ | ||
| declarations: [DesktopNavComponent], | ||
| imports: [RouterModule.forRoot([])], // Añade esta línea | ||
| imports: [TranslateModule.forRoot(), RouterModule.forRoot([])], | ||
| providers: [ | ||
| { provide: TranslateService, useValue: translateServiceStub } | ||
| { provide: NavService, useClass: MockNavService }, | ||
| { provide: ActivatedRoute, useValue: mockActivatedRoute } | ||
| ] | ||
| }) | ||
| }); | ||
|
|
||
| fixture = TestBed.createComponent(DesktopNavComponent) | ||
| component = fixture.componentInstance | ||
| translateService = TestBed.inject(TranslateService) | ||
| fixture.detectChanges() | ||
| }) | ||
| fixture = TestBed.createComponent(DesktopNavComponent); | ||
| component = fixture.componentInstance; | ||
| navService = TestBed.inject(NavService) as unknown as MockNavService; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy() | ||
| }) | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
|
|
||
| it('should call openLoginModal when openLoginModal is invoked', () => { | ||
| component.openLoginModal(); | ||
| expect(navService.openLoginModal).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it('should change language and update selectWidth', () => { | ||
| // Limpiar todas las llamadas a la función simulada | ||
| translateServiceUseMock.mockClear() | ||
| const event = new Event('change'); | ||
| Object.defineProperty(event, 'target', { value: { value: 'es' }, enumerable: true }); | ||
|
|
||
| component.changeLanguage(event); | ||
|
|
||
| expect(navService.changeLanguage).toHaveBeenCalledWith('es'); | ||
| expect(navService.selectWidth).toBe('57px'); // Verifica que el selectWidth se actualiza correctamente | ||
| }); | ||
|
|
||
| const event = new Event('change') | ||
| Object.defineProperty(event, 'target', { value: { value: 'es' }, enumerable: true }) | ||
| it('should change language to "ca" and update selectWidth accordingly', () => { | ||
| const event = new Event('change'); | ||
| Object.defineProperty(event, 'target', { value: { value: 'ca' }, enumerable: true }); | ||
|
|
||
| component.changeLanguage(event) | ||
| component.changeLanguage(event); | ||
|
|
||
| expect(translateService.use).toHaveBeenCalledWith('es') | ||
| expect(component.selectWidth).toBe('57px') | ||
| }) | ||
| }) | ||
| expect(navService.changeLanguage).toHaveBeenCalledWith('ca'); | ||
| expect(navService.selectWidth).toBe('69px'); // Verifica que el selectWidth se actualiza correctamente | ||
| }); | ||
| }); |
30 changes: 10 additions & 20 deletions
30
src/app/core/layout/header/desktop-nav/desktop-nav.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,21 @@ | ||
| import { Component, inject } from '@angular/core' | ||
| import { NgbModal } from '@ng-bootstrap/ng-bootstrap' | ||
| import { LoginModalComponent } from './../../../../modules/modals/login-modal/login-modal.component' | ||
| import { TranslateService } from '@ngx-translate/core' | ||
| import { Component } from '@angular/core'; | ||
| import { NavService } from 'src/app/services/nav.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-desktop-nav', | ||
| templateUrl: './desktop-nav.component.html', | ||
| styleUrl: './desktop-nav.component.scss' | ||
| }) | ||
| export class DesktopNavComponent { | ||
| selectWidth = '69px' | ||
| private readonly modalService = inject(NgbModal) | ||
| private readonly translate = inject(TranslateService) | ||
| constructor () { | ||
| this.translate.addLangs(['en', 'es', 'ca']) | ||
| this.translate.setDefaultLang('ca') | ||
| this.translate.use('ca') | ||
| } | ||
| constructor(public navService: NavService) {} | ||
|
|
||
| openLoginModal (): void { | ||
| this.modalService.open(LoginModalComponent, { centered: true, size: 'lg' }) | ||
| openLoginModal(): void { | ||
| this.navService.openLoginModal(); | ||
| } | ||
|
|
||
| changeLanguage (event: Event): void { | ||
| const selectElement = event.target as HTMLSelectElement | ||
| const language = selectElement.value | ||
| this.translate.use(language) | ||
| this.selectWidth = language === 'ca' ? '69px' : '57px' | ||
| changeLanguage(event: Event): void { | ||
| const selectElement = event.target as HTMLSelectElement; | ||
| const language = selectElement.value; | ||
| this.navService.changeLanguage(language); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
64 changes: 55 additions & 9 deletions
64
src/app/core/layout/header/mobile-nav/mobile-nav.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,61 @@ | ||
| <nav class="navbar navbar-expand-lg align-items-center"> | ||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" | ||
| aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
| <div class="collapse" id="navbarToggle" data-bs-theme="dark"> | ||
| <!-- Main menu --> | ||
| <div class="navbarToggle bg-black p-4"> | ||
| <ul class="nav-ul"> | ||
| <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{ | ||
| "components.mainMenu.section0.title" | translate }}</a> | ||
|
|
||
| <a class="nav-link" [routerLink]="['challenges']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{ | ||
| "components.mainMenu.section1.title" | translate }}</a> | ||
|
|
||
| <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{ | ||
| "components.mainMenu.section2.title" | translate }}</a> | ||
|
|
||
| <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">Hackathons</a> | ||
|
|
||
| <a class="nav-link" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']" data-bs-toggle="collapse" data-bs-target="#navbarToggle">{{ | ||
| "components.mainMenu.section4.title" | translate }}</a> | ||
|
|
||
| <!--No desenvolupo perquè a Figma encara no hi ha disseny d'aquesta part--> | ||
| <div class="collapse navbar-collapse" id="navbarNavDropdown"> | ||
| <ul class="navbar-nav"> | ||
| <li class="nav-link">item menu</li> | ||
| <a class="nav-link" href="https://dev.itawiki.eurecatacademy.org/" target="_blank" rel="noopener">{{ | ||
| "components.mainMenu.section5.title" | translate }}</a> | ||
| </ul> | ||
|
|
||
| <div class="d-flex justify-content-end"> | ||
| <!-- languageSelect --> | ||
| <div class="ms-2 pe-3"> | ||
| <label for="languageSelect"> | ||
| <select class="languageSelect" (change)="changeLanguage($event)" [style.width]="navService.selectWidth"> | ||
| <option value="ca">CAT</option> | ||
| <option value="es">ES</option> | ||
| <option value="en">EN</option> | ||
| </select> | ||
| </label> | ||
| </div> | ||
|
|
||
| <!-- Settings --> | ||
| <div class="pe-3"> | ||
| <a class="setting" [routerLink]="['componentToBuild']" [routerLinkActive]="['active']"> | ||
| <img src="assets/img/icon/setting.svg" alt="Settings" /> | ||
| </a> | ||
| </div> | ||
|
|
||
| <!-- User --> | ||
| <div> | ||
| <button class="user" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }" | ||
| (click)="openLoginModal()"> | ||
| <img src="assets/img/icon/user.svg" alt="User" /> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <nav class="navbar navbar-expand-md align-items-center"> | ||
|
|
||
| <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" | ||
| aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> | ||
| <span class="navbar-toggler-icon"></span> | ||
| </button> | ||
|
|
||
| <span class="breadcrumb">{{ "modules.starter.main.section2.title" | translate }}</span> | ||
| </nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.