@pranaysahith/decap-cms-core 3.9.1

package/src/components/Collection/__tests__/NestedCollection.spec.js

@@ -0,0 +1,445 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render, fireEvent } from '@testing-library/react';
+import { fromJS } from 'immutable';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+
+import ConnectedNestedCollection, {
+  NestedCollection,
+  getTreeData,
+  walk,
+  updateNode,
+} from '../NestedCollection';
+
+jest.mock('decap-cms-ui-default', () => {
+  const actual = jest.requireActual('decap-cms-ui-default');
+  return {
+    ...actual,
+    Icon: 'mocked-icon',
+  };
+});
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+function renderWithRedux(component, { store } = {}) {
+  function Wrapper({ children }) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  return render(component, { wrapper: Wrapper });
+}
+
+describe('NestedCollection', () => {
+  const collection = fromJS({
+    name: 'pages',
+    label: 'Pages',
+    folder: 'src/pages',
+    fields: [{ name: 'title', widget: 'string' }],
+    nested: {
+      subfolders: true,
+    },
+  });
+
+  it('should render correctly with no entries', () => {
+    const entries = fromJS([]);
+    const { asFragment, getByTestId } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId('/')).toHaveTextContent('Pages');
+    expect(getByTestId('/')).toHaveAttribute('href', '/collections/pages');
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render correctly with nested entries', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/b/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 3' } },
+      { path: 'src/pages/b/a/index.md', data: { title: 'File 4' } },
+    ]);
+    const { asFragment, getByTestId } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    // expand the tree
+    fireEvent.click(getByTestId('/'));
+
+    expect(getByTestId('/a')).toHaveTextContent('File 1');
+    expect(getByTestId('/a')).toHaveAttribute('href', '/collections/pages/filter/a');
+
+    expect(getByTestId('/b')).toHaveTextContent('File 2');
+    expect(getByTestId('/b')).toHaveAttribute('href', '/collections/pages/filter/b');
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should keep expanded nodes on re-render', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/b/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 3' } },
+      { path: 'src/pages/b/a/index.md', data: { title: 'File 4' } },
+    ]);
+    const { getByTestId, rerender } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(getByTestId('/'));
+    fireEvent.click(getByTestId('/a'));
+
+    expect(getByTestId('/a')).toHaveTextContent('File 1');
+
+    const newEntries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/b/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 3' } },
+      { path: 'src/pages/b/a/index.md', data: { title: 'File 4' } },
+      { path: 'src/pages/c/index.md', data: { title: 'File 5' } },
+      { path: 'src/pages/c/a/index.md', data: { title: 'File 6' } },
+    ]);
+
+    rerender(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={newEntries} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId('/a')).toHaveTextContent('File 1');
+  });
+
+  it('should expand nodes based on filterTerm', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/a/index.md', data: { title: 'File 3' } },
+    ]);
+
+    const { getByTestId, queryByTestId, rerender } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    expect(queryByTestId('/a/a')).toBeNull();
+
+    rerender(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} filterTerm={'a/a'} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId('/a/a')).toHaveTextContent('File 2');
+  });
+
+  it('should ignore filterTerm once a user toggles an node', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/a/index.md', data: { title: 'File 3' } },
+    ]);
+
+    const { getByTestId, queryByTestId, rerender } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    rerender(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} filterTerm={'a/a'} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId('/a/a')).toHaveTextContent('File 2');
+
+    fireEvent.click(getByTestId('/a'));
+
+    rerender(
+      <MemoryRouter>
+        <NestedCollection
+          collection={collection}
+          entries={fromJS(entries.toJS())}
+          filterTerm={'a/a'}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(queryByTestId('/a/a')).toBeNull();
+  });
+
+  it('should not collapse an unselected node when clicked', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/a/index.md', data: { title: 'File 3' } },
+      { path: 'src/pages/a/a/a/a/index.md', data: { title: 'File 4' } },
+    ]);
+
+    const { getByTestId } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(getByTestId('/'));
+    fireEvent.click(getByTestId('/a'));
+    fireEvent.click(getByTestId('/a/a'));
+
+    expect(getByTestId('/a/a')).toHaveTextContent('File 2');
+    fireEvent.click(getByTestId('/a'));
+    expect(getByTestId('/a/a')).toHaveTextContent('File 2');
+  });
+
+  it('should collapse a selected node when clicked', () => {
+    const entries = fromJS([
+      { path: 'src/pages/index.md', data: { title: 'Root' } },
+      { path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { path: 'src/pages/a/a/index.md', data: { title: 'File 2' } },
+      { path: 'src/pages/a/a/a/index.md', data: { title: 'File 3' } },
+      { path: 'src/pages/a/a/a/a/index.md', data: { title: 'File 4' } },
+    ]);
+
+    const { getByTestId, queryByTestId } = render(
+      <MemoryRouter>
+        <NestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+    );
+
+    fireEvent.click(getByTestId('/'));
+    fireEvent.click(getByTestId('/a'));
+    fireEvent.click(getByTestId('/a/a'));
+
+    expect(getByTestId('/a/a/a')).toHaveTextContent('File 3');
+    fireEvent.click(getByTestId('/a/a'));
+    expect(queryByTestId('/a/a/a')).toBeNull();
+  });
+
+  it('should render connected component', () => {
+    const entriesArray = [
+      { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
+      { slug: 'a/index', path: 'src/pages/a/index.md', data: { title: 'File 1' } },
+      { slug: 'b/index', path: 'src/pages/b/index.md', data: { title: 'File 2' } },
+      { slug: 'a/a/index', path: 'src/pages/a/a/index.md', data: { title: 'File 3' } },
+      { slug: 'b/a/index', path: 'src/pages/b/a/index.md', data: { title: 'File 4' } },
+    ];
+    const entries = entriesArray.reduce(
+      (acc, entry) => {
+        acc.entities[`${collection.get('name')}.${entry.slug}`] = entry;
+        acc.pages[collection.get('name')].ids.push(entry.slug);
+        return acc;
+      },
+      { pages: { [collection.get('name')]: { ids: [] } }, entities: {} },
+    );
+
+    const store = mockStore({ entries: fromJS(entries) });
+
+    const { asFragment, getByTestId } = renderWithRedux(
+      <MemoryRouter>
+        <ConnectedNestedCollection collection={collection} entries={entries} />
+      </MemoryRouter>,
+      { store },
+    );
+
+    // expand the root
+    fireEvent.click(getByTestId('/'));
+
+    expect(getByTestId('/a')).toHaveTextContent('File 1');
+    expect(getByTestId('/a')).toHaveAttribute('href', '/collections/pages/filter/a');
+
+    expect(getByTestId('/b')).toHaveTextContent('File 2');
+    expect(getByTestId('/b')).toHaveAttribute('href', '/collections/pages/filter/b');
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('getTreeData', () => {
+    it('should return nested tree data from entries', () => {
+      const entries = fromJS([
+        { path: 'src/pages/index.md', data: { title: 'Root' } },
+        { path: 'src/pages/intro/index.md', data: { title: 'intro index' } },
+        { path: 'src/pages/intro/category/index.md', data: { title: 'intro category index' } },
+        { path: 'src/pages/compliance/index.md', data: { title: 'compliance index' } },
+      ]);
+
+      const treeData = getTreeData(collection, entries);
+
+      expect(treeData).toEqual([
+        {
+          title: 'Pages',
+          path: '/',
+          isDir: true,
+          isRoot: true,
+          children: [
+            {
+              title: 'intro',
+              path: '/intro',
+              isDir: true,
+              isRoot: false,
+              children: [
+                {
+                  title: 'category',
+                  path: '/intro/category',
+                  isDir: true,
+                  isRoot: false,
+                  children: [
+                    {
+                      path: '/intro/category/index.md',
+                      data: { title: 'intro category index' },
+                      title: 'intro category index',
+                      isDir: false,
+                      isRoot: false,
+                      children: [],
+                    },
+                  ],
+                },
+                {
+                  path: '/intro/index.md',
+                  data: { title: 'intro index' },
+                  title: 'intro index',
+                  isDir: false,
+                  isRoot: false,
+                  children: [],
+                },
+              ],
+            },
+            {
+              title: 'compliance',
+              path: '/compliance',
+              isDir: true,
+              isRoot: false,
+              children: [
+                {
+                  path: '/compliance/index.md',
+                  data: { title: 'compliance index' },
+                  title: 'compliance index',
+                  isDir: false,
+                  isRoot: false,
+                  children: [],
+                },
+              ],
+            },
+            {
+              path: '/index.md',
+              data: { title: 'Root' },
+              title: 'Root',
+              isDir: false,
+              isRoot: false,
+              children: [],
+            },
+          ],
+        },
+      ]);
+    });
+
+    it('should ignore collection summary', () => {
+      const entries = fromJS([{ path: 'src/pages/index.md', data: { title: 'Root' } }]);
+
+      const treeData = getTreeData(collection, entries);
+
+      expect(treeData).toEqual([
+        {
+          title: 'Pages',
+          path: '/',
+          isDir: true,
+          isRoot: true,
+          children: [
+            {
+              path: '/index.md',
+              data: { title: 'Root' },
+              title: 'Root',
+              isDir: false,
+              isRoot: false,
+              children: [],
+            },
+          ],
+        },
+      ]);
+    });
+
+    it('should use nested collection summary for title', () => {
+      const entries = fromJS([{ path: 'src/pages/index.md', data: { title: 'Root' } }]);
+
+      const treeData = getTreeData(
+        collection.setIn(['nested', 'summary'], '{{filename}}'),
+        entries,
+      );
+
+      expect(treeData).toEqual([
+        {
+          title: 'Pages',
+          path: '/',
+          isDir: true,
+          isRoot: true,
+          children: [
+            {
+              path: '/index.md',
+              data: { title: 'Root' },
+              title: 'index',
+              isDir: false,
+              isRoot: false,
+              children: [],
+            },
+          ],
+        },
+      ]);
+    });
+  });
+
+  describe('walk', () => {
+    it('should visit every tree node', () => {
+      const entries = fromJS([
+        { path: 'src/pages/index.md', data: { title: 'Root' } },
+        { path: 'src/pages/dir1/index.md', data: { title: 'Dir1 File' } },
+        { path: 'src/pages/dir2/index.md', data: { title: 'Dir2 File' } },
+      ]);
+
+      const treeData = getTreeData(collection, entries);
+      const callback = jest.fn();
+      walk(treeData, callback);
+
+      expect(callback).toHaveBeenCalledTimes(6);
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/' }));
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/index.md' }));
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/dir1' }));
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/dir2' }));
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/dir1/index.md' }));
+      expect(callback).toHaveBeenCalledWith(expect.objectContaining({ path: '/dir2/index.md' }));
+    });
+  });
+
+  describe('updateNode', () => {
+    it('should update node', () => {
+      const entries = fromJS([
+        { path: 'src/pages/index.md', data: { title: 'Root' } },
+        { path: 'src/pages/dir1/index.md', data: { title: 'Dir1 File' } },
+        { path: 'src/pages/dir2/index.md', data: { title: 'Dir2 File' } },
+      ]);
+
+      const treeData = getTreeData(collection, entries);
+      expect(treeData[0].children[0].children[0].expanded).toBeUndefined();
+
+      const callback = jest.fn(node => ({ ...node, expanded: true }));
+      const node = { path: '/dir1/index.md' };
+      updateNode(treeData, node, callback);
+
+      expect(callback).toHaveBeenCalledTimes(1);
+      expect(callback).toHaveBeenCalledWith(node);
+      expect(treeData[0].children[0].children[0].expanded).toEqual(true);
+    });
+  });
+});

package/src/components/Collection/__tests__/Sidebar.spec.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import { fromJS } from 'immutable';
+
+import { Sidebar } from '../Sidebar';
+
+jest.mock('decap-cms-ui-default', () => {
+  const actual = jest.requireActual('decap-cms-ui-default');
+  return {
+    ...actual,
+    Icon: 'mocked-icon',
+  };
+});
+
+jest.mock('../NestedCollection', () => 'nested-collection');
+jest.mock('../CollectionSearch', () => 'collection-search');
+jest.mock('../../../actions/collections');
+
+describe('Sidebar', () => {
+  const props = {
+    searchTerm: '',
+    isSearchEnabled: true,
+    t: jest.fn(key => key),
+  };
+  it('should render sidebar with a simple collection', () => {
+    const collections = fromJS([{ name: 'posts', label: 'Posts' }]).toOrderedMap();
+    const { asFragment, getByTestId } = render(
+      <MemoryRouter>
+        <Sidebar {...props} collections={collections} />
+      </MemoryRouter>,
+    );
+
+    expect(getByTestId('posts')).toHaveTextContent('Posts');
+    expect(getByTestId('posts')).toHaveAttribute('href', '/collections/posts');
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should not render a hidden collection', () => {
+    const collections = fromJS([{ name: 'posts', label: 'Posts', hide: true }]).toOrderedMap();
+    const { queryByTestId } = render(
+      <MemoryRouter>
+        <Sidebar {...props} collections={collections} />
+      </MemoryRouter>,
+    );
+
+    expect(queryByTestId('posts')).toBeNull();
+  });
+
+  it('should render sidebar with a nested collection', () => {
+    const collections = fromJS([
+      { name: 'posts', label: 'Posts', nested: { depth: 10 } },
+    ]).toOrderedMap();
+    const { asFragment } = render(
+      <MemoryRouter>
+        <Sidebar {...props} collections={collections} />
+      </MemoryRouter>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render nested collection with filterTerm', () => {
+    const collections = fromJS([
+      { name: 'posts', label: 'Posts', nested: { depth: 10 } },
+    ]).toOrderedMap();
+    const { asFragment } = render(
+      <MemoryRouter>
+        <Sidebar {...props} collections={collections} filterTerm="dir1/dir2" />
+      </MemoryRouter>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render sidebar without search', () => {
+    const collections = fromJS([{ name: 'posts', label: 'Posts' }]).toOrderedMap();
+    const { asFragment } = render(
+      <MemoryRouter>
+        <Sidebar {...props} collections={collections} isSearchEnabled={false} />
+      </MemoryRouter>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/src/components/Collection/__tests__/__snapshots__/Collection.spec.js.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collection should render connected component 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 28px 18px;
+}
+
+.emotion-2 {
+  padding-left: 280px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-sidebar
+      collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] }"
+      collections="OrderedMap { 0: Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] } }"
+      filterterm=""
+      searchterm=""
+    />
+    <main
+      class="emotion-2 emotion-3"
+    >
+      <mock-collection-top
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] }"
+        newentryurl=""
+      />
+      <mock-collection-controls
+        filter="Map {}"
+        group="Map {}"
+        sortablefields=""
+        viewfilters=""
+        viewgroups=""
+      />
+      <mock-entries-collection
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] }"
+        filterterm=""
+      />
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Collection should render with collection with create url 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 28px 18px;
+}
+
+.emotion-2 {
+  padding-left: 280px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-sidebar
+      collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+      collections="OrderedMap { 0: Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] } }"
+    />
+    <main
+      class="emotion-2 emotion-3"
+    >
+      <mock-collection-top
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+        newentryurl="/collections/pages/new"
+      />
+      <mock-collection-controls />
+      <mock-entries-collection
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+      />
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Collection should render with collection with create url and path 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 28px 18px;
+}
+
+.emotion-2 {
+  padding-left: 280px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-sidebar
+      collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+      collections="OrderedMap { 0: Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] } }"
+      filterterm="dir1/dir2"
+    />
+    <main
+      class="emotion-2 emotion-3"
+    >
+      <mock-collection-top
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+        newentryurl="/collections/pages/new?path=dir1/dir2"
+      />
+      <mock-collection-controls />
+      <mock-entries-collection
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": true }"
+        filterterm="dir1/dir2"
+      />
+    </main>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Collection should render with collection without create url 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  margin: 28px 18px;
+}
+
+.emotion-2 {
+  padding-left: 280px;
+}
+
+<div
+    class="emotion-0 emotion-1"
+  >
+    <mock-sidebar
+      collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": false }"
+      collections="OrderedMap { 0: Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [] } }"
+    />
+    <main
+      class="emotion-2 emotion-3"
+    >
+      <mock-collection-top
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": false }"
+        newentryurl=""
+      />
+      <mock-collection-controls />
+      <mock-entries-collection
+        collection="Map { \\"name\\": \\"pages\\", \\"sortable_fields\\": List [], \\"view_filters\\": List [], \\"view_groups\\": List [], \\"create\\": false }"
+      />
+    </main>
+  </div>
+</DocumentFragment>
+`;