Add test for DashboardsPage loading state

ui/src/dashboards/containers/DashboardsPage.tsx

@@ -33,11 +33,11 @@ import {Source, Dashboard, RemoteDataState} from 'src/types'
 import {Notification} from 'src/types/notifications'
 import {DashboardFile, Cell} from 'src/types/dashboards'
 
-interface Props {
+export interface Props {
   source: Source
   sources: Source[]
   router: InjectedRouter
-  handleGetDashboards: () => Dashboard[]
+  handleGetDashboards: () => Promise<Dashboard[]>
   handleGetChronografVersion: () => string
   handleDeleteDashboard: (dashboard: Dashboard) => void
   handleImportDashboard: (dashboard: Dashboard) => void
@@ -51,7 +51,7 @@ interface State {
 }
 
 @ErrorHandling
-class DashboardsPage extends PureComponent<Props, State> {
+export class DashboardsPage extends PureComponent<Props, State> {
   constructor(props: Props) {
     super(props)
 

ui/test/dashboards/components/DashboardsPage.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {shallow} from 'enzyme'
+
+import {DashboardsPage, Props} from 'src/dashboards/containers/DashboardsPage'
+import DashboardsTable from 'src/dashboards/components/DashboardsTable'
+import DashboardsContents from 'src/dashboards/components/DashboardsPageContents'
+import {Page} from 'src/reusable_ui'
+
+import {source} from 'test/resources'
+
+describe('DashboadsPage', () => {
+  test('it displays a loading state initially', () => {
+    const props = {
+      dashboards: [],
+      handleGetDashboards: () => new Promise(() => {}),
+      source,
+      sources: [source],
+    } as Props
+
+    const wrapper = shallow(<DashboardsPage {...props} />)
+
+    const text = wrapper
+      .find(Page)
+      .dive()
+      .find(Page.Contents)
+      .dive()
+      .find(DashboardsContents)
+      .dive()
+      .find(DashboardsTable)
+      .dive()
+      .find('.generic-empty-state h4')
+      .text()
+
+    expect(text).toEqual('Loading dashboards...')
+  })
+})