I am currently working on writing a Jest test to verify the creation of a component in Angular. However, when I execute the test, it returns undefined with the following message:
OrderDetailsDeliveryTabComponent › should create
expect(received).toBeTruthy()
Received: undefined
I have made sure to import all the necessary modules into the test and believe that I am correctly calling the component in the test.
This error is something new to me, as I haven't encountered it before.
import { ComponentFixture } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { OrderDetailsDeliveryTableComponent } from './order-details-delivery-table.component';
import { ConfigureFn, configureTests, MockOrderDetailsService} from '@lib/testing';
import { OrderDetailsService } from '@c3services/order-editing/order-details.service';
describe('OrderDetailsDeliveryTabComponent', () => {
let component: OrderDetailsDeliveryTableComponent;
let fixture: ComponentFixture<OrderDetailsDeliveryTableComponent>;
beforeEach(async () => {
const configure: ConfigureFn = testBed => {
testBed.configureTestingModule({
declarations: [OrderDetailsDeliveryTableComponent],
providers: [{ provide: OrderDetailsService, useValue: MockOrderDetailsService }],
schemas: [NO_ERRORS_SCHEMA]
});
};
const testBed = await configureTests(configure);
fixture = testBed.createComponent(OrderDetailsDeliveryTableComponent);
component = fixture.componentInstance;
component.associatedExistingDespatchData = [
{
item: 'CS119NVP30F',
quantity: 1,
despatched: '04-08-2017 05:57',
method: 'Standard',
trackingNumber: '',
deliveryAddress: '14 Beetham Court',
returnsTrackingNumber: '',
fromLocation: 'Tackbrook Wahrehouse',
service: 'UK',
type: 'D',
reference: '160501255D0001'
}
];
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
I am expecting the 'it' statement to evaluate as true.
The component in question looks like this:
import { AssociatedExistingDespatch } from './../../../models/OrderDetails.model';
import { Component, OnInit } from '@angular/core';
import { TableColumn, TextAlignment, DataType } from '@sharedModels/TableData.interface';
import { Subscription } from 'rxjs';
import { OrderDetailsService } from '@c3services/order-editing/order-details.service';
type AssociatedExistingDespatchData = {
deliveryAddress: string;
despatched: string;
fromLocation: string;
item: string;
quantity: number;
method: string;
reference: string;
returnsTrackingNumber: string;
service: string;
trackingNumber: string;
type: string;
};
const emptyDespatchNote = [
{
deliveryAddress: '',
despatched: '',
fromLocation: '',
item: '',
quantity: null,
method: '',
reference: '',
returnsTrackingNumber: '',
service: '',
trackingNumber: '',
type: ''
}
];
@Component({
selector: 'order-details-delivery-table',
templateUrl: './order-details-delivery-table.component.html',
styleUrls: ['./order-details-delivery-table.component.css']
})
export class OrderDetailsDeliveryTableComponent implements OnInit {
associatatedExistingDespatchesSubscription: Subscription[] = [];
loadingDetails: boolean;
orderDetailsDeliveryData: AssociatedExistingDespatch[];
associatedExistingDespatchData: AssociatedExistingDespatchData[] = emptyDespatchNote;
constructor(public orderDetailsService: OrderDetailsService) {}
ngOnInit() {
this.associatatedExistingDespatchesSubscription.push(
this.orderDetailsService.orderDetails.subscribe(({ loadingDetails, data }) => {
this.loadingDetails = loadingDetails;
if (!loadingDetails && data) {
this.orderDetailsDeliveryData =
this.orderDetailsService.getAssociatedExistingDespatches(data);
} else {
this.orderDetailsDeliveryData = emptyDespatchNote;
}
})
);
}
orderDetailsDeliveryHeader: TableColumn[] = [
{ value: 'item', label: 'Item', columnWidth: '100px' },
{
value: 'quantity',
label: 'Qty',
columnWidth: '35px',
textAlign: TextAlignment.Center
},
{
value: 'despatched',
label: 'Despatched',
type: DataType.Date,
columnWidth: '100px'
},
{
value: 'method',
label: 'Method',
columnWidth: '95px'
},
{ value: 'trackingNumber', label: 'Tracking No.', columnWidth: '100px' },
{
value: 'deliveryAddress',
label: 'Delivery Address',
columnWidth: '150px'
},
{
value: 'returnsTrackingNumber',
label: 'Returns Tracking No.',
columnWidth: '130px'
},
{ value: 'fromLocation', label: 'From Location', columnWidth: '150px' },
{ value: 'service', label: 'Service', columnWidth: '90px' },
{ value: 'type', label: 'Type', columnWidth: '40px' },
{ value: 'reference', label: 'Reference', columnWidth: '120px' }
];
}