Commit dc058e15 authored by Fatih Acet's avatar Fatih Acet

Merge branch '29575-polling' into 'master'

Poll with vue resource get function

Closes #29575

See merge request !10057
parents 1bb1a75a 45b2c63f
import httpStatusCodes from './http_status';
/**
* Polling utility for handling realtime updates.
* Service for vue resouce and method need to be provided as props
*
* @example
* new poll({
* resource: resource,
* method: 'name',
* data: {page: 1, scope: 'all'},
* successCallback: () => {},
* errorCallback: () => {},
* }).makeRequest();
*
* this.service = new BoardsService(endpoint);
* new poll({
* resource: this.service,
* method: 'get',
* data: {page: 1, scope: 'all'},
* successCallback: () => {},
* errorCallback: () => {},
* }).makeRequest();
*
*
* 1. Checks for response and headers before start polling
* 2. Interval is provided by `Poll-Interval` header.
* 3. If `Poll-Interval` is -1, we stop polling
* 4. If HTTP response is 200, we poll.
* 5. If HTTP response is different from 200, we stop polling.
*
*/
export default class Poll {
constructor(options = {}) {
this.options = options;
this.options.data = options.data || {};
this.intervalHeader = 'POLL-INTERVAL';
}
checkConditions(response) {
const headers = gl.utils.normalizeHeaders(response.headers);
const pollInterval = headers[this.intervalHeader];
if (pollInterval > 0 && response.status === httpStatusCodes.OK) {
this.options.successCallback(response);
setTimeout(() => {
this.makeRequest();
}, pollInterval);
} else {
this.options.successCallback(response);
}
}
makeRequest() {
const { resource, method, data, errorCallback } = this.options;
return resource[method](data)
.then(response => this.checkConditions(response))
.catch(error => errorCallback(error));
}
}
---
title: Adds polling utility function for vue resource
merge_request:
author:
import Vue from 'vue';
import VueResource from 'vue-resource';
import Poll from '~/lib/utils/poll';
Vue.use(VueResource);
class ServiceMock {
constructor(endpoint) {
this.service = Vue.resource(endpoint);
}
fetch() {
return this.service.get();
}
}
describe('Poll', () => {
let callbacks;
beforeEach(() => {
callbacks = {
success: () => {},
error: () => {},
};
spyOn(callbacks, 'success');
spyOn(callbacks, 'error');
});
it('calls the success callback when no header for interval is provided', (done) => {
const successInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), { status: 200 }));
};
Vue.http.interceptors.push(successInterceptor);
new Poll({
resource: new ServiceMock('endpoint'),
method: 'fetch',
successCallback: callbacks.success,
errorCallback: callbacks.error,
}).makeRequest();
setTimeout(() => {
expect(callbacks.success).toHaveBeenCalled();
expect(callbacks.error).not.toHaveBeenCalled();
done();
}, 0);
Vue.http.interceptors = _.without(Vue.http.interceptors, successInterceptor);
});
it('calls the error callback whe the http request returns an error', (done) => {
const errorInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), { status: 500 }));
};
Vue.http.interceptors.push(errorInterceptor);
new Poll({
resource: new ServiceMock('endpoint'),
method: 'fetch',
successCallback: callbacks.success,
errorCallback: callbacks.error,
}).makeRequest();
setTimeout(() => {
expect(callbacks.success).not.toHaveBeenCalled();
expect(callbacks.error).toHaveBeenCalled();
done();
}, 0);
Vue.http.interceptors = _.without(Vue.http.interceptors, errorInterceptor);
});
it('should call the success callback when the interval header is -1', (done) => {
const intervalInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': -1 } }));
};
Vue.http.interceptors.push(intervalInterceptor);
new Poll({
resource: new ServiceMock('endpoint'),
method: 'fetch',
successCallback: callbacks.success,
errorCallback: callbacks.error,
}).makeRequest();
setTimeout(() => {
expect(callbacks.success).toHaveBeenCalled();
expect(callbacks.error).not.toHaveBeenCalled();
done();
}, 0);
Vue.http.interceptors = _.without(Vue.http.interceptors, intervalInterceptor);
});
it('starts polling when http status is 200 and interval header is provided', (done) => {
const pollInterceptor = (request, next) => {
next(request.respondWith(JSON.stringify([]), { status: 200, headers: { 'poll-interval': 2 } }));
};
Vue.http.interceptors.push(pollInterceptor);
const service = new ServiceMock('endpoint');
spyOn(service, 'fetch').and.callThrough();
new Poll({
resource: service,
method: 'fetch',
data: { page: 1 },
successCallback: callbacks.success,
errorCallback: callbacks.error,
}).makeRequest();
setTimeout(() => {
expect(service.fetch.calls.count()).toEqual(2);
expect(service.fetch).toHaveBeenCalledWith({ page: 1 });
expect(callbacks.success).toHaveBeenCalled();
expect(callbacks.error).not.toHaveBeenCalled();
done();
}, 5);
Vue.http.interceptors = _.without(Vue.http.interceptors, pollInterceptor);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment