apollo-mobx
Version:
HOC for querying graphql server
217 lines (216 loc) • 9.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var enzyme_1 = require("enzyme");
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var React = require("react");
var sinon = require("sinon");
var index_1 = require("../index");
var index_2 = require("../testing/index");
var State = (function () {
function State() {
this.detail = 'Detail';
this.greeting = 'Tomas';
}
tslib_1.__decorate([
mobx_1.observable,
tslib_1.__metadata("design:type", Object)
], State.prototype, "detail", void 0);
tslib_1.__decorate([
mobx_1.observable,
tslib_1.__metadata("design:type", Object)
], State.prototype, "greeting", void 0);
return State;
}());
var state = new State();
var typeDefs = "\ntype Query {\n helloWorld(greeting: String): String\n}\n\nschema {\n query: Query\n}\n";
var query = index_1.gql(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n query hello($greeting: String) {\n helloWorld(greeting: $greeting)\n }\n"], ["\n query hello($greeting: String) {\n helloWorld(greeting: $greeting)\n }\n"])));
var HelloWorld = mobx_react_1.observer(function (_a) {
var data = _a.data;
var hello = data && data.helloWorld;
if (data && data.loading) {
return React.createElement("h1", { id: "loading" }, "Loading one second please!");
}
return (React.createElement("div", null,
React.createElement("h1", { id: "content" }, hello)));
});
HelloWorld.displayName = 'HelloWorld';
var Parent = mobx_react_1.observer(function () {
return (React.createElement("div", null,
state.greeting,
React.createElement(Composed, { greeting: state.greeting }),
React.createElement("button", { id: "#change", onClick: function () { return (state.greeting = 'Dean'); } })));
});
var Composed = index_1.graphql(query, {
options: function (ownProps) {
return { variables: { greeting: ownProps.greeting } };
},
props: function (_a) {
var data = _a.data, ownProps = _a.ownProps;
return ({
data1: data,
ownProps1: ownProps,
custom: 'MyCustom'
});
}
})(HelloWorld);
describe('Queries', function () {
function init(say) {
var queries = {
helloWorld: function (a, _a) {
var greeting = (_a === void 0 ? {} : _a).greeting;
return say(greeting);
}
};
var context = {};
var _a = index_2.initialiseApolloDecorator({
context: context,
queries: queries,
typeDefs: typeDefs
}), ApolloDecorator = _a.ApolloDecorator, client = _a.client;
var component = (React.createElement(ApolloDecorator, null,
React.createElement(Parent, null)));
return {
component: component,
context: context,
client: client
};
}
it('can call query with callbacks', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
function say(what) {
return 'Hello: ' + what;
}
var thenCallback, finalCallback, catchCallback, _a, client, context, greetings;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
thenCallback = sinon.stub();
finalCallback = sinon.stub();
catchCallback = sinon.stub();
_a = init(say), client = _a.client, context = _a.context;
return [4, client.query({
finalCallback: finalCallback,
thenCallback: thenCallback,
query: query,
variables: {
greeting: 'Tomas'
}
})];
case 1:
greetings = _b.sent();
greetings.data.should.deep.equal({ helloWorld: 'Hello: Tomas' });
thenCallback.should.have.been.calledWith({ helloWorld: 'Hello: Tomas' }, context);
finalCallback.should.have.been.calledWith(context);
catchCallback.should.not.have.been.called;
return [2];
}
});
});
});
it('will throw error on error', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
function say(what) {
throw new Error('Failed');
}
var thenCallback, finalCallback, catchCallback, _a, client, context;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
thenCallback = sinon.stub();
finalCallback = sinon.stub();
catchCallback = sinon.stub();
_a = init(say), client = _a.client, context = _a.context;
return [4, client
.query({
catchCallback: catchCallback,
finalCallback: finalCallback,
query: query,
thenCallback: thenCallback
})
.should.be.rejectedWith('GraphQL error: Failed')];
case 1:
_b.sent();
catchCallback.should.have.been.called;
return [2];
}
});
});
});
it('can mount container', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
function say(what) {
return 'Hello: ' + what;
}
var _a, client, context, component, wrapper, hw;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
_a = init(say), client = _a.client, context = _a.context, component = _a.component;
return [4, index_2.mountContainer(component)];
case 1:
wrapper = _b.sent();
wrapper
.find('#content')
.text()
.should.equal('Hello: Tomas');
hw = wrapper.find('HelloWorld');
hw.prop('custom').should.equal('MyCustom');
hw.prop('data1').should.equal(hw.prop('data'));
hw.prop('ownProps1').should.exist;
return [2];
}
});
});
});
it('will wait for queries and re-render accordingly', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
function say(what) {
return 'Hello: ' + what + ' ' + i++;
}
var i, _a, client, context, component, wrapper;
return tslib_1.__generator(this, function (_b) {
switch (_b.label) {
case 0:
i = 0;
_a = init(say), client = _a.client, context = _a.context, component = _a.component;
wrapper = enzyme_1.mount(component);
try {
wrapper
.find('#loading')
.text()
.should.equal('Loading one second please!');
}
catch (ex) {
}
return [4, index_2.waitForQueries(client)];
case 1:
_b.sent();
wrapper
.find('#content')
.text()
.should.equal('Hello: Tomas 0');
wrapper.find('button').simulate('click');
return [4, index_2.waitForQueries(client)];
case 2:
_b.sent();
wrapper
.find('#content')
.text()
.should.equal('Hello: Dean 1');
client.resetStore();
return [4, index_2.waitForQueries(client)];
case 3:
_b.sent();
wrapper
.find('#content')
.text()
.should.equal('Hello: Dean 2');
return [2];
}
});
});
});
});
var templateObject_1;