diff --git a/public/images/sp_flag.png b/public/images/sp_flag.png new file mode 100644 index 0000000..1ed07ee Binary files /dev/null and b/public/images/sp_flag.png differ diff --git a/public/images/uk_flag.png b/public/images/uk_flag.png new file mode 100644 index 0000000..3f8ad70 Binary files /dev/null and b/public/images/uk_flag.png differ diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.html b/src/app/components/lang-switch-btn/lang-switch-btn.html new file mode 100644 index 0000000..b6a556f --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.html @@ -0,0 +1,5 @@ + diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.scss b/src/app/components/lang-switch-btn/lang-switch-btn.scss new file mode 100644 index 0000000..e59a43a --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.scss @@ -0,0 +1,19 @@ +.container { + background-color: transparent; + border: none; + + align-items: center; + display: flex; + min-height: 65px; + + cursor: pointer; + img { + width: 50px; + } + @media screen and (min-width: 480px) { + min-height: 76.8px; + img { + width: unset; + } + } +} diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts new file mode 100644 index 0000000..cb2a3b3 --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts @@ -0,0 +1,43 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LangSwitchBtn } from './lang-switch-btn'; +import { LanguageManager } from '../../services/language-manager'; +import { By } from '@angular/platform-browser'; + +describe('LangSwitchBtn', () => { + let component: LangSwitchBtn; + let fixture: ComponentFixture; + let languageManager: jasmine.SpyObj; + + beforeEach(async () => { + languageManager = jasmine.createSpyObj(LanguageManager, ['selectedLanguage$', 'setLanguage']); + await TestBed.configureTestingModule({ + imports: [LangSwitchBtn], + providers: [{ provide: LanguageManager, useValue: languageManager }], + }).compileComponents(); + + fixture = TestBed.createComponent(LangSwitchBtn); + component = fixture.componentInstance; + }); + + it('should create', () => { + fixture.detectChanges(); + expect(component).toBeTruthy(); + }); + + it('should show spanish flag', () => { + languageManager.selectedLanguage$.and.returnValue('en'); + fixture.detectChanges(); + const img = fixture.debugElement.query(By.css('img')).attributes; + expect(img['src']).toEqual('images/sp_flag.png'); + }); + + it('should updateLanguage on click', () => { + const updateLanguageSpy = spyOn(component, 'updateLanguage').and.callThrough(); + languageManager.selectedLanguage$.and.returnValue('en'); + fixture.detectChanges(); + const container = fixture.debugElement.query(By.css('.container')); + container.triggerEventHandler('click'); + expect(updateLanguageSpy).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.ts b/src/app/components/lang-switch-btn/lang-switch-btn.ts new file mode 100644 index 0000000..065fc31 --- /dev/null +++ b/src/app/components/lang-switch-btn/lang-switch-btn.ts @@ -0,0 +1,25 @@ +import { Component, computed, inject } from '@angular/core'; +import { LanguageManager } from '../../services/language-manager'; + +@Component({ + selector: 'app-lang-switch-btn', + templateUrl: './lang-switch-btn.html', + styleUrl: './lang-switch-btn.scss', +}) +export class LangSwitchBtn { + protected readonly languageManager = inject(LanguageManager); + + flagSrc = computed(() => { + if (this.languageManager.selectedLanguage$() === 'en') { + return 'images/sp_flag.png'; + } else { + return 'images/uk_flag.png'; + } + }); + + updateLanguage() { + this.languageManager.setLanguage( + this.languageManager.selectedLanguage$() === 'en' ? 'es' : 'en' + ); + } +}