diff --git a/src/app/modules/data/detail/data-detail.component.spec.ts b/src/app/modules/data/detail/data-detail.component.spec.ts
index e33024a5..f0688501 100644
--- a/src/app/modules/data/detail/data-detail.component.spec.ts
+++ b/src/app/modules/data/detail/data-detail.component.spec.ts
@@ -12,29 +12,40 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA, DebugElement} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute, RouterModule} from '@angular/router';
-import {IonRefresher} from '@ionic/angular';
-import {TranslateFakeLoader, TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {IonRefresher, IonTitle} from '@ionic/angular';
+import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
 import {sampleThingsMap} from '../../../_helpers/data/sample-things';
 import {DataRoutingModule} from '../data-routing.module';
 import {DataModule} from '../data.module';
 import {DataProvider} from '../data.provider';
 import {DataDetailComponent} from './data-detail.component';
+import {By} from '@angular/platform-browser';
+import {Observable, of} from 'rxjs';
+
+const translations: any = {data: {detail: {TITLE: 'Foo'}}};
+
+class TranslateFakeLoader implements TranslateLoader {
+  getTranslation(_lang: string): Observable<any> {
+    return of(translations);
+  }
+}
 
 describe('DataDetailComponent', () => {
   let comp: DataDetailComponent;
   let fixture: ComponentFixture<DataDetailComponent>;
-  let detailPage: HTMLElement;
+  let detailPage: DebugElement;
   let dataProvider: DataProvider;
   let refresher: IonRefresher;
   const sampleThing = sampleThingsMap.message[0];
+  let translateService: TranslateService;
 
   // @Component({ selector: 'stapps-data-list-item', template: '' })
   // class DataListItemComponent {
-    //   @Input() item;
-    // }
+  //   @Input() item;
+  // }
 
   const fakeActivatedRoute = {
     snapshot: {
@@ -60,13 +71,15 @@ describe('DataDetailComponent', () => {
 
   beforeEach(async () => {
     dataProvider = TestBed.get(DataProvider);
+    translateService = TestBed.get(TranslateService);
     refresher = jasmine.createSpyObj('refresher', ['complete']);
     spyOn(dataProvider, 'get' as any).and.returnValue(Promise.resolve(sampleThing));
     spyOn(DataDetailComponent.prototype, 'getItem').and.callThrough();
     fixture = await TestBed.createComponent(DataDetailComponent);
     comp = fixture.componentInstance;
+    detailPage = fixture.debugElement;
+    translateService.use('foo');
     fixture.detectChanges();
-    detailPage = fixture.nativeElement;
     await dataProvider.deleteAll();
   });
 
@@ -75,10 +88,9 @@ describe('DataDetailComponent', () => {
   );
 
   it('should have apropriate title', async () => {
-    await fixture.whenStable();
-    const title: HTMLIonTitleElement | null = detailPage.querySelector('ion-title');
+    const title: DebugElement | null = detailPage.query(By.directive(IonTitle));
     expect(title).not.toBe(null);
-    expect(title!.innerText).toContain('data.detail.TITLE');
+    expect(title!.nativeElement.textContent).toBe('Foo');
   });
 
   it('should get a data item', () => {
@@ -87,12 +99,10 @@ describe('DataDetailComponent', () => {
   });
 
   it('should get a data item when component is accessed', async () => {
-    await fixture.whenStable();
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid);
   });
 
   it('should update the data item when refresh is called', async () => {
-    await fixture.whenStable();
     await comp.refresh(refresher);
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid);
     expect(refresher.complete).toHaveBeenCalled();