docs: ✏️ bring back unit test examples

Author: shaharkazaz

apps/transloco-playground/src/app/lazy/lazy.component.spec.ts

@@ -0,0 +1,34 @@
+import { waitForAsync, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+
+import { getTranslocoModule } from '../transloco-testing.module';
+
+import { LazyComponent } from './lazy.component';
+
+describe('LazyComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'admin-page' }],
+      imports: [getTranslocoModule()],
+      declarations: [LazyComponent],
+    }).compileComponents();
+  }));
+
+  it('should get scoped title translation', function () {
+    const fixture = TestBed.createComponent(LazyComponent);
+    fixture.detectChanges();
+    expect(
+      fixture.debugElement.query(By.css('.admin-title')).nativeElement.innerText
+    ).toBe('Admin spanish');
+  });
+
+  it('should get scoped translation with read', function () {
+    const fixture = TestBed.createComponent(LazyComponent);
+    fixture.detectChanges();
+    expect(
+      fixture.debugElement.query(By.css('.admin-read')).nativeElement.innerText
+    ).toBe('Admin read spanish');
+  });
+});

apps/transloco-playground/src/app/on-push/on-push.component.spec.ts

@@ -0,0 +1,48 @@
+import { createComponentFactory, Spectator } from '@ngneat/spectator';
+
+import { TranslocoService } from '@ngneat/transloco';
+
+import { getTranslocoModule } from '../transloco-testing.module';
+
+import { OnPushComponent } from './on-push.component';
+
+describe('OnPushComponent', () => {
+  let spectator: Spectator<OnPushComponent>;
+  const createComponent = createComponentFactory({
+    component: OnPushComponent,
+    imports: [
+      getTranslocoModule({
+        translocoConfig: { reRenderOnLangChange: true },
+      }),
+    ],
+  });
+
+  beforeEach(() => (spectator = createComponent()));
+
+  it('should translate', () => {
+    expect(spectator.query('.structural [data-cy=regular]')).toHaveText(
+      'Regular: home spanish'
+    );
+    expect(spectator.query('.structural [data-cy=current-lang]')).toHaveText(
+      'Current Lang: es'
+    );
+    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
+      'Regular: home spanish'
+    );
+    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
+      'Regular: home spanish'
+    );
+    const service = spectator.inject(TranslocoService);
+    service.setActiveLang('en');
+    spectator.detectChanges();
+    expect(spectator.query('.structural [data-cy=regular]')).toHaveText(
+      'Regular: home english'
+    );
+    expect(spectator.query('.structural [data-cy=current-lang]')).toHaveText(
+      'Current Lang: en'
+    );
+    expect(spectator.query('.pipe [data-cy=p-regular]')).toHaveText(
+      'Regular: home english'
+    );
+  });
+});

apps/transloco-playground/src/app/transloco-testing.module.ts

@@ -0,0 +1,32 @@
+import {
+  TranslocoTestingModule,
+  TranslocoTestingOptions,
+} from '@ngneat/transloco';
+
+import en from '../assets/i18n/en.json';
+import es from '../assets/i18n/es.json';
+import admin from '../assets/i18n/admin-page/en.json';
+import adminSpanish from '../assets/i18n/admin-page/es.json';
+import lazy from '../assets/i18n/lazy-page/en.json';
+import lazySpanish from '../assets/i18n/lazy-page/es.json';
+
+export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
+  const { langs, translocoConfig, ...rest } = options;
+  return TranslocoTestingModule.forRoot({
+    langs: {
+      en,
+      es,
+      'admin-page/en': admin,
+      'admin-page/es': adminSpanish,
+      'lazy-page/en': lazy,
+      'lazy-page/es': lazySpanish,
+      ...langs,
+    },
+    translocoConfig: {
+      availableLangs: ['es', 'en'],
+      defaultLang: 'es',
+      ...translocoConfig,
+    },
+    ...rest,
+  });
+}

docs/docs/unit-testing.mdx

@@ -45,6 +45,8 @@ describe('AppComponent', () => {
 });
 ```
 
+You can find an example [here](https://github.com/ngneat/transloco/blob/master/apps/transloco-playground/src/app/on-push/on-push.component.spec.ts).
+
 If you need to test `scopes`, you should add them as `languages`, for example:
 
 ```ts {6,7} title="transloco-testing.module.ts"
@@ -66,6 +68,8 @@ export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
 }
 ```
 
+You can find an example [here](https://github.com/ngneat/transloco/blob/master/apps/transloco-playground/src/app/lazy/lazy.component.spec.ts).
+
 Note that in order to import JSON files, you need to configure the TypeScript compiler by adding the following properties in `tsconfig.json`:
 
 ```json