diff --git a/src/app/components/language-selector/language-selector.component.spec.ts b/src/app/components/language-selector/language-selector.component.spec.ts new file mode 100644 index 0000000..7ee7a0e --- /dev/null +++ b/src/app/components/language-selector/language-selector.component.spec.ts @@ -0,0 +1,45 @@ +import {TestComponentBuilder, ComponentFixture} from 'ng-forward/cjs/testing/test-component-builder'; +import {Pipe, Input, provide, Component} from 'ng-forward'; + +import {LanguageSelector} from './language-selector.component'; + +import * as helpers from "../../../spec/helpers"; + +const tcb = new TestComponentBuilder(); + +const htmlTemplate: string = ''; + +describe("Components", () => { + + describe("Language Selector Component", () => { + + beforeEach(angular.mock.module("templates")); + + @Component({ + selector: 'test-container-component', + template: htmlTemplate, + directives: [LanguageSelector], + providers: [ + provide('$translate', { + useValue: helpers.mocks.$translate + }) + ].concat(helpers.provideFilters("translateFilter")) + }) + class BlockContainerComponent { } + + it("set available languages when change language", () => { + let component: LanguageSelector = new LanguageSelector(helpers.mocks.$translate); + component.availableLanguages = null; + expect(component.availableLanguages).toBeNull(); + component.changeLanguage('en'); + expect(component.availableLanguages).toBeDefined(); + }); + + it("display language options", () => { + helpers.createComponentFromClass(BlockContainerComponent).then(fixture => { + expect(fixture.debugElement.queryAll('li.language').length).toEqual(2); + }); + }); + + }); +}); diff --git a/src/app/components/language-selector/language-selector.component.ts b/src/app/components/language-selector/language-selector.component.ts new file mode 100644 index 0000000..e0ed2fa --- /dev/null +++ b/src/app/components/language-selector/language-selector.component.ts @@ -0,0 +1,29 @@ +import {Component, Inject} from "ng-forward"; + +@Component({ + selector: "language-selector", + templateUrl: "app/components/language-selector/language-selector.html" +}) +@Inject("$translate") +export class LanguageSelector { + + availableLanguages: any; + + constructor(private $translate: angular.translate.ITranslateService) { + this.changeLanguage($translate.use()); + } + + currentLanguage() { + return this.$translate.use(); + } + + changeLanguage(language: string) { + this.$translate.use(language).then((lang) => { + this.availableLanguages = { + "en": this.$translate.instant("language.en"), + "pt": this.$translate.instant("language.pt") + }; + }); + } + +} diff --git a/src/app/components/language-selector/language-selector.html b/src/app/components/language-selector/language-selector.html new file mode 100644 index 0000000..4f7b6f6 --- /dev/null +++ b/src/app/components/language-selector/language-selector.html @@ -0,0 +1,13 @@ + diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html index 870cd2c..7a53cbb 100644 --- a/src/app/components/navbar/navbar.html +++ b/src/app/components/navbar/navbar.html @@ -40,6 +40,9 @@ +
diff --git a/src/app/components/navbar/navbar.spec.ts b/src/app/components/navbar/navbar.spec.ts index a17b684..87cf94e 100644 --- a/src/app/components/navbar/navbar.spec.ts +++ b/src/app/components/navbar/navbar.spec.ts @@ -71,6 +71,9 @@ describe("Components", () => { useValue: { AUTH_EVENTS } + }), + provide('$translate', { + useValue: helpers.mocks.$translate }) ].concat(helpers.provideFilters("translateFilter")), directives: [Navbar], diff --git a/src/app/components/navbar/navbar.ts b/src/app/components/navbar/navbar.ts index f6cac6d..94ae1ee 100644 --- a/src/app/components/navbar/navbar.ts +++ b/src/app/components/navbar/navbar.ts @@ -1,4 +1,5 @@ import {Component, Inject} from "ng-forward"; +import {LanguageSelector} from "../language-selector/language-selector.component"; import {Session, AuthService, AuthController, IAuthEvents, AUTH_EVENTS} from "./../auth"; @@ -7,6 +8,7 @@ import {User} from "./../../models/interfaces"; @Component({ selector: "acme-navbar", templateUrl: "app/components/navbar/navbar.html", + directives: [LanguageSelector], providers: [AuthService, Session] }) @Inject("$modal", AuthService, "Session", "$scope", "$state") diff --git a/src/languages/en.json b/src/languages/en.json index 65a8dc0..7f5beb2 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -4,5 +4,8 @@ "navbar.profile": "Profile", "navbar.settings": "Settings", "navbar.logout": "Log Out", - "navbar.login": "Login" + "navbar.login": "Login", + "language.en": "English", + "language.pt": "Portuguese", + "language.selector": "Language" } diff --git a/src/languages/pt.json b/src/languages/pt.json index 3feb8cc..92939a6 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -4,5 +4,8 @@ "navbar.profile": "Perfil", "navbar.settings": "Configurações", "navbar.logout": "Sair", - "navbar.login": "Login" + "navbar.login": "Login", + "language.en": "Inglês", + "language.pt": "Português", + "language.selector": "Idioma" } diff --git a/src/spec/mocks.ts b/src/spec/mocks.ts index 59beda3..bf50a71 100644 --- a/src/spec/mocks.ts +++ b/src/spec/mocks.ts @@ -1,6 +1,6 @@ class ScopeWithEvents { - listeners = {}; + listeners = {}; constructor() { } @@ -17,9 +17,9 @@ class ScopeWithEvents { public $emit(message: string, arg?: any) { console.log("Emitted " + message); - if ( (this.listeners)[message]) { + if ((this.listeners)[message]) { console.log("LISTENERS:", (this.listeners)[message]); - (this.listeners)[message].forEach((f: Function) => { + (this.listeners)[message].forEach((f: Function) => { f(arg); }); } @@ -42,6 +42,13 @@ export var mocks = { return { currentUser: () => { return user; } }; + }, + $translate: { + use: (lang?: string) => { + return { + then: (func?: any) => { if (func) func() } + } + }, + instant: () => { } } - -}; \ No newline at end of file +}; -- libgit2 0.21.2