|
| 1 | +# Unit Test Fixes |
| 2 | + |
| 3 | +## Problem |
| 4 | +The Angular unit tests were failing with errors like: |
| 5 | +- `NG0304: 'mat-tab' is not a known element` |
| 6 | +- `NG0302: The pipe 'translate' could not be found` |
| 7 | +- `NG0304: 'mtx-grid' is not a known element` |
| 8 | +- `NG0304: 'mat-form-field' is not a known element` |
| 9 | + |
| 10 | +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.). |
| 11 | + |
| 12 | +## Solution |
| 13 | +Added `NO_ERRORS_SCHEMA` to all component test specs. This schema tells Angular to ignore unknown elements and attributes during template compilation, which is appropriate for unit tests that focus on component logic rather than template rendering. |
| 14 | + |
| 15 | +`NO_ERRORS_SCHEMA` is a testing best practice for unit tests because: |
| 16 | +1. **Minimal changes** - Only requires adding one line to each test configuration |
| 17 | +2. **Isolation** - Unit tests should focus on component logic, not template rendering |
| 18 | +3. **Simplicity** - Avoids importing dozens of Angular Material and other modules |
| 19 | +4. **Performance** - Tests run faster without compiling full module trees |
| 20 | +5. **Maintenance** - Less brittle when templates change |
| 21 | + |
| 22 | +## Files Modified |
| 23 | + |
| 24 | +1. **time-plannings-table.component.spec.ts** |
| 25 | + - Added `NO_ERRORS_SCHEMA` import |
| 26 | + - Added `schemas: [NO_ERRORS_SCHEMA]` to TestBed configuration |
| 27 | + |
| 28 | +2. **time-plannings-container.component.spec.ts** |
| 29 | + - Added `NO_ERRORS_SCHEMA` import |
| 30 | + - Added `schemas: [NO_ERRORS_SCHEMA]` to TestBed configuration |
| 31 | + |
| 32 | +3. **assigned-site-dialog.component.spec.ts** |
| 33 | + - Added `NO_ERRORS_SCHEMA` import |
| 34 | + - Added `schemas: [NO_ERRORS_SCHEMA]` to TestBed configuration |
| 35 | + |
| 36 | +4. **workday-entity-dialog.component.spec.ts** |
| 37 | + - Added `NO_ERRORS_SCHEMA` import |
| 38 | + - Added `schemas: [NO_ERRORS_SCHEMA]` to TestBed configuration |
| 39 | + |
| 40 | +5. **download-excel-dialog.component.spec.ts** |
| 41 | + - Added `NO_ERRORS_SCHEMA` import |
| 42 | + - Added `schemas: [NO_ERRORS_SCHEMA]` to TestBed configuration |
| 43 | + |
| 44 | +## Change Summary |
| 45 | +- **5 files changed** |
| 46 | +- **10 insertions(+)**, **1 deletion(-)** |
| 47 | +- All changes are additive and minimal |
| 48 | + |
| 49 | +## Testing |
| 50 | +To run the tests, use the command specified in the issue: |
| 51 | +```bash |
| 52 | +npm run test:unit -- --testPathPatterns=time-planning-pn --coverage --collectCoverageFrom='src/app/plugins/modules/time-planning-pn/**/*.ts' --coveragePathIgnorePatterns='\.spec\.ts' |
| 53 | +``` |
| 54 | + |
| 55 | +## Alternative Approach (Not Used) |
| 56 | +The alternative would have been to import all the required modules in each test: |
| 57 | +- `TranslateModule.forRoot()` |
| 58 | +- All Material modules (MatTabModule, MatFormFieldModule, MatInputModule, etc.) |
| 59 | +- MtxGridModule |
| 60 | +- Other dependencies |
| 61 | + |
| 62 | +This approach was rejected because: |
| 63 | +- Much more invasive changes |
| 64 | +- Harder to maintain |
| 65 | +- Slower test execution |
| 66 | +- Not appropriate for unit tests (better suited for integration tests) |
| 67 | +- Would require adding many more imports and potentially mocking more services |
| 68 | + |
| 69 | +## Verification |
| 70 | +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. |
0 commit comments