Having trouble with this error. There seems to be something missing but can't pinpoint what it is. The task at hand is simple: just test this basic component. Let's take a look:
import { Component, OnInit, Input } from '@angular/core';
import { ButtonModel } from './model/button.model';
@Component({
selector: 'app-button',
templateUrl: './button.component.html',
styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
@Input() public button: ButtonModel;
constructor() { }
public ngOnInit(): void {
}
public getClasses(): [string, string] {
return [
this.button.Size,
this.button.Color
];
}
}
And the tests:
import { Spectator, createHostFactory } from '@ngneat/spectator';
import { RouterTestingModule } from '@angular/router/testing';
import { ButtonComponent } from './button.component';
import { MockComponent } from 'ng-mocks';
describe('[ButtonComponent]', () => {
let spectator: Spectator<ButtonComponent>;
const createHost = createHostFactory({
component: MockComponent(ButtonComponent),
imports: [RouterTestingModule]
});
beforeEach(() => {
spectator = createHost('<app-button></app-button>');
});
it('should create', () => {
expect(spectator.component).toBeTruthy();
});
it('should get default classes', () => {
expect(spectator.component.getClasses()).toEqual(['big', 'primary-theme-color']);
});
});
And the HTML:
<button [ngClass]="getClasses()">
{{button.Text}}
</button>
Now, let's address that error:
Encountered a mismatch between expected and actual values. Error: Expected undefined to equal [ 'big', 'primary-theme-color' ]. at at UserContext. (http://localhost:9876/_karma_webpack_/src/app/shared/components/button/button.component.spec.ts:24:46) at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1) at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)