how to mock json data for unit testing?

Question

I have a function called getTodaysHours() in my controller that I would like to test. I was wondering if I can mock the JSON data below in my unit testing spec?

describe('vendor controller', () => {
    let vm;

    beforeEach(angular.mock.module('thcmaps-ui'));
    beforeEach(inject(($controller) => {
        vm = $controller('VendorController');
        vm.data = {"_id":"56b54f9368e685ca04aa0b87","lat_lon":"33.713018,-117.841101",...}
    }));

    it('should state store hours for today', () => {
        console.log(vm.data);
        expect(1).toEqual(1);
    });
});

vendor.controller

export class VendorController {
    constructor($rootScope, data, event, toastr, moment, _, distanceService, vendorDataService, userDataService, stateManagerService) {
        'ngInject';
        //deps
        this.$rootScope = $rootScope;
        this.toastr = toastr;
        this._ = _;
        this.userDataService = userDataService;
        this.vendorDataService = vendorDataService;
        this.stateManagerService = stateManagerService;
        this.event = event;

        //bootstrap
        data.isDeepLink = true;
        this.data = data;
        this.data.last_update = moment(this.data.updated_at).format('MM/DD/YY h:mm A');
        this.data.distance = distanceService.getDistance(this.data.loc.lng, this.data.loc.lat);
        this.data.todaysHours = this.getTodaysHours();
        this.data.rating_num = Math.floor(data.rating);


        this.hasReviewed = (userDataService.user.reviewed[data._id]) ? true : false;
        this.isGrid = false;
        this.isSearching = false;
        this.hideIntro = true;
        this.menuCollapsed = true;
        this.filterMenuCollapsed = true;

        this.selectedCategory = 'All';
        this.todaysHours = '';
        this.type = '';
        this.searchString = '';

        this.reviewScore = 0;

        this.today = new Date().getDay();

        this.vendorDataService.currentVendor = data;

        //load marker onto map
        $rootScope.$broadcast(event.ui.vendor.pageLoad, data);

        //get menu
        vendorDataService.getVendorMenu(data._id)
            .then((res)=> {
                this.data.menu = res.menu;
                this.menuContainer = this.data.menu;
                this.totalResults = this.getTotalResults();
                this.availableMenuCategories = this.getAvailableMenuCategories();
            })
            .catch(() => {
                this.toastr.error('Whoops, Something went wrong! We were not able to load the menu.',  'Error');
            });
    }

    //get todays hours
    getTodaysHours() {
        let today = this.data.hours[new Date().getDay()];
        return (today.opening_time || '9:00am') + ' - ' + (today.closing_time || '5:00pm');
    }  
}

When I tried to log vm.data I'm getting

Error: [$injector:unpr] Unknown provider: dataProvider <- data <- VendorController

TypeError: undefined is not an object (evaluating 'vm.data')

your vm.data object contains ,... which is not a valid object, is it your real object or because you have deleted some properties...? — yishaiz
– yishaiz, Commented May 2, 2016 at 11:50
also see this answer for json mock data, this is the way I'm providing json mock data for my tests — yishaiz
– yishaiz, Commented May 2, 2016 at 11:52

Clemens Basler · Accepted Answer · 2016-05-02 11:30:05Z

1

Mocking JSON data should work with $provide constant, after the mocking of your module.

let data = {"_id":"56b54f9368e685ca04aa0b87",
"lat_lon":"33.713018,-117.841101",...}

beforeEach(angular.mock.module('thcmaps-ui',
($provide) => {
    $provide.constant('data', new data);
  }));

To be honest I just tried it out with functions, not with JSON data, but it should work the same way.

answered May 2, 2016 at 11:30

Clemens Basler

811 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Brett Over a year ago

thanks Clemens data logs correctly now. however when I tried to inject the controller in beforeEach it fails the test with error. my spec looks like this now: jsfiddle.net/mL5h2v1t

Clemens Basler Over a year ago

I think you have to mock the controller as well, after mocking the data with something like beforeEach(angular.mock.module('VendorController')); I'm not quite sure, if your injection of the controller is right, I'll answer again if I find out something new.

Collectives™ on Stack Overflow

how to mock json data for unit testing?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related