Jest Test for AdminBooking

Archive
1

Hi Jerry!
I’m very new to the web testing and I’m trying to test that Admin Booking sends call to the bookiung API. Something like room-booking-form-test.js but for the Admin booking. and I’m stuck a little bit. Maybe you can help me :slight_smile:

My code so far:
import React from ‘react’;
import nock from ‘nock’;
import AdminBooking from ‘…/src/js/components/AdminBooking’;

nock(‘http://localhost’)
.get(’/room/’)
.reply(200, {
accessible: true,
description: ‘Aenean porttitor mauris sit amet lacinia molestie. In posuere accumsan aliquet. Maecenas sit amet nisl massa. Interdum et malesuada fames ac ante.’,
features: {
0: ‘TV’,
1: ‘WiFi’,
2: ‘Safe’},
image: ‘https://www.mwtestconsultancy.co.uk/img/testim/room2.jpg’,
roomNumber: 101,
roomPrice: 100,
roomid: 1,
type: ‘single’
});

test(‘Admin Booking sends call to booking API’, (done) => {
nock(‘http://localhost’)
.post(’/booking/’, {
bookingdates : {
checkin : ‘2021-03-22’,
checkout : ‘2021-03-23’
},
depositpaid : true,
firstname : ‘Maria’,
lastname : ‘Hermann’,
roomid : 1
})
.reply(201, () => {
done();
});

let AdminBookingComponent = shallow(<AdminBooking  />);

AdminBookingComponent.setState({
    booking : {
        firstname : 'Maria',
        lastname : 'Hermann',
        depositpaid	: true,
        roomid : 1,
        bookingdates :	{
            checkin : '2021-03-22',
            checkout : '2021-03-23'
        },
    }

});

AdminBookingComponent.update();
AdminBookingComponent.instance().doBooking();

});
I get the following error when I run the text:
TypeError: Cannot read property ‘start’ of undefined

at AdminBooking.componentDidMount (C:\data\git\restful-booker-platform\assets\js\src\js\components\AdminBooking.jsx:24:62)
at fn (C:\data\git\restful-booker-platform\assets\js\node_modules\enzyme\src\ShallowWrapper.js:429:22)

As I understood from the code of AdminBooking.jsx, I need to get the start and enddates, which are comming from the Report.jsx. Can I mock them somehow?
Or should I start from the other end - the entry point should actualy be the report with the property showBookingForm=true?

Maria

2

So I managed to make the test pass, but as I don’t have deep technical understanding, how all components play along, I’m not sure at all if this code is good enougth. In the real life the code-review would be useful:

import React from ‘react’;
import nock from ‘nock’;
import AdminBooking from ‘…/src/js/components/AdminBooking’;
import moment from “moment”;

nock(‘http://localhost’)
.get(’/room/’)
.reply(200, {
accessible: true,
description: ‘Aenean porttitor mauris sit amet lacinia molestie. In posuere accumsan aliquet. Maecenas sit amet nisl massa. Interdum et malesuada fames ac ante.’,
features: {
0: ‘TV’,
1: ‘WiFi’,
2: ‘Safe’},
image: ‘https://www.mwtestconsultancy.co.uk/img/testim/room2.jpg’,
roomNumber: 101,
roomPrice: 100,
roomid: 1,
type: ‘single’
});

test(‘Admin Booking sends call to booking API’, (done) => {
nock(‘http://localhost’)
.post(’/booking/’, {
bookingdates : {
checkin : ‘2021-03-22’,
checkout : ‘2021-03-23’
},
depositpaid : true,
firstname : ‘Maria’,
lastname : ‘Hermann’,
roomid : 1
})
.reply(201, () => {
done();
});

const dates ={
    start : new Date('2021-03-22T00:00:00'),
    end : new Date('2021-03-23T00:00:00')
}
let AdminBookingComponent = shallow(<AdminBooking dates={dates} />);

AdminBookingComponent.setState({
    booking : {
        firstname : 'Maria',
        lastname : 'Hermann',
        depositpaid	: true,
        roomid : 1,
        bookingdates :	{
            checkin : '2021-03-22',
            checkout : '2021-03-23'
        },
    }

});

// AdminBookingComponent.update();
AdminBookingComponent.instance().doBooking();
});