test: adds (skipped) test to check backlink wrapper element is stripped

addresses #25
goblindegook · Aug 15, 2019 · 2bca858 · 2bca858
1 parent 98967e2
commit 2bca858
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/src/core.ts b/src/core.ts
@@ -41,7 +41,7 @@ export type Core = CoreDriver &
 interface Adapter {
   setup: (settings: Settings) => Footnote[]
   addListeners: (core: CoreDriver) => () => void
-  cleanup: () => void
+  cleanup: (footnotes: Footnote[]) => void
 }
 
 function createActivate(settings: Settings): FootnoteAction {
@@ -142,8 +142,7 @@ export function createCore(adapter: Adapter, settings: Settings): Core {
     ...core,
     unmount() {
       removeListeners()
-      footnotes.forEach(footnote => footnote.destroy())
-      adapter.cleanup()
+      adapter.cleanup(footnotes)
     }
   }
 }
diff --git a/src/dom/index.ts b/src/dom/index.ts
@@ -23,8 +23,12 @@ function queryAll<E extends Element>(
 function getFirstElementByClass<E extends HTMLElement>(
   container: HTMLElement,
   className: string
-): E | null {
-  return container.querySelector<E>('.' + className)
+): E {
+  return (
+    container.querySelector<E>('.' + className) ||
+    (container.firstElementChild as E) ||
+    container
+  )
 }
 
 function createElementFromHTML(html: string): HTMLElement {
@@ -148,9 +152,8 @@ function createElements(buttonTemplate: string, popoverTemplate: string) {
     popover.dataset.footnotePopover = ''
     popover.dataset.footnoteId = id
 
-    const wrapper = getFirstElementByClass(popover, CLASS_WRAPPER) || popover
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const content = getFirstElementByClass(popover, CLASS_CONTENT)!
+    const wrapper = getFirstElementByClass(popover, CLASS_WRAPPER)
+    const content = getFirstElementByClass(popover, CLASS_CONTENT)
     bindScrollHandler(content, popover)
 
     return { id, button, host, popover, content, wrapper }
@@ -186,7 +189,8 @@ export function setup(settings: Settings): Footnote[] {
     .map(createFootnote)
 }
 
-export function cleanup(): void {
+export function cleanup(footnotes: Footnote[]): void {
+  footnotes.forEach(footnote => footnote.destroy())
   queryAll(document, '.' + CLASS_PRINT_ONLY).forEach(element =>
     element.classList.remove(CLASS_PRINT_ONLY)
   )

diff --git a/test/fixtures/backlink.html b/test/fixtures/backlink.html
@@ -0,0 +1,17 @@
+<article>
+  <p>
+    This paragraph is footnoted.
+    <sup id="fnref:1"><a href="#fn:1">[1]</a></sup>
+  </p>
+  <aside class="footnotes">
+    <hr />
+    <ol>
+      <li id="fn:1">
+        <p>
+          <sup>[<a href="#fnref:1">1</a>]</sup>
+          This footnote has a backlink in a different format.
+        </p>
+      </li>
+    </ol>
+  </aside>
+</article>
diff --git a/test/options/anchorParentSelector.test.ts b/test/options/anchorParentSelector.test.ts
@@ -1,11 +1,16 @@
-import { setDocumentBody, queryAll } from '../helper'
+import { fireEvent } from '@testing-library/dom'
+import { setDocumentBody, getButton, getPopover, queryAll } from '../helper'
 import littlefoot from '../../src'
 
-beforeEach(() => {
-  setDocumentBody('default.html')
-})
-
 test('hides original footnote anchor parent', () => {
+  setDocumentBody('default.html')
   littlefoot({ anchorParentSelector: 'sup' })
   expect(queryAll('sup.footnote-print-only')).toHaveLength(4)
 })
+
+test.skip('strips backlink parent from the footnote body', () => {
+  setDocumentBody('backlink.html')
+  littlefoot()
+  fireEvent.click(getButton('1'))
+  expect(getPopover('1').querySelector('sup')).toBeNull()
+})