chore: Move showLoading to saga and test it

Author: tofumatt

src/amo/components/Categories.js

@@ -1,7 +1,6 @@
 import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { showLoading } from 'react-redux-loading-bar';
 
 import Link from 'amo/components/Link';
 import { categoriesFetch } from 'core/actions/categories';
@@ -26,7 +25,6 @@ export class CategoriesBase extends React.Component {
   componentWillMount() {
     const { addonType, categories, clientApp, dispatch } = this.props;
     if (!Object.values(categories).length) {
-      dispatch(showLoading());
       dispatch(categoriesFetch({ addonType, clientApp }));
     }
   }

src/amo/sagas/categories.js

@@ -1,4 +1,4 @@
-import { hideLoading } from 'react-redux-loading-bar';
+import { hideLoading, showLoading } from 'react-redux-loading-bar';
 import { call, put, select, takeEvery } from 'redux-saga/effects';
 
 import {
@@ -14,12 +14,14 @@ import { getApi } from './utils';
 // worker Saga: will be fired on every CATEGORIES_FETCH action.
 export function* fetchCategories() {
   try {
+    yield put(showLoading());
     const api = yield select(getApi);
     const response = yield call(categoriesApi, { api });
     yield put(categoriesLoad(response));
-    yield put(hideLoading());
+    // yield put(hideLoading());
   } catch (err) {
     yield put(categoriesFail(err));
+  } finally {
     yield put(hideLoading());
   }
 }

tests/client/amo/sagas/testCategories.js

@@ -1,4 +1,4 @@
-import { hideLoading } from 'react-redux-loading-bar';
+import { hideLoading, showLoading } from 'react-redux-loading-bar';
 import { call, put, select, takeEvery } from 'redux-saga/effects';
 
 import categoriesSaga, { fetchCategories } from 'amo/sagas/categories';
@@ -15,6 +15,10 @@ describe('categoriesSaga', () => {
     const fetchCategoriesGenerator = fetchCategories();
 
     let next = fetchCategoriesGenerator.next();
+    assert.deepEqual(
+      next.value, put(showLoading()), 'should dispatch show loading bar');
+
+    next = fetchCategoriesGenerator.next();
     const api = next.value;
     assert.deepEqual(api, select(getApi), 'must yield getApi');
 
@@ -35,6 +39,10 @@ describe('categoriesSaga', () => {
     const fetchCategoriesGenerator = fetchCategories();
 
     let next = fetchCategoriesGenerator.next();
+    assert.deepEqual(
+      next.value, put(showLoading()), 'should dispatch show loading bar');
+
+    next = fetchCategoriesGenerator.next();
     const api = next.value;
     assert.deepEqual(api, select(getApi), 'must yield getApi');