fix: 🐛 service not initialized in testing module (#382)

* fix: 🐛 service not initialized in testing module

Author: shaharkazaz

docs/docs/additional-functionality.mdx

@@ -59,6 +59,12 @@ import { translate } from '@ngneat/transloco';
 translate('hello');
 ```
 
+:::important
+Note that this function is a proxy to the [TranslocoService.translate](./translation-api#translate) method. 
+It will not work if the service didn't initialize.  
+In order to safely use this method, you are responsible for ensuring that the translation files have been successfully loaded by the time it's called.
+:::
+
 ### `getBrowserLang()`
 
 Returns the language code name from the browser, e.g. `"en"`

docs/docs/faq.mdx

@@ -33,3 +33,18 @@ Using a structural directive is the recommended approach. It’s DRY and efficie
 Moreover, the t function is `memoized`, It means that given the same key, it will return the result directly from the cache.
 
 Furthermore, when using on push change detection strategy (which is recommended) the change detection cycles should greatly reduce.
+
+### Why values don't get translated when using the `translate` in unit tests?
+As stated beneath the function, even in tests, it's you responsibility to make sure the translation are loaded
+before calling it.  
+
+You can make sure you translations are loaded before your test executes by simply setting the `preloadLangs` to `true` in the options passed to
+`TranslocoTestingModule.forRoot`.  
+
+### Why does querying an element inside the `*transloco` directive using `@ViewChild()` not working? 
+The transloco structural directive has an async operation in its internals which is fetching the translations.
+
+Because of that, the contents of the directive won't be available until the translations are fetched, so you can't access 
+the element in the `ngOnInit` nor the `ngAfterViewInit`.
+  
+The simplest way you can gain access to the element on render is by making the `ViewChild` a setter.

docs/docs/unit-testing.mdx

@@ -8,19 +8,19 @@ When running specs, we want to have the languages available immediately, in a sy
 We recommend to be DRY and create a module factory function that we can use in each spec, For example:
 ```ts title="transloco-module.spec.ts"
 
-import { TranslocoTestingModule, TranslocoConfig } from '@ngneat/transloco';
+import { TranslocoTestingModule, TranslocoTestingOptions } from '@ngneat/transloco';
 import en from '../assets/i18n/en.json';
 import es from '../assets/i18n/es.json';
 
-export function getTranslocoModule(config: Partial<TranslocoConfig> = {}) {
-  return TranslocoTestingModule.withLangs(
-    { en, es },
-    {
+export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
+  return TranslocoTestingModule.forRoot({
+    langs: { en, es },
+    translocoConfig: {
       availableLangs: ['en', 'es'],
       defaultLang: 'en',
-      ...config
-    }
-  );
+    },
+    ...options
+  });
 }
 ```
 
@@ -49,20 +49,20 @@ You can find an example [here](https://github.com/ngneat/transloco/blob/master/s
 If you need to test `scopes`, you should add them as `languages`, for example:
 
 ```ts {6,7} title="transloco-module.spec.ts"
-export function getTranslocoModule(config: Partial<TranslocoConfig> = {}) {
-  return TranslocoTestingModule.withLangs(
-    {
-      en,
+export function getTranslocoModule(options: TranslocoTestingOptions = {}) {
+  return TranslocoTestingModule.forRoot({
+    langs: { 
+      en, 
       es,
       'admin-page/en': admin,
-      'admin-page/es': adminSpanish
+      'admin-page/es': adminSpanish,  
     },
-    {
+    translocoConfig: {
       availableLangs: ['en', 'es'],
       defaultLang: 'en',
-      ...config
-    }
-  );
+    },
+    ...options
+  });
 }
 ```