apollo-mobx
Version:
HOC for querying graphql server
192 lines (191 loc) • 9.53 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 wait_for_data_1 = require("../client/wait_for_data");
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();
describe('Wait For Data', function () {
var typeDefs = "\n scalar Date\n\n type Query {\n helloWorld(greeting: String): String\n }\n\n schema {\n query: Query\n }\n";
var queries = {
helloWorld: function () {
return 'Hello: Tomas';
}
};
var HelloWorld = mobx_react_1.observer(function (_a) {
var data = _a.data;
var hello = data && data.helloWorld;
return (React.createElement("div", null,
React.createElement("h1", { id: "content" }, hello)));
});
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 context = {};
var ApolloDecorator;
var graphqlClient;
beforeEach(function () {
var init = index_2.initialiseApolloDecorator({
context: context,
queries: queries,
typeDefs: typeDefs
});
ApolloDecorator = init.ApolloDecorator;
graphqlClient = init.client;
});
it('can specify loading component on query', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, Composed, component, wrapper;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
Composed = index_1.graphql(query, {
options: function (props) {
return { variables: {
greeting: 'Tomi'
}
};
},
loadingComponent: loadingComponent,
waitForData: true,
})(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
wrapper = enzyme_1.mount(component);
loadingComponent.should.have.been.called;
return [4, index_2.waitForQueries(graphqlClient)];
case 1:
_a.sent();
wrapper
.find('#content')
.text()
.should.equal('Hello: Tomas');
return [2];
}
});
});
});
it('can specify loading component on client', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, Composed, component, wrapper;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
graphqlClient.loadingComponent = loadingComponent;
Composed = index_1.graphql(query, {
waitForData: true,
})(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
wrapper = enzyme_1.mount(component);
return [4, index_2.waitForQueries(graphqlClient)];
case 1:
_a.sent();
loadingComponent.should.have.been.called;
return [2];
}
});
});
});
it('can compose with wait for data and wait for data to load', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, container, Composed, component, wrapper;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
graphqlClient.loadingComponent = loadingComponent;
container = index_1.graphql(query);
Composed = index_1.compose(container, wait_for_data_1.waitForData())(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
wrapper = enzyme_1.mount(component);
return [4, index_2.waitForQueries(graphqlClient)];
case 1:
_a.sent();
loadingComponent.should.have.been.called;
return [2];
}
});
});
});
it('can compose with wait for data and wait for data to load based on selector', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, container, Composed, component, wrapper;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
graphqlClient.loadingComponent = loadingComponent;
container = index_1.graphql(query);
Composed = index_1.compose(container, wait_for_data_1.waitForData('data.helloWorld'))(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
wrapper = enzyme_1.mount(component);
return [4, index_2.waitForQueries(graphqlClient)];
case 1:
_a.sent();
loadingComponent.should.have.been.called;
return [2];
}
});
});
});
it('can compose with wait for data and wait for data to load using local loadingComponent', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, container, Composed, component, wrapper;
return tslib_1.__generator(this, function (_a) {
switch (_a.label) {
case 0:
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
container = index_1.graphql(query);
Composed = index_1.compose(container, wait_for_data_1.waitForData('data', { loadingComponent: loadingComponent }))(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
wrapper = enzyme_1.mount(component);
return [4, index_2.waitForQueries(graphqlClient)];
case 1:
_a.sent();
loadingComponent.should.have.been.called;
return [2];
}
});
});
});
it('throws error when data do not exists', function () {
return tslib_1.__awaiter(this, void 0, void 0, function () {
var loadingComponent, container, Composed, component;
return tslib_1.__generator(this, function (_a) {
loadingComponent = sinon.stub().returns(React.createElement("div", { id: "loading" }, "Loading ..."));
graphqlClient.loadingComponent = null;
container = index_1.graphql(query);
Composed = index_1.compose(container, wait_for_data_1.waitForData('error', { loadingComponent: loadingComponent }))(HelloWorld);
component = (React.createElement(ApolloDecorator, null,
React.createElement(Composed, null)));
(function () { return enzyme_1.mount(component); }).should.throw('Loading container did not find key in the apollo result set: error');
return [2];
});
});
});
});
var templateObject_1;