diff --git a/ui/src/app/i18n/component/translate.component.spec.ts b/ui/src/app/i18n/component/translate.component.spec.ts
new file mode 100644
index 000000000..703e294ce
--- /dev/null
+++ b/ui/src/app/i18n/component/translate.component.spec.ts
@@ -0,0 +1,72 @@
+import { I18nService } from '../service/i18n.service';
+import { CommonModule } from '@angular/common';
+import { StoreModule, combineReducers, Store } from '@ngrx/store';
+
+import * as fromI18n from '../reducer';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { Component } from '@angular/core';
+import { MessagesLoadSuccessAction } from '../action/message.action';
+import { TranslateComponent } from './translate.component';
+import { MockI18nService, MockI18nModule } from '../../../testing/i18n.stub';
+
+@Component({
+    template: `
+        <translate [key]="foo">Word</translate>
+    `
+})
+class TestHostComponent {
+    private _foo: string;
+
+    public get foo(): string {
+        return this._foo;
+    }
+
+    public set foo(val: string) {
+        this._foo = val;
+    }
+}
+
+describe('Component: I18n translation', () => {
+    let fixture: ComponentFixture<TestHostComponent>;
+    let instance: TestHostComponent;
+    let store: Store<fromI18n.State>;
+
+    const msg = {
+        foo: 'foo',
+        bar: 'bar',
+        baz: 'baz'
+    };
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                { provide: I18nService, useClass: MockI18nService }
+            ],
+            imports: [
+                CommonModule,
+                StoreModule.forRoot({
+                    'message': combineReducers(fromI18n.reducers),
+                })
+            ],
+            declarations: [
+                TranslateComponent,
+                TestHostComponent
+            ],
+        });
+        store = TestBed.get(Store);
+
+        spyOn(store, 'dispatch').and.callThrough();
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+    });
+
+    it('should set the correct text', () => {
+        store.dispatch(new MessagesLoadSuccessAction(msg));
+
+        store.select(fromI18n.getMessages).subscribe(() => {
+            fixture.detectChanges();
+            expect(fixture.nativeElement.textContent).toContain(msg.foo);
+        });
+    });
+});