Properly show spinner when user has no repositories (#516)

Fixes #507

Author: bartaz

src/common/components/repositories-home/index.js

@@ -55,7 +55,10 @@ class RepositoriesHome extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.snaps.success !== nextProps.snaps.success) {
+    const snapsLength = nextProps.snaps.snaps && nextProps.snaps.snaps.length;
+
+    if ((this.props.snaps.success !== nextProps.snaps.success)
+        || (snapsLength === 0)) {
       this.fetchData(nextProps);
     }
   }
@@ -89,9 +92,14 @@ class RepositoriesHome extends Component {
 
   render() {
     const { snaps } = this.props;
-    const hasSnaps = (snaps.snaps && Object.keys(snaps.snaps).length > 0);
-    // show spinner until we know if user has any enabled repos
-    return (snaps.isFetching && !hasSnaps)
+    const hasSnaps = (snaps.snaps && snaps.snaps.length > 0);
+
+    // show spinner if snaps data was not yet fetched (snaps list is empty)
+    // (to avoid spinner during polling we are not checking `success` or `isFetching`
+    //
+    // when snaps are loaded and user doesn't have any, they will be redirected
+    // to select repositories (so spinner won't be showing endlessly)
+    return !hasSnaps
       ? this.renderSpinner()
       : this.renderRepositoriesList();
   }

test/unit/src/common/components/repositories-home/t_repositories-home.js

@@ -18,6 +18,74 @@ describe('The RepositoriesHome component', () => {
     clock.restore();
   });
 
+  context('when snaps are not loaded', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      props = {
+        auth: {
+          authenticated: true
+        },
+        user: {},
+        snaps: {},
+        snapBuilds: {},
+        fetchBuilds: () => {},
+        updateSnaps: () => {},
+        router: {}
+      };
+
+      wrapper = shallow(<RepositoriesHome { ...props } />);
+    });
+
+    it('should render spinner', () => {
+      expect(wrapper.find('Spinner').length).toBe(1);
+    });
+  });
+
+  context('when user has no snaps', () => {
+    let wrapper;
+
+    beforeEach(() => {
+      props = {
+        auth: {
+          authenticated: true
+        },
+        user: {},
+        snaps: {
+          success: true,
+          snaps: []
+        },
+        snapBuilds: {},
+        fetchBuilds: () => {},
+        updateSnaps: () => {},
+        router: {
+          replace: expect.createSpy()
+        }
+      };
+
+      wrapper = shallow(<RepositoriesHome { ...props } />);
+    });
+
+    it('should render spinner', () => {
+      expect(wrapper.find('Spinner').length).toBe(1);
+    });
+
+    context('and component recieves props', () => {
+      beforeEach(() => {
+        wrapper.instance().componentDidMount();
+        wrapper.instance().componentWillReceiveProps(props);
+      });
+
+      afterEach(() => {
+        wrapper.instance().componentWillUnmount();
+      });
+
+      it('should redirect to select repositories', () => {
+        expect(props.router.replace).toHaveBeenCalledWith('/select-repositories');
+      });
+    });
+  });
+
   context('when user is logged in', () => {
     let wrapper;