Create Vue table_of_contents

Also:
- Updates toc.scss to look for .table-of-contents
- Creates some dom helpers in shared
- Stick to footer directive
- Moves toc collapse button to component
- Fixes issue where collapsed on mobile
  affects full view

1 files changed, 32 insertions, 0 deletions

diff --git a/spec/frontend/shared/dom_spec.js b/spec/frontend/shared/dom_spec.js
new file mode 100644
index 00000000..ceb09708
--- /dev/null
+++ b/spec/frontend/shared/dom_spec.js
@@ -0,0 +1,32 @@
+import { findChildByTagName } from '../../../content/frontend/shared/dom';
+
+describe('frontend/shared/dom', () => {
+  const createElementWithChildren = children => {
+    const el = document.createElement('div');
+
+    children.forEach(tag => {
+      const child = document.createElement(tag);
+      el.appendChild(child);
+    });
+
+    return el;
+  };
+
+  describe('findChildByTagName', () => {
+    it.each`
+      children                   | tagName | expectedIndex
+      ${['div', 'p', 'ul', 'p']} | ${'p'}  | ${1}
+      ${['div', 'ul']}           | ${'p'}  | ${-1}
+      ${['li', 'li', 'li']}      | ${'li'} | ${0}
+      ${[]}                      | ${'li'} | ${-1}
+    `(
+      'with children $children and $tagName, returns $expectedIndex child',
+      ({ children, tagName, expectedIndex }) => {
+        const el = createElementWithChildren(children);
+        const expectedChild = el.childNodes[expectedIndex];
+
+        expect(findChildByTagName(el, tagName)).toBe(expectedChild);
+      },
+    );
+  });
+});