feat(testing): enable demo component testing and add preset example test

ngx-formly · Jul 28, 2022 · 9d8c6a7 · 9d8c6a7
1 parent 3d96134
commit 9d8c6a7
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 30 deletions.
diff --git a/demo/src/app/examples/other/presets/app.component.spec.ts b/demo/src/app/examples/other/presets/app.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { FormlyModule } from '@ngx-formly/core';
+import { FormlyPresetModule } from '@ngx-formly/core/preset';
+import { AppComponent } from './app.component';
+import { FormlyInputModule } from '@ngx-formly/core/testing';
+
+describe('Preset AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        ReactiveFormsModule,
+        FormlyInputModule,
+        FormlyModule.forRoot({}),
+        FormlyPresetModule.forRoot([
+          { name: 'salutation', config: { type: 'input' } },
+          { name: 'firstName', config: { type: 'input' } },
+          { name: 'lastName', config: { type: 'input' } },
+        ]),
+      ],
+      declarations: [AppComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should render all fields', () => {
+    fixture.detectChanges();
+    expect(element.querySelectorAll('formly-type-input')).toHaveLength(3);
+  });
+});
diff --git a/demo/src/app/examples/other/presets/app.module.ts b/demo/src/app/examples/other/presets/app.module.ts
@@ -15,31 +15,29 @@ import { registerSalutationPreset, SALUTATION_OPTIONS } from './salutation.prese
     ReactiveFormsModule,
     MatTabsModule,
     FormlyBootstrapModule,
-    FormlyPresetModule,
-    FormlyModule.forRoot({
-      presets: [
-        {
-          name: 'firstName',
-          config: {
-            key: 'firstName',
-            type: 'input',
-            props: {
-              label: 'First Name',
-            },
+    FormlyModule.forRoot({}),
+    FormlyPresetModule.forRoot([
+      {
+        name: 'lastName',
+        config: {
+          key: 'lastName',
+          type: 'input',
+          props: {
+            label: 'Last Name',
           },
         },
-        {
-          name: 'lastName',
-          config: {
-            key: 'lastName',
-            type: 'input',
-            props: {
-              label: 'Last Name',
-            },
+      },
+      {
+        name: 'firstName',
+        config: {
+          key: 'firstName',
+          type: 'input',
+          props: {
+            label: 'First Name',
           },
         },
-      ],
-    }),
+      },
+    ]),
   ],
   declarations: [AppComponent],
   providers: [

diff --git a/jest.config.js b/jest.config.js
@@ -3,21 +3,19 @@ const { pathsToModuleNameMapper } = require('ts-jest');
 /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
 module.exports = {
   preset: 'jest-preset-angular',
-  roots: ['<rootDir>/src/'],
+  roots: ['<rootDir>/'],
   testMatch: ['**/?(*.)+(spec|test).ts'],
   setupFilesAfterEnv: ['jest-extended/all', '<rootDir>/jestSetup.ts'],
   globalSetup: 'jest-preset-angular/global-setup',
   coverageReporters: ['html'],
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    'schematics/.*/files/(.*)$'
-  ],
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  testPathIgnorePatterns: ['/node_modules/', 'schematics/.*/files/(.*)$'],
   moduleNameMapper: pathsToModuleNameMapper(
     {
-      "@ngx-formly/core": ["src/core/src/public_api"],
-      "@ngx-formly/core/testing": ["src/core/testing/src/private_api"],
-      "@ngx-formly/core/*": ["src/core/*/src/public_api"],
-      "@ngx-formly/*": ["src/ui/*/src/public_api"],
+      '@ngx-formly/core': ['src/core/src/public_api'],
+      '@ngx-formly/core/testing': ['src/core/testing/src/private_api'],
+      '@ngx-formly/core/*': ['src/core/*/src/public_api'],
+      '@ngx-formly/*': ['src/ui/*/src/public_api'],
     },
     { prefix: '<rootDir>/' },
   ),