mirror of
https://github.com/oxynote/oxynote.git
synced 2026-10-17 10:59:20 +02:00
107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
import { mountSuspended } from "@nuxt/test-utils/runtime"
|
|
import type { VueWrapper } from "@vue/test-utils"
|
|
import { describe, it } from "vitest"
|
|
import DiffCountPill from "./DiffCountPill.vue"
|
|
import { t } from "~/components/test-helpers"
|
|
|
|
describe("<DiffCountPill>", () => {
|
|
it("shows both counts and names them for a screen reader", async ({
|
|
expect,
|
|
}) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: 2, added: 3 },
|
|
})
|
|
|
|
expect(visibleCounts(wrapper)).toEqual([
|
|
t("editor.diff-change-marker.removed", { count: 2 }),
|
|
t("editor.diff-change-marker.added", { count: 3 }),
|
|
])
|
|
expect(wrapper.get(".sr-only").text()).toBe(
|
|
t("editor.diff-change-marker.label", { removed: 2, added: 3 }),
|
|
)
|
|
})
|
|
|
|
it.for([
|
|
{ name: "removals", removed: 0, added: 1, key: "added" },
|
|
{ name: "additions", removed: 1, added: 0, key: "removed" },
|
|
])(
|
|
"leaves out the side with no $name",
|
|
async ({ removed, added, key }, { expect }) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: removed, added: added },
|
|
})
|
|
|
|
expect(visibleCounts(wrapper)).toEqual([
|
|
t(`editor.diff-change-marker.${key}`, { count: 1 }),
|
|
])
|
|
},
|
|
)
|
|
|
|
it("stacks the counts when vertical", async ({ expect }) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: 1, added: 1, vertical: true },
|
|
})
|
|
|
|
expect(wrapper.classes()).toContain("flex-col")
|
|
})
|
|
|
|
it.for([
|
|
{
|
|
name: "pads the outer edges of a stack more than the shared one",
|
|
lead: false,
|
|
expected: [
|
|
["pt-0.75", "pb-0.5"],
|
|
["pt-0.5", "pb-0.75"],
|
|
],
|
|
},
|
|
{
|
|
name: "pads the top of a stack under a lead-in as a shared edge",
|
|
lead: true,
|
|
expected: [
|
|
["pt-0.5", "pb-0.5"],
|
|
["pt-0.5", "pb-0.75"],
|
|
],
|
|
},
|
|
])("$name", async ({ lead, expected }, { expect }) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: 1, added: 1, vertical: true },
|
|
slots: lead ? { default: () => h("i") } : {},
|
|
})
|
|
|
|
expect(
|
|
wrapper
|
|
.findAll("[aria-hidden='true']")
|
|
.map((cell) =>
|
|
cell
|
|
.classes()
|
|
.filter((c) => c.startsWith("pt-") || c.startsWith("pb-")),
|
|
),
|
|
).toEqual(expected)
|
|
})
|
|
|
|
it("pads a lone stacked count as an outer edge on both sides", async ({
|
|
expect,
|
|
}) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: 0, added: 2, vertical: true },
|
|
})
|
|
|
|
expect(wrapper.get("[aria-hidden='true']").classes()).toEqual(
|
|
expect.arrayContaining(["pt-0.75", "pb-0.75"]),
|
|
)
|
|
})
|
|
|
|
it("puts its lead-in before the counts", async ({ expect }) => {
|
|
const wrapper = await mountSuspended(DiffCountPill, {
|
|
props: { removed: 1, added: 1 },
|
|
slots: { default: () => h("i", { class: "lead" }) },
|
|
})
|
|
|
|
expect(wrapper.get(".lead").element.previousElementSibling).toBeNull()
|
|
})
|
|
})
|
|
|
|
function visibleCounts(wrapper: VueWrapper): string[] {
|
|
return wrapper.findAll("[aria-hidden='true']").map((el) => el.text())
|
|
}
|