Flatten toc items

- Moves dom_parse_toc into shared/toc
- Adds flatten_items helper
- Updates specs

5 files changed, 122 insertions, 91 deletions

diff --git a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
index 164fde41..09072492 100644
--- a/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
+++ b/spec/frontend/default/components/__snapshots__/table_of_contents_spec.js.snap
@@ -54,23 +54,20 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
             Lorem
           </a>
            
-          <ul
-            class="nav nav-pills flex-column"
+          <!---->
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="nav-link d-block toc-level-1"
+            href="#lorem-"
+            id="Lorem 2-anchor"
           >
-            <li
-              class=""
-            >
-              <a
-                class="nav-link d-block toc-level-1"
-                href="#lorem-"
-                id="Lorem 2-anchor"
-              >
-                Lorem 2
-              </a>
-               
-              <!---->
-            </li>
-          </ul>
+            Lorem 2
+          </a>
+           
+          <!---->
         </li>
         <li
           class=""
@@ -83,65 +80,59 @@ exports[`frontend/default/components/table_of_contents matches snapshot 1`] = `
             Ipsum
           </a>
            
-          <ul
-            class="nav nav-pills flex-column"
+          <!---->
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="nav-link d-block toc-level-1"
+            href="#dolar"
+            id="Dolar-anchor"
           >
-            <li
-              class=""
-            >
-              <a
-                class="nav-link d-block toc-level-1"
-                href="#dolar"
-                id="Dolar-anchor"
-              >
-                Dolar
-              </a>
-               
-              <ul
-                class="nav nav-pills flex-column"
-              >
-                <li
-                  class=""
-                >
-                  <a
-                    class="nav-link d-block toc-level-2"
-                    href="#sit"
-                    id="Sit-anchor"
-                  >
-                    Sit
-                  </a>
-                   
-                  <!---->
-                </li>
-                <li
-                  class=""
-                >
-                  <a
-                    class="nav-link d-block toc-level-2"
-                    href="#amit"
-                    id="Amit-anchor"
-                  >
-                    Amit
-                  </a>
-                   
-                  <!---->
-                </li>
-                <li
-                  class=""
-                >
-                  <a
-                    class="nav-link d-block toc-level-2"
-                    href="#test"
-                    id="Test-anchor"
-                  >
-                    Test
-                  </a>
-                   
-                  <!---->
-                </li>
-              </ul>
-            </li>
-          </ul>
+            Dolar
+          </a>
+           
+          <!---->
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="nav-link d-block toc-level-2"
+            href="#sit"
+            id="Sit-anchor"
+          >
+            Sit
+          </a>
+           
+          <!---->
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="nav-link d-block toc-level-2"
+            href="#amit"
+            id="Amit-anchor"
+          >
+            Amit
+          </a>
+           
+          <!---->
+        </li>
+        <li
+          class=""
+        >
+          <a
+            class="nav-link d-block toc-level-2"
+            href="#test"
+            id="Test-anchor"
+          >
+            Test
+          </a>
+           
+          <!---->
         </li>
         <li
           class="toc-separator"
diff --git a/spec/frontend/default/components/table_of_contents_list_spec.js b/spec/frontend/default/components/table_of_contents_list_spec.js
index 302c153f..bd93f22e 100644
--- a/spec/frontend/default/components/table_of_contents_list_spec.js
+++ b/spec/frontend/default/components/table_of_contents_list_spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { parseTOC } from '../../../../content/frontend/shared/dom_parse_toc';
+import { parseTOC } from '../../../../content/frontend/shared/toc/parse_toc';
 import TableOfContentsList from '../../../../content/frontend/default/components/table_of_contents_list.vue';
 import { createExampleToc } from '../../shared/toc_helper';
 
@@ -64,6 +64,7 @@ describe('frontend/default/components/table_of_contents_list', () => {
           },
           {
             text: 'B',
+            level: 1,
             items: [{ text: 'B_1', items: [{ text: 'B_1_1' }] }],
           },
         ],
@@ -85,9 +86,9 @@ describe('frontend/default/components/table_of_contents_list', () => {
         A: 'toc-level-1',
         A_1: 'toc-level-2',
         A_2: 'toc-level-2',
-        B: 'toc-level-1',
-        B_1: 'toc-level-2',
-        B_1_1: 'toc-level-3',
+        B: 'toc-level-2',
+        B_1: 'toc-level-3',
+        B_1_1: 'toc-level-4',
       });
     });
   });
diff --git a/spec/frontend/default/components/table_of_contents_spec.js b/spec/frontend/default/components/table_of_contents_spec.js
index 6585289d..a4c4863c 100644
--- a/spec/frontend/default/components/table_of_contents_spec.js
+++ b/spec/frontend/default/components/table_of_contents_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount, mount } from '@vue/test-utils';
 import TableOfContents from '../../../../content/frontend/default/components/table_of_contents.vue';
 import * as dom from '../../../../content/frontend/shared/dom';
+import { flattenItems } from '../../../../content/frontend/shared/toc/flatten_items';
 import { createExampleToc } from '../../shared/toc_helper';
 
 const TEST_ITEMS = createExampleToc();
@@ -54,15 +55,17 @@ describe('frontend/default/components/table_of_contents', () => {
 
     it('appends help and feedback item', () => {
       expect(findMainListItems()).toEqual(
-        TEST_ITEMS.concat([
-          {
-            href: `#${TEST_HELP_AND_FEEDBACK_ID}`,
-            id: null,
-            items: [],
-            text: 'Help and feedback',
-            withSeparator: true,
-          },
-        ]),
+        flattenItems(
+          TEST_ITEMS.concat([
+            {
+              href: `#${TEST_HELP_AND_FEEDBACK_ID}`,
+              id: null,
+              items: [],
+              text: 'Help and feedback',
+              withSeparator: true,
+            },
+          ]),
+        ),
       );
     });
   });
@@ -73,7 +76,7 @@ describe('frontend/default/components/table_of_contents', () => {
     });
 
     it('renders toc list', () => {
-      expect(findMainListItems()).toEqual(TEST_ITEMS);
+      expect(findMainListItems()).toEqual(flattenItems(TEST_ITEMS));
     });
 
     it('is initially uncollapsed', () => {
diff --git a/spec/frontend/shared/toc/flatten_items_spec.js b/spec/frontend/shared/toc/flatten_items_spec.js
new file mode 100644
index 00000000..b5965d31
--- /dev/null
+++ b/spec/frontend/shared/toc/flatten_items_spec.js
@@ -0,0 +1,36 @@
+import { flattenItems } from '../../../../content/frontend/shared/toc/flatten_items';
+
+describe('shared/toc/flatten_items', () => {
+  const createItem = (text, ...items) => Object.assign({ text }, items ? { items } : {});
+  const createItemWithLevel = (text, level) => ({ text, level });
+
+  it.each`
+    desc                        | items                                  | expected
+    ${'empty'}                  | ${[]}                                  | ${[]}
+    ${'single item'}            | ${[createItem('a')]}                   | ${[createItemWithLevel('a', 0)]}
+    ${'single item with child'} | ${[createItem('a', createItem('a1'))]} | ${[createItemWithLevel('a', 0), createItemWithLevel('a1', 1)]}
+  `('with items is $desc and level=$level', ({ items, expected }) => {
+    expect(flattenItems(items)).toEqual(expected);
+  });
+
+  it('with multiple items', () => {
+    const items = [
+      createItem('a', createItem('a1')),
+      createItem('b'),
+      createItem('c', createItem('c1'), createItem('c2', createItem('c21')), createItem('c3')),
+    ];
+
+    const expectedItems = [
+      createItemWithLevel('a', 1),
+      createItemWithLevel('a1', 2),
+      createItemWithLevel('b', 1),
+      createItemWithLevel('c', 1),
+      createItemWithLevel('c1', 2),
+      createItemWithLevel('c2', 2),
+      createItemWithLevel('c21', 3),
+      createItemWithLevel('c3', 2),
+    ];
+
+    expect(flattenItems(items, 1)).toEqual(expectedItems);
+  });
+});
diff --git a/spec/frontend/shared/dom_parse_toc_spec.js b/spec/frontend/shared/toc/parse_toc_spec.js
index adcacb90..935764fd 100644
--- a/spec/frontend/shared/dom_parse_toc_spec.js
+++ b/spec/frontend/shared/toc/parse_toc_spec.js
@@ -1,7 +1,7 @@
-import { parseTOC } from '../../../content/frontend/shared/dom_parse_toc';
-import { createItem, createTOCElement, createExampleToc } from './toc_helper';
+import { parseTOC } from '../../../../content/frontend/shared/toc/parse_toc';
+import { createItem, createTOCElement, createExampleToc } from '../toc_helper';
 
-describe('frontend/shared/dom_parse_toc', () => {
+describe('frontend/shared/toc/parse_toc', () => {
   it('parses nested HTML list', () => {
     const list = createExampleToc();
     const el = createTOCElement(list);