+ ${texts.embedConsent.replace("{category}", label)} +
+${renderInline(paragraph.join(" "))}
`); + paragraph = []; + }; + + const flushList = () => { + if (list) { + const items = list.items.map( + (item) => html`-
+ ${items}
+
-
+ ${items}
+
${content}
`); + else if (level === 2) + blocks.push(html`${content}
`); + else blocks.push(html`${content}
`); + } else if (bullet || numbered) { + flushParagraph(); + const ordered = !!numbered; + if (list && list.ordered !== ordered) flushList(); + if (!list) list = { ordered, items: [] }; + const item = bullet ?? numbered; + if (item) list.items.push(item[1]); + } else { + flushList(); + paragraph.push(line); + } + }); + flush(); + return blocks.length ? blocks : [html`${nothing}`]; +} diff --git a/packages/ecc-utils-design/src/components/compliance-footer/tests/compliance-footer.test.ts b/packages/ecc-utils-design/src/components/compliance-footer/tests/compliance-footer.test.ts new file mode 100644 index 00000000..c056e625 --- /dev/null +++ b/packages/ecc-utils-design/src/components/compliance-footer/tests/compliance-footer.test.ts @@ -0,0 +1,337 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { expect, fixture, html, oneEvent, waitUntil } from "@open-wc/testing"; +import { render } from "lit"; +import sinon from "sinon"; +import "../index.js"; +import type EccUtilsDesignComplianceFooter from "../compliance-footer.js"; +import { + ComplianceConfig, + PREFERENCES_REQUESTED_EVENT, + footerItems, + saveConsent, +} from "../../cookie-consent/consent.js"; +import { renderMarkdown } from "../markdown.js"; + +const items = (el: EccUtilsDesignComplianceFooter) => + Array.from(el.shadowRoot?.querySelectorAll("[part=item]") ?? []); + +const item = (el: EccUtilsDesignComplianceFooter, label: string) => + items(el) + .map((li) => li.querySelector("a, button") as HTMLElement) + .find((node) => node.textContent?.trim() === label) as HTMLElement; + +const dialog = (el: EccUtilsDesignComplianceFooter) => + el.shadowRoot?.querySelector("dialog") as HTMLDialogElement; + +const COOKIES = { + categories: [{ id: "embeds", label: "Embedded content" }], +}; + +describe("footer items", () => { + it("shows only the defaults that have an action", () => { + expect(footerItems().map((i) => i.id)).to.deep.equal([ + "cookie-preferences", + ]); + }); + + it("changes, hides and adds items", () => { + const result = footerItems({ + items: [ + { + id: "privacy-policy", + action: { type: "link", href: "https://example.org/privacy" }, + }, + { id: "cookie-preferences", hidden: true }, + { + id: "status", + label: "Status", + action: { type: "link", href: "/status" }, + }, + { + id: "imprint", + label: "Impressum", + action: { type: "page", markdown: "# Impressum" }, + }, + ], + }); + + expect(result.map((i) => [i.id, i.label])).to.deep.equal([ + ["privacy-policy", "Privacy Policy"], + ["imprint", "Impressum"], + ["status", "Status"], + ]); + }); + + it("uses only configured items when asked", () => { + const result = footerItems({ + replaceDefaults: true, + items: [ + { id: "a", label: "A", action: { type: "preferences" } }, + { id: "b", label: "B" }, + ], + }); + + expect(result.map((i) => i.id)).to.deep.equal(["a"]); + }); +}); + +describe("markdown pages", () => { + const rendered = (markdown: string) => { + const container = document.createElement("div"); + render(renderMarkdown(markdown), container); + return container; + }; + + it("renders headings, paragraphs, lists and links", () => { + const container = rendered( + "# Privacy\n\nWe keep **little** data,\nfor *you*.\n\n- one\n- two\n\n1. first\n\nMail [us](mailto:dpo@example.org)." + ); + + expect(container.querySelector("h3")?.textContent).to.equal("Privacy"); + expect(container.querySelector("p strong")?.textContent).to.equal("little"); + expect(container.querySelector("p em")?.textContent).to.equal("you"); + expect(container.querySelectorAll("ul li")).to.have.length(2); + expect(container.querySelectorAll("ol li")).to.have.length(1); + expect(container.querySelector("a")?.getAttribute("href")).to.equal( + "mailto:dpo@example.org" + ); + }); + + it("opens only links to other origins in a new tab", () => { + const container = rendered( + "[ours](/terms) and [theirs](https://other.example.org/)" + ); + const [ours, theirs] = Array.from(container.querySelectorAll("a")); + + expect(ours.hasAttribute("target")).to.equal(false); + expect(theirs.getAttribute("target")).to.equal("_blank"); + expect(theirs.getAttribute("rel")).to.equal("noopener noreferrer"); + }); + + it("escapes HTML and drops unsafe links", () => { + const container = rendered( + '
+
+
+
+ + ${texts.bannerTitle} +
+${texts.bannerText} ${this.renderPolicyLink()}
+
+ this.openPreferences()}
+ >${texts.customize}
+ this.save(this.all(false))}
+ >${texts.rejectAll}
+ this.save(this.all(true))}
+ >${texts.acceptAll}
+
+