Skip to content

TEST_FIXES.md

Latest commit

 

History

History
92 lines (73 loc) · 4.04 KB

TEST_FIXES.md

File metadata and controls

92 lines (73 loc) · 4.04 KB

Unit Test Fixes

Problem

The Angular unit tests were failing with errors like:

  • NG0304: 'mat-tab' is not a known element
  • NG0302: The pipe 'translate' could not be found
  • NG0304: 'mtx-grid' is not a known element
  • NG0304: 'mat-form-field' is not a known element

These errors occurred because Angular's test compiler was trying to compile the component templates and couldn't find the declarations for various directives and pipes used in the templates (like Material components, translate pipe, mtx-grid, etc.).

Solution

Added NO_ERRORS_SCHEMA to all component test specs to ignore unknown elements and attributes, AND imported TranslateModule to provide the translate pipe.

Important Note: NO_ERRORS_SCHEMA only ignores unknown elements and attributes - it does NOT ignore missing pipes. Since all component templates use the translate pipe, we must import TranslateModule.forRoot() in the test configuration.

This combined approach is appropriate for unit tests because:

  1. Focus on Logic - Unit tests should test component logic, not template rendering
  2. Minimal Changes - Only requires adding imports and one line to config
  3. Performance - Tests run faster without compiling full module trees for Material components
  4. Handles Pipes - TranslateModule provides the translate pipe that NO_ERRORS_SCHEMA cannot ignore
  5. Maintenance - Less brittle when templates change

Files Modified

  1. time-plannings-table.component.spec.ts

    • Added NO_ERRORS_SCHEMA import
    • Added TranslateModule import
    • Added schemas: [NO_ERRORS_SCHEMA] to TestBed configuration
    • Added TranslateModule.forRoot() to imports array

  2. time-plannings-container.component.spec.ts

    • Added NO_ERRORS_SCHEMA import
    • Added TranslateModule import
    • Added schemas: [NO_ERRORS_SCHEMA] to TestBed configuration
    • Added TranslateModule.forRoot() to imports array

  3. assigned-site-dialog.component.spec.ts

    • Added NO_ERRORS_SCHEMA import
    • Added TranslateModule import
    • Added schemas: [NO_ERRORS_SCHEMA] to TestBed configuration
    • Added TranslateModule.forRoot() to imports array

  4. workday-entity-dialog.component.spec.ts

    • Added NO_ERRORS_SCHEMA import
    • Added TranslateModule import
    • Added schemas: [NO_ERRORS_SCHEMA] to TestBed configuration
    • Added TranslateModule.forRoot() to imports array

  5. download-excel-dialog.component.spec.ts

    • Added NO_ERRORS_SCHEMA import
    • Added TranslateModule import
    • Added schemas: [NO_ERRORS_SCHEMA] to TestBed configuration
    • Added TranslateModule.forRoot() to imports array

Change Summary

  • 5 files changed
  • 15 insertions(+), 5 deletions(-)
  • All changes are minimal and focused

Testing

To run the tests, use the command specified in the issue:

npm run test:unit -- --testPathPatterns=time-planning-pn --coverage --collectCoverageFrom='src/app/plugins/modules/time-planning-pn/**/*.ts' --coveragePathIgnorePatterns='\.spec\.ts'

Why This Approach Works

NO_ERRORS_SCHEMA handles:

  • Unknown elements (mat-tab, mat-form-field, mat-button, etc.)
  • Unknown attributes (matTooltip, matStartDate, etc.)
  • Unknown components (mtx-grid, mtx-select, etc.)

TranslateModule handles:

  • The translate pipe used throughout templates
  • Provides actual pipe implementation for template compilation

Alternative Approach (Not Used)

The alternative would have been to import all the required modules:

  • All Material modules (MatTabModule, MatFormFieldModule, MatInputModule, etc.)
  • MtxGridModule
  • Other dependencies

This approach was rejected because:

  • Much more invasive changes (20+ module imports per test)
  • Harder to maintain
  • Slower test execution
  • Not appropriate for unit tests (better suited for integration tests)
  • Would require adding many more imports and potentially mocking more services

Verification

All tests should now compile and run successfully without template-related errors. The component logic tests remain unchanged and will verify the business logic of each component.