Add Services about cylc-ui HOT 5 CLOSED

One implementation is now partially done in https://github.com/kinow/cylc-web/tree/add-services. Now need to try to write a unit test.

If we are able to test everything, except the HTTP call (mocked), then I think this is a good starting point for future services used to talk to suite list service, other parts of the hub like proxy API, etc.

from cylc-ui.

Writing the unit test was quite easy and simple. The plan was to see the test failing, and use Sinon.JS to mock the call.

However, faced a different issue as importing the services, apparently webpack imported the classes with GraphQL. And there is a known issue that running the Apollo GraphQL client in the node environment (i.e. without a browser), it fails due to the missing fetch.

If you open a browser window, then go to any URL, open the developer tools, and type in the Console: window.fetch, you will see that the browser defines it. But when browserless (as when running the unit tests), that variables does not exist.

This was fixed in Apollo apollographql/apollo-client#3578, and there is now a way to pass a fetch object.

from cylc-ui.

I've moved the GraphQL call from Vuex to its own service anyway, and thought that maybe we could fix this issue later. But in someway the module is still loaded, and the whole tests fail with

 WEBPACK  Compiled successfully in 3852ms

 MOCHA  Testing...

 RUNTIME EXCEPTION  Exception occurred while loading your tests

Error: 
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/unfetch.

For example:
import fetch from 'unfetch';
import { createHttpLink } from 'apollo-link-http';
...
 ERROR  mocha-webpack exited with code 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:unit: `vue-cli-service test:unit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test:unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/kinow/.npm/_logs/2019-02-27T21_42_45_483Z-debug.log

So now gotta find a way to pass a fetch object before each test. But in a way that is simpler... because just asking developers to copy and paste a block of code for each test is not quite good.

from cylc-ui.

Tried a root-level hook for Mocha, but even that way the error appears to occur before Mocha loads the hook.

The only way to fix it was using node-fetch.

// import { createProvider } from './vue-apollo'
import ApolloClient from 'apollo-boost'
import fetch from 'node-fetch'

// GraphQL
const apolloClient = new ApolloClient({
  // You should use an absolute URL here
  uri: "https://api.graphcms.com/simple/v1/awesomeTalksClone",
  // we must define fetch, as otherwise running unit tests it would fail as there is no global fetch variable
  fetch: fetch
});

export default apolloClient

Though that introduced a warning when running unit tests 😥

Warning in ./node_modules/node-fetch/lib/index.mjs

  Module not found: 'encoding' in '/home/kinow/Development/python/workspace/cylc-web/node_modules/node-fetch/lib'

Npm node-fetch documentation says:

(This API requires an optional dependency on npm package encoding, which you need to install manually. webpack users may see a warning message due to this optional dependency.)

As it appears to work fine, leaving it for now to prevent increasing our final produced HTML/JS/CSS, etc.

from cylc-ui.

Done! We have services! And we are retrieving the User profile from the service. And this user service is retrieving the data from JupyterHub! Phew! That was quite a long ride to get the data from the hub 😪

from cylc-ui.