diff --git a/apps/transloco-playground/src/app/lazy/lazy.component.spec.ts b/apps/transloco-playground/src/app/lazy/lazy.component.spec.ts new file mode 100644 index 000000000..c4e3dcde6 --- /dev/null +++ b/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'); + }); +}); diff --git a/apps/transloco-playground/src/app/on-push/on-push.component.spec.ts b/apps/transloco-playground/src/app/on-push/on-push.component.spec.ts new file mode 100644 index 000000000..b0d2cb11c --- /dev/null +++ b/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; + 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' + ); + }); +}); diff --git a/apps/transloco-playground/src/app/transloco-testing.module.ts b/apps/transloco-playground/src/app/transloco-testing.module.ts new file mode 100644 index 000000000..6b316459e --- /dev/null +++ b/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, + }); +} diff --git a/docs/docs/unit-testing.mdx b/docs/docs/unit-testing.mdx index 25f2fc3f0..21a77788f 100644 --- a/docs/docs/unit-testing.mdx +++ b/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