Coverage for local library view

packages/app/__mocks__/electron.js

@@ -3,7 +3,8 @@ module.exports = {
     getPath: () => { }
   },
   remote: {
-    transformSource: () => { },
+    transformSource: jest.fn(),
+    getCurrentWindow: jest.fn(() => 'currentWindow'),
     app: {
       getPath: () => { }
     },

packages/app/app/containers/LibraryViewContainer/LibraryViewContainer.test.tsx

@@ -0,0 +1,40 @@
+import { waitFor } from '@testing-library/react';
+
+import { buildStoreState } from '../../../test/storeBuilders';
+import { mountedComponentFactory, setupI18Next } from '../../../test/testUtils';
+
+describe('Library view container', () => {
+  beforeAll(() => {
+    setupI18Next();
+  });
+
+  it('should display local library', () => {
+    const { component } = mountComponent();
+
+    expect(component.asFragment()).toMatchSnapshot();
+  });
+
+  it('should add a folder to the local library', async () => {
+    const { component } = mountComponent();
+
+    await waitFor(() => component.getByText(/add folders/i).click());
+
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const remote = require('electron').remote;
+    expect(remote.dialog.showOpenDialog).toHaveBeenCalledWith(
+      'currentWindow',
+      {
+        properties: ['openDirectory', 'multiSelections']
+      }
+    );
+  });
+
+  const mountComponent = mountedComponentFactory(
+    ['/library'],
+    buildStoreState()
+      .withPlugins()
+      .withConnectivity()
+      .withLocal()
+      .build()
+  );
+});

packages/app/app/containers/LibraryViewContainer/__snapshots__/LibraryViewContainer.test.tsx.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Library view container should display local library 1`] = `
+<DocumentFragment>
+  <div
+    class="main_layout_container"
+  >
+    <div
+      class="local_files_view"
+    >
+      <div
+        class="library_header_row"
+      >
+        <div
+          class="header_container"
+        >
+          Local Library
+        </div>
+        <button
+          class="ui basic icon button"
+        >
+          <i
+            aria-hidden="true"
+            class="chevron up icon"
+          />
+        </button>
+      </div>
+      <div
+        class="ui segment library_folders"
+      >
+        <div
+          class="ui segment control_bar"
+        >
+          <button
+            class="ui icon inverted left labeled button add_folder"
+          >
+            <i
+              aria-hidden="true"
+              class="folder open icon"
+            />
+            Add folders
+          </button>
+          <button
+            class="ui icon inverted disabled button refresh_icon"
+            disabled=""
+            tabindex="-1"
+          >
+            <i
+              aria-hidden="true"
+              class="refresh icon"
+            />
+          </button>
+        </div>
+      </div>
+      <div
+        class="ui segment library_contents"
+      >
+        <div
+          class="search_field_row"
+        >
+          <div
+            class="ui inverted transparent left icon input"
+          >
+            <input
+              placeholder="Filter..."
+              type="text"
+            />
+            <i
+              aria-hidden="true"
+              class="search icon"
+            />
+          </div>
+          <div
+            class="ui buttons library_list_type_toggle"
+          >
+            <button
+              class="ui active icon inverted button"
+            >
+              <i
+                aria-hidden="true"
+                class="unordered list icon"
+              />
+            </button>
+            <button
+              class="ui icon inverted button"
+            >
+              <i
+                aria-hidden="true"
+                class="th icon"
+              />
+            </button>
+            <button
+              class="ui icon inverted button"
+            >
+              <i
+                aria-hidden="true"
+                class="folder icon"
+              />
+            </button>
+          </div>
+        </div>
+        <div
+          class="library_empty_state"
+        >
+          <i
+            aria-hidden="true"
+            class="file audio outline icon"
+          />
+          <h2>
+            The library is empty
+          </h2>
+          <div>
+            Try adding some music using the button above.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/app/test/storeBuilders.ts

@@ -12,6 +12,7 @@ export const buildStoreState = () => {
     plugin: {},
     playlists: {},
     dashboard: {},
+    local: {},
     downloads: [],
     favorites: {
       tracks: [],
@@ -651,6 +652,25 @@ export const buildStoreState = () => {
       };
       return this as StoreStateBuilder;
     },
+    withLocal() {
+      state = {
+        ...state,
+        local: {
+          pending: false,
+          error: false,
+          folders: [],
+          page: 0,
+          sortBy: 'artist',
+          direction: 'ascending',
+          filter: '',
+          listType: 'simple-list',
+          tracks: [],
+          scanProgress: null,
+          scanTotal: null
+        }
+      };
+      return this as StoreStateBuilder;
+    },
     build() {
       return state;
     }