Currently, I have a Vue application with the following code snippet...
var vm = new Vue({
el: '#Workbooks',
components: {
'workbook-list': workbooklist
},
data: {
workbooks: [],
message: '',
loading: true,
error: false
},
mounted: function () {
this.getWorkbooks();
},
methods: {
getWorkbooks: function () {
var that = this;
$.ajax({
type: 'GET',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
url: '/LandingPage/getWorkbooks',
success: function (response) {
var results = JSON.parse(response);
that.workbooks = results.workbooks.workbook;
that.checkResults();
},
error: function (xhr, exception) {
that.loading = false;
that.message = 'Apologies, there was an issue fetching your reports. Please try again later.';
that.error = true,
console.log(xhr.status + ' ' + exception);
},
});
},
checkResults: function() {
this.workbooks.length ? this.loading = false : this.message = 'You currently do not have any reports set up.';
}
},
});
Everything is functioning properly, but I aim to test whether it's handling successful AJAX calls as expected.
Presently, I am executing the following Jasmine code through Karma...
it('should validate the results on successful Ajax call', function () {
spyOn(vm, "checkResults");
spyOn($, 'ajax').and.callFake(function (e) {
e.success({});
});
vm.getWorkbooks();
expect("checkResults").toHaveBeenCalled();
});
Two issues face me at the moment. Firstly, I'm encountering a 404 error in the logs regarding the AJAX URL (which directs to an ASP.NET MVC controller, rather than a physical file). Secondly, the test fails with 'SyntaxError: Unexpected token o in JSON at position 1'. It seems like this occurs because it's only returning an object and trying to parse non-existent JSON. Feel free to correct me if I'm mistaken.
My inquiry revolves around how to address these challenges and what's the proper method to unit test such AJAX calls since something appears amiss? In essence, I'm seeking ways to mock out that response.
Lastly, I'd like to mention that I'm utilizing these tools independently, without bundling them together or using Webpack.
I appreciate any assistance provided. Thank you.