mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-04 11:03:50 +08:00
168c4b75fd
This commit ensures inline footnote tooltips are closed when their trigger element is removed from the page. - Refactors inline footnotes to use a Glimmer component and DTooltip - Replaces anchor triggers with components rendered via Glimmer - Adds acceptance test to verify tooltip closes when link inside tooltip is clicked - Improves reliability of tooltip teardown on navigation or interaction
70 lines
2.6 KiB
JavaScript
70 lines
2.6 KiB
JavaScript
import { click, triggerEvent, visit } from "@ember/test-helpers";
|
|
import { test } from "qunit";
|
|
import { cloneJSON } from "discourse/lib/object";
|
|
import topicFixtures from "discourse/tests/fixtures/topic";
|
|
import { acceptance } from "discourse/tests/helpers/qunit-helpers";
|
|
|
|
const TOOLTIP_SELECTOR =
|
|
".fk-d-tooltip__content[data-identifier='inline-footnote']";
|
|
|
|
acceptance("Discourse Footnote Plugin", function (needs) {
|
|
needs.settings({
|
|
display_footnotes_inline: true,
|
|
});
|
|
|
|
needs.pretender((server, helper) => {
|
|
server.get("/t/45.json", () => {
|
|
let topic = cloneJSON(topicFixtures["/t/28830/1.json"]);
|
|
topic["post_stream"]["posts"][0]["cooked"] = `
|
|
<p>Lorem ipsum dolor sit amet<sup class="footnote-ref"><a href="#footnote-17-1" id="footnote-ref-17-1">[1]</a></sup></p>
|
|
<p class="second">Second reference should also work. <sup class="footnote-ref"><a href="#footnote-17-1" id="footnote-ref-17-0">[1]</a></sup></p>
|
|
<p class="other">Other page should close<sup class="footnote-ref"><a href="#footnote-17-2" id="footnote-ref-17-2">[2]</a></sup></p>
|
|
<hr class="footnotes-sep">
|
|
<ol class="footnotes-list">
|
|
<li id="footnote-17-1" class="footnote-item">
|
|
<p>consectetur adipiscing elit <a href="#footnote-ref-17-1" class="footnote-backref">↩︎</a></p>
|
|
</li>
|
|
<li id="footnote-17-2" class="footnote-item">
|
|
<p><a class="link-in-tooltip" href="/">Index ↩︎</a></p>
|
|
</li>
|
|
</ol>
|
|
`;
|
|
return helper.response(topic);
|
|
});
|
|
});
|
|
|
|
test("displays the footnote on click", async function (assert) {
|
|
await visit("/t/-/45");
|
|
|
|
// open
|
|
await click(".expand-footnote");
|
|
|
|
assert.dom(TOOLTIP_SELECTOR).hasText("consectetur adipiscing elit ↩︎");
|
|
|
|
// close by clicking outside
|
|
await triggerEvent(".d-header", "pointerdown");
|
|
assert.dom(TOOLTIP_SELECTOR).doesNotExist();
|
|
|
|
// open again
|
|
await click(".expand-footnote");
|
|
assert.dom(TOOLTIP_SELECTOR).hasText("consectetur adipiscing elit ↩︎");
|
|
});
|
|
|
|
test("clicking a second footnote with same name works", async function (assert) {
|
|
await visit("/t/-/45");
|
|
|
|
await click(".second .expand-footnote");
|
|
assert.dom(TOOLTIP_SELECTOR).hasText("consectetur adipiscing elit ↩︎");
|
|
});
|
|
|
|
test("closes tooltip when clicking link within tooltip content", async function (assert) {
|
|
await visit("/t/-/45");
|
|
|
|
// open
|
|
await click(".other .expand-footnote");
|
|
assert.dom(TOOLTIP_SELECTOR).hasText("Index ↩︎");
|
|
|
|
await click(".link-in-tooltip");
|
|
assert.dom(TOOLTIP_SELECTOR).doesNotExist();
|
|
});
|
|
});
|
