@1doc/1ds-react 2.9.0 → 2.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +653 -0
- package/dist/components/Accordion/Accordion.css +13 -0
- package/dist/components/Accordion/Accordion.d.ts +9 -0
- package/dist/components/Accordion/Accordion.js +18 -5
- package/dist/components/AppSubheader/AppSubheader.css +10 -1
- package/dist/components/AttachmentCard/AttachmentCard.css +10 -8
- package/dist/components/AttachmentCard/AttachmentCard.d.ts +3 -0
- package/dist/components/AttachmentCard/AttachmentCard.js +8 -1
- package/dist/components/Badge/Badge.css +27 -5
- package/dist/components/Badge/Badge.d.ts +20 -4
- package/dist/components/Badge/Badge.js +6 -0
- package/dist/components/Button/Button.css +5 -0
- package/dist/components/Button/Button.d.ts +3 -0
- package/dist/components/Button/Button.js +1 -0
- package/dist/components/Calendar/Calendar.css +10 -0
- package/dist/components/Calendar/Calendar.d.ts +10 -6
- package/dist/components/Calendar/Calendar.js +6 -1
- package/dist/components/Coachmark/Coachmark.css +10 -0
- package/dist/components/Coachmark/Coachmark.d.ts +14 -1
- package/dist/components/Coachmark/Coachmark.js +51 -5
- package/dist/components/ColorPicker/ColorPicker.css +8 -1
- package/dist/components/ColorPicker/ColorPicker.d.ts +2 -2
- package/dist/components/DataTable/DataTable.css +216 -0
- package/dist/components/DataTable/DataTable.d.ts +70 -2
- package/dist/components/DataTable/DataTable.js +293 -6
- package/dist/components/DescriptionList/DescriptionList.css +14 -0
- package/dist/components/DescriptionList/DescriptionList.d.ts +3 -0
- package/dist/components/DescriptionList/DescriptionList.js +1 -0
- package/dist/components/EmptyState/EmptyState.d.ts +4 -2
- package/dist/components/EmptyState/EmptyState.js +2 -2
- package/dist/components/Input/Input.css +30 -0
- package/dist/components/Input/Input.d.ts +10 -0
- package/dist/components/Input/Input.js +3 -1
- package/dist/components/List/ListItem.d.ts +14 -2
- package/dist/components/List/ListItem.js +3 -2
- package/dist/components/Modal/Modal.css +19 -0
- package/dist/components/Modal/Modal.d.ts +7 -0
- package/dist/components/Modal/Modal.js +1 -0
- package/dist/components/RichTextEditor/RichTextEditor.css +47 -0
- package/dist/components/RichTextEditor/RichTextEditor.d.ts +22 -8
- package/dist/components/RichTextEditor/RichTextEditor.js +460 -3
- package/dist/components/SegmentedControl/SegmentedControl.css +70 -0
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +5 -0
- package/dist/components/SegmentedControl/SegmentedControl.js +5 -1
- package/dist/components/Select/Select.css +122 -2
- package/dist/components/Select/Select.d.ts +33 -4
- package/dist/components/Select/Select.js +256 -35
- package/dist/components/StatCard/StatCard.css +73 -0
- package/dist/components/StatCard/StatCard.d.ts +12 -0
- package/dist/components/StatCard/StatCard.js +11 -1
- package/dist/components/Tabs/Tabs.css +11 -0
- package/dist/components/Tabs/Tabs.d.ts +7 -0
- package/dist/components/Tabs/Tabs.js +7 -1
- package/dist/components/Tag/Tag.css +3 -1
- package/dist/components/Toast/Toast.css +32 -0
- package/dist/components/Toast/Toast.d.ts +18 -0
- package/dist/components/Toast/Toast.js +14 -1
- package/dist/components/Toast/ToastStack.js +8 -1
- package/dist/teste/AccordionControlado.test.d.ts +1 -0
- package/dist/teste/AccordionControlado.test.js +73 -0
- package/dist/teste/AccordionTituloNeutro.test.d.ts +1 -0
- package/dist/teste/AccordionTituloNeutro.test.js +23 -0
- package/dist/teste/AppSubheaderRegiao.test.d.ts +1 -0
- package/dist/teste/AppSubheaderRegiao.test.js +13 -0
- package/dist/teste/AttachmentCardLista.test.d.ts +1 -0
- package/dist/teste/AttachmentCardLista.test.js +49 -0
- package/dist/teste/AttachmentCardSm.test.d.ts +1 -0
- package/dist/teste/AttachmentCardSm.test.js +26 -0
- package/dist/teste/BadgeAttachedTomEPadding.test.d.ts +1 -0
- package/dist/teste/BadgeAttachedTomEPadding.test.js +43 -0
- package/dist/teste/BadgeNeutroColado.test.d.ts +1 -0
- package/dist/teste/BadgeNeutroColado.test.js +11 -0
- package/dist/teste/BadgeTag.test.js +13 -0
- package/dist/teste/ButtonDensidade.test.d.ts +1 -0
- package/dist/teste/ButtonDensidade.test.js +28 -0
- package/dist/teste/CalendarCabecalho.test.d.ts +1 -0
- package/dist/teste/CalendarCabecalho.test.js +11 -0
- package/dist/teste/CalendarCompacto.test.d.ts +1 -0
- package/dist/teste/CalendarCompacto.test.js +29 -0
- package/dist/teste/CoachmarkSemVeu.test.d.ts +1 -0
- package/dist/teste/CoachmarkSemVeu.test.js +85 -0
- package/dist/teste/CoachmarkUmPasso.test.d.ts +1 -0
- package/dist/teste/CoachmarkUmPasso.test.js +34 -0
- package/dist/teste/ColorPickerXs.test.d.ts +1 -0
- package/dist/teste/ColorPickerXs.test.js +21 -0
- package/dist/teste/DataTableArvoreEVariantes.test.d.ts +1 -0
- package/dist/teste/DataTableArvoreEVariantes.test.js +190 -0
- package/dist/teste/DataTableCompactaETom.test.d.ts +1 -0
- package/dist/teste/DataTableCompactaETom.test.js +69 -0
- package/dist/teste/DescriptionListCompacta.test.d.ts +1 -0
- package/dist/teste/DescriptionListCompacta.test.js +22 -0
- package/dist/teste/EmptyStateTituloRico.test.d.ts +1 -0
- package/dist/teste/EmptyStateTituloRico.test.js +23 -0
- package/dist/teste/InputAgrupado.test.d.ts +1 -0
- package/dist/teste/InputAgrupado.test.js +24 -0
- package/dist/teste/InputGhost.test.d.ts +1 -0
- package/dist/teste/InputGhost.test.js +32 -0
- package/dist/teste/ListItemTooltipStandalone.test.d.ts +1 -0
- package/dist/teste/ListItemTooltipStandalone.test.js +39 -0
- package/dist/teste/ModalProporcoes1Doc.test.d.ts +1 -0
- package/dist/teste/ModalProporcoes1Doc.test.js +32 -0
- package/dist/teste/RichTextEditorAlinhaImagemTabela.test.d.ts +1 -0
- package/dist/teste/RichTextEditorAlinhaImagemTabela.test.js +212 -0
- package/dist/teste/RichTextEditorEstiloDeTexto.test.d.ts +1 -0
- package/dist/teste/RichTextEditorEstiloDeTexto.test.js +120 -0
- package/dist/teste/SegmentedControlContador.test.d.ts +1 -0
- package/dist/teste/SegmentedControlContador.test.js +39 -0
- package/dist/teste/SegmentedControlSuperficie.test.d.ts +1 -0
- package/dist/teste/SegmentedControlSuperficie.test.js +39 -0
- package/dist/teste/SelectAbertoControladoEFlutuante.test.d.ts +1 -0
- package/dist/teste/SelectAbertoControladoEFlutuante.test.js +145 -0
- package/dist/teste/SelectFiltroCorETamanho.test.d.ts +1 -0
- package/dist/teste/SelectFiltroCorETamanho.test.js +77 -0
- package/dist/teste/SelectItemComEscopo.test.d.ts +1 -0
- package/dist/teste/SelectItemComEscopo.test.js +54 -0
- package/dist/teste/SelectListaFiltro.test.d.ts +1 -0
- package/dist/teste/SelectListaFiltro.test.js +102 -0
- package/dist/teste/StatCardSecundariaETom.test.d.ts +1 -0
- package/dist/teste/StatCardSecundariaETom.test.js +45 -0
- package/dist/teste/StatCardTamanhoSm.test.d.ts +1 -0
- package/dist/teste/StatCardTamanhoSm.test.js +32 -0
- package/dist/teste/TabsCompacta.test.d.ts +1 -0
- package/dist/teste/TabsCompacta.test.js +35 -0
- package/dist/teste/TagPositivoTingido.test.d.ts +1 -0
- package/dist/teste/TagPositivoTingido.test.js +54 -0
- package/dist/teste/ToastAcaoEDetalhes.test.d.ts +1 -0
- package/dist/teste/ToastAcaoEDetalhes.test.js +94 -0
- package/dist/teste/lerArquivo.d.ts +1 -0
- package/dist/teste/lerArquivo.js +12 -0
- package/dist/utils/html-seguro.d.ts +19 -1
- package/dist/utils/html-seguro.js +113 -2
- package/dist/utils/toast.d.ts +10 -1
- package/dist/utils/toast.js +2 -1
- package/package.json +3 -3
- package/src/teste/AccordionControlado.test.tsx +87 -0
- package/src/teste/AccordionTituloNeutro.test.tsx +25 -0
- package/src/teste/AppSubheaderRegiao.test.tsx +17 -0
- package/src/teste/AttachmentCardLista.test.tsx +53 -0
- package/src/teste/AttachmentCardSm.test.tsx +29 -0
- package/src/teste/BadgeAttachedTomEPadding.test.tsx +60 -0
- package/src/teste/BadgeNeutroColado.test.tsx +15 -0
- package/src/teste/BadgeTag.test.tsx +21 -0
- package/src/teste/ButtonDensidade.test.tsx +40 -0
- package/src/teste/CalendarCabecalho.test.tsx +11 -0
- package/src/teste/CalendarCompacto.test.tsx +37 -0
- package/src/teste/CoachmarkSemVeu.test.tsx +101 -0
- package/src/teste/CoachmarkUmPasso.test.tsx +45 -0
- package/src/teste/ColorPickerXs.test.tsx +22 -0
- package/src/teste/DataTableArvoreEVariantes.test.tsx +240 -0
- package/src/teste/DataTableCompactaETom.test.tsx +85 -0
- package/src/teste/DescriptionListCompacta.test.tsx +24 -0
- package/src/teste/EmptyStateTituloRico.test.tsx +34 -0
- package/src/teste/InputAgrupado.test.tsx +26 -0
- package/src/teste/InputGhost.test.tsx +42 -0
- package/src/teste/ListItemTooltipStandalone.test.tsx +64 -0
- package/src/teste/ModalProporcoes1Doc.test.tsx +36 -0
- package/src/teste/RichTextEditorAlinhaImagemTabela.test.tsx +238 -0
- package/src/teste/RichTextEditorEstiloDeTexto.test.tsx +137 -0
- package/src/teste/SegmentedControlContador.test.tsx +43 -0
- package/src/teste/SegmentedControlSuperficie.test.tsx +52 -0
- package/src/teste/SelectAbertoControladoEFlutuante.test.tsx +180 -0
- package/src/teste/SelectFiltroCorETamanho.test.tsx +90 -0
- package/src/teste/SelectItemComEscopo.test.tsx +69 -0
- package/src/teste/SelectListaFiltro.test.tsx +120 -0
- package/src/teste/StatCardSecundariaETom.test.tsx +51 -0
- package/src/teste/StatCardTamanhoSm.test.tsx +42 -0
- package/src/teste/TabsCompacta.test.tsx +45 -0
- package/src/teste/TagPositivoTingido.test.tsx +60 -0
- package/src/teste/ToastAcaoEDetalhes.test.tsx +109 -0
- package/src/teste/lerArquivo.ts +13 -0
- package/src/utils/html-seguro.ts +105 -2
- package/src/utils/toast.ts +12 -2
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render, screen } from "@testing-library/react";
|
|
4
|
+
import Coachmark from "../components/Coachmark/Coachmark";
|
|
5
|
+
const UM = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
|
|
6
|
+
const DOIS = [...UM, { title: "Pronto", content: "Sem alvo." }];
|
|
7
|
+
function Pagina({ passos, ...resto }) {
|
|
8
|
+
return (_jsxs("div", { children: [_jsx("button", { id: "alvo-a", children: "A" }), _jsx(Coachmark, { steps: passos, open: true, ...resto })] }));
|
|
9
|
+
}
|
|
10
|
+
describe("Coachmark · contador", () => {
|
|
11
|
+
it("com um passo só não há contador, nem visível nem na região aria-live", () => {
|
|
12
|
+
const { baseElement } = render(_jsx(Pagina, { passos: UM }));
|
|
13
|
+
expect(screen.queryByText("1 de 1")).toBeNull();
|
|
14
|
+
expect(baseElement.textContent).not.toContain("1 de 1");
|
|
15
|
+
expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("Novo: arrastar");
|
|
16
|
+
});
|
|
17
|
+
it("com um passo e modal={false} também não (a dica pontual)", () => {
|
|
18
|
+
const { baseElement } = render(_jsx(Pagina, { passos: UM, modal: false }));
|
|
19
|
+
expect(baseElement.textContent).not.toContain("1 de 1");
|
|
20
|
+
});
|
|
21
|
+
it("com dois passos o contador aparece e o leitor de tela o ouve", () => {
|
|
22
|
+
const { baseElement } = render(_jsx(Pagina, { passos: DOIS }));
|
|
23
|
+
expect(screen.getByText("1 de 2")).toBeInTheDocument();
|
|
24
|
+
expect(baseElement.querySelector(".umds-coachmark__sr")?.textContent).toBe("1 de 2: Novo: arrastar");
|
|
25
|
+
});
|
|
26
|
+
it("counterLabel segue valendo com mais de um passo", () => {
|
|
27
|
+
render(_jsx(Pagina, { passos: DOIS, counterLabel: "Step {current} of {total}" }));
|
|
28
|
+
expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
|
|
29
|
+
});
|
|
30
|
+
it("o botão do último passo continua sendo Concluir", () => {
|
|
31
|
+
render(_jsx(Pagina, { passos: UM }));
|
|
32
|
+
expect(screen.getByRole("button", { name: "Concluir" })).toBeInTheDocument();
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render, screen } from "@testing-library/react";
|
|
4
|
+
import ColorPicker from "../components/ColorPicker/ColorPicker";
|
|
5
|
+
describe("ColorPicker · size xs", () => {
|
|
6
|
+
it("xs escreve a classe do tamanho; sm e md seguem como eram", () => {
|
|
7
|
+
const { container, rerender } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs" }));
|
|
8
|
+
const raiz = () => container.firstElementChild;
|
|
9
|
+
expect(raiz()).toHaveClass("umds-color-picker--xs");
|
|
10
|
+
rerender(_jsx(ColorPicker, { ariaLabel: "Cor", size: "sm" }));
|
|
11
|
+
expect(raiz()).toHaveClass("umds-color-picker--sm");
|
|
12
|
+
expect(raiz()).not.toHaveClass("umds-color-picker--xs");
|
|
13
|
+
rerender(_jsx(ColorPicker, { ariaLabel: "Cor" }));
|
|
14
|
+
expect(raiz()).toHaveClass("umds-color-picker--md");
|
|
15
|
+
});
|
|
16
|
+
it("no xs a amostra escolhida mantém a marcação e o aria-checked", () => {
|
|
17
|
+
const { container } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs", defaultValue: "--umds-primitive-red-pure" }));
|
|
18
|
+
expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
|
|
19
|
+
expect(container.querySelectorAll(".umds-color-picker__swatch--selected")).toHaveLength(1);
|
|
20
|
+
});
|
|
21
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it, vi } from "vitest";
|
|
3
|
+
import { render, screen, fireEvent } from "@testing-library/react";
|
|
4
|
+
import { faBoxOpen } from "@fortawesome/free-solid-svg-icons";
|
|
5
|
+
import DataTable from "../components/DataTable/DataTable";
|
|
6
|
+
const COLUNAS = [
|
|
7
|
+
{ key: "nome", label: "Nome" },
|
|
8
|
+
{ key: "sigla", label: "Sigla" },
|
|
9
|
+
];
|
|
10
|
+
const DADOS = [
|
|
11
|
+
{ id: "a", nome: "Ana", sigla: "SADM" },
|
|
12
|
+
{ id: "b", nome: "Bruno", sigla: "SOBR" },
|
|
13
|
+
{ id: "c", nome: "Carla", sigla: "SEFIN" },
|
|
14
|
+
];
|
|
15
|
+
describe("DataTable: cabeçalho, zebra e destaque", () => {
|
|
16
|
+
it("headerVariant dark e headerUppercase ligam as classes; sem as props, nada muda", () => {
|
|
17
|
+
const { container, rerender } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS }));
|
|
18
|
+
const raiz = () => container.querySelector(".umds-datatable");
|
|
19
|
+
expect(raiz().className).not.toMatch(/header-dark|header-uppercase|striped|header-hidden/);
|
|
20
|
+
rerender(_jsx(DataTable, { columns: COLUNAS, data: DADOS, headerVariant: "dark", headerUppercase: true, striped: true, hideHeader: true }));
|
|
21
|
+
expect(raiz()).toHaveClass("umds-datatable--header-dark");
|
|
22
|
+
expect(raiz()).toHaveClass("umds-datatable--header-uppercase");
|
|
23
|
+
expect(raiz()).toHaveClass("umds-datatable--striped");
|
|
24
|
+
expect(raiz()).toHaveClass("umds-datatable--header-hidden");
|
|
25
|
+
});
|
|
26
|
+
it("hideHeader não remove o cabeçalho: as colunas continuam nomeadas", () => {
|
|
27
|
+
render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, hideHeader: true }));
|
|
28
|
+
expect(screen.getAllByRole("columnheader")).toHaveLength(2);
|
|
29
|
+
});
|
|
30
|
+
it("striped marca as linhas ímpares", () => {
|
|
31
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, striped: true }));
|
|
32
|
+
const linhas = [...container.querySelectorAll("tbody tr")];
|
|
33
|
+
expect(linhas.map((l) => l.classList.contains("umds-datatable__row--striped"))).toEqual([false, true, false]);
|
|
34
|
+
});
|
|
35
|
+
it("selectedRowKeys destaca a linha sem checkbox e marca aria-selected", () => {
|
|
36
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowKey: "id", selectedRowKeys: ["b"] }));
|
|
37
|
+
const linhas = [...container.querySelectorAll("tbody tr")];
|
|
38
|
+
expect(linhas[1]).toHaveClass("umds-datatable__row--selected");
|
|
39
|
+
expect(linhas[1]).toHaveClass("umds-datatable__row--highlighted");
|
|
40
|
+
expect(linhas[1]).toHaveAttribute("aria-selected", "true");
|
|
41
|
+
expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
|
|
42
|
+
expect(linhas[0]).not.toHaveAttribute("aria-selected");
|
|
43
|
+
expect(screen.queryByRole("checkbox")).toBeNull();
|
|
44
|
+
});
|
|
45
|
+
it("isRowSelected destaca por função", () => {
|
|
46
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, isRowSelected: (row) => row.sigla === "SEFIN" }));
|
|
47
|
+
const linhas = [...container.querySelectorAll("tbody tr")];
|
|
48
|
+
expect(linhas[2]).toHaveClass("umds-datatable__row--selected");
|
|
49
|
+
expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
|
|
50
|
+
});
|
|
51
|
+
it("emptyIcon e emptyDescription entram no estado vazio", () => {
|
|
52
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [], emptyMessage: "Nada por aqui", emptyDescription: "Ajuste o filtro de setor.", emptyIcon: faBoxOpen }));
|
|
53
|
+
expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
|
|
54
|
+
expect(screen.getByText("Ajuste o filtro de setor.")).toBeInTheDocument();
|
|
55
|
+
expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "box-open");
|
|
56
|
+
});
|
|
57
|
+
it("o ícone padrão do estado vazio continua o inbox", () => {
|
|
58
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [] }));
|
|
59
|
+
expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "inbox");
|
|
60
|
+
expect(container.querySelector(".umds-datatable__empty-desc")).toBeNull();
|
|
61
|
+
});
|
|
62
|
+
it("compact na tabela de documento soma as duas classes", () => {
|
|
63
|
+
const { container } = render(_jsx(DataTable, { variant: "document", density: "compact", columns: COLUNAS, data: DADOS }));
|
|
64
|
+
const raiz = container.querySelector(".umds-datatable");
|
|
65
|
+
expect(raiz).toHaveClass("umds-datatable--document");
|
|
66
|
+
expect(raiz).toHaveClass("umds-datatable--compact");
|
|
67
|
+
});
|
|
68
|
+
});
|
|
69
|
+
const ARVORE = [
|
|
70
|
+
{
|
|
71
|
+
id: "gab",
|
|
72
|
+
nome: "Gabinete",
|
|
73
|
+
sigla: "GAB",
|
|
74
|
+
children: [
|
|
75
|
+
{ id: "sadm", nome: "Administração", sigla: "SADM", children: [{ id: "rh", nome: "Recursos Humanos", sigla: "RH" }] },
|
|
76
|
+
{ id: "sobr", nome: "Obras", sigla: "SOBR" },
|
|
77
|
+
],
|
|
78
|
+
},
|
|
79
|
+
{ id: "sefin", nome: "Finanças", sigla: "SEFIN" },
|
|
80
|
+
];
|
|
81
|
+
const linhas = (c) => [...c.querySelectorAll("tbody tr")];
|
|
82
|
+
const nomes = (c) => linhas(c).map((l) => l.querySelectorAll("td")[0].textContent);
|
|
83
|
+
describe("DataTable treeData", () => {
|
|
84
|
+
it("vira treegrid; fechada, mostra só as raízes, com aria-level, posinset, setsize e expanded", () => {
|
|
85
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id" }));
|
|
86
|
+
expect(screen.getByRole("treegrid")).toBeInTheDocument();
|
|
87
|
+
expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
|
|
88
|
+
const [gab, fin] = linhas(container);
|
|
89
|
+
expect(gab).toHaveAttribute("aria-level", "1");
|
|
90
|
+
expect(gab).toHaveAttribute("aria-posinset", "1");
|
|
91
|
+
expect(gab).toHaveAttribute("aria-setsize", "2");
|
|
92
|
+
expect(gab).toHaveAttribute("aria-expanded", "false");
|
|
93
|
+
expect(fin).not.toHaveAttribute("aria-expanded");
|
|
94
|
+
});
|
|
95
|
+
it("o botão expande e recolhe, com nome acessível e onExpand", () => {
|
|
96
|
+
const aoExpandir = vi.fn();
|
|
97
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", onExpand: aoExpandir }));
|
|
98
|
+
fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
|
|
99
|
+
expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
|
|
100
|
+
expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
|
|
101
|
+
const filha = linhas(container)[1];
|
|
102
|
+
expect(filha).toHaveAttribute("aria-level", "2");
|
|
103
|
+
expect(filha).toHaveAttribute("aria-expanded", "false");
|
|
104
|
+
fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[0]);
|
|
105
|
+
expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
|
|
106
|
+
expect(aoExpandir).toHaveBeenLastCalledWith([], ARVORE[0], false);
|
|
107
|
+
});
|
|
108
|
+
it("expandLabel e collapseLabel traduzem os botões", () => {
|
|
109
|
+
render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandedKeys: ["gab"], expandLabel: "Expand", collapseLabel: "Collapse" }));
|
|
110
|
+
expect(screen.getByRole("button", { name: "Collapse" })).toBeInTheDocument();
|
|
111
|
+
expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
|
|
112
|
+
});
|
|
113
|
+
it("defaultExpandAll abre tudo, e o primeiro recolher parte da árvore aberta", () => {
|
|
114
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
|
|
115
|
+
expect(nomes(container)).toEqual(["Gabinete", "Administração", "Recursos Humanos", "Obras", "Finanças"]);
|
|
116
|
+
expect(linhas(container)[2]).toHaveAttribute("aria-level", "3");
|
|
117
|
+
fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[1]);
|
|
118
|
+
expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
|
|
119
|
+
});
|
|
120
|
+
it("expandedKeys controla: o clique avisa, mas só muda quando o pai muda a prop", () => {
|
|
121
|
+
const aoExpandir = vi.fn();
|
|
122
|
+
const { container, rerender } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", expandedKeys: [], onExpand: aoExpandir }));
|
|
123
|
+
fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
|
|
124
|
+
expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
|
|
125
|
+
expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
|
|
126
|
+
rerender(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", expandedKeys: ["gab"], onExpand: aoExpandir }));
|
|
127
|
+
expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
|
|
128
|
+
});
|
|
129
|
+
it("sem rowKey, a chave é o caminho de índices", () => {
|
|
130
|
+
const aoExpandir = vi.fn();
|
|
131
|
+
render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, onExpand: aoExpandir }));
|
|
132
|
+
fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
|
|
133
|
+
expect(aoExpandir.mock.calls[0][0]).toEqual(["0"]);
|
|
134
|
+
});
|
|
135
|
+
it("desenha os fios: tee para quem tem irmã depois, elbow para a última, line para o que continua", () => {
|
|
136
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
|
|
137
|
+
const guias = (l) => [...l.querySelectorAll(".umds-datatable__guide")].map((g) => g.className.replace("umds-datatable__guide umds-datatable__guide--", ""));
|
|
138
|
+
const [gab, sadm, rh, sobr] = linhas(container);
|
|
139
|
+
expect(guias(gab)).toEqual([]);
|
|
140
|
+
expect(guias(sadm)).toEqual(["tee"]);
|
|
141
|
+
expect(guias(rh)).toEqual(["line", "elbow"]);
|
|
142
|
+
expect(guias(sobr)).toEqual(["elbow"]);
|
|
143
|
+
});
|
|
144
|
+
it("o recuo cresce por nível", () => {
|
|
145
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
|
|
146
|
+
const recuo = (l) => l.querySelector(".umds-datatable__tree-content").style.paddingLeft;
|
|
147
|
+
expect(recuo(linhas(container)[0])).toContain("calc(0 *");
|
|
148
|
+
expect(recuo(linhas(container)[2])).toContain("calc(2 *");
|
|
149
|
+
});
|
|
150
|
+
it("teclado: ↓ ↑ andam, → expande e desce, ← recolhe e sobe, Home e End", () => {
|
|
151
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id" }));
|
|
152
|
+
const gab = linhas(container)[0];
|
|
153
|
+
gab.focus();
|
|
154
|
+
expect(gab).toHaveAttribute("tabindex", "0");
|
|
155
|
+
expect(linhas(container)[1]).toHaveAttribute("tabindex", "-1");
|
|
156
|
+
fireEvent.keyDown(gab, { key: "ArrowRight" });
|
|
157
|
+
expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
|
|
158
|
+
expect(document.activeElement).toBe(gab);
|
|
159
|
+
fireEvent.keyDown(gab, { key: "ArrowRight" });
|
|
160
|
+
expect(document.activeElement).toBe(linhas(container)[1]);
|
|
161
|
+
fireEvent.keyDown(document.activeElement, { key: "ArrowDown" });
|
|
162
|
+
expect(document.activeElement).toBe(linhas(container)[2]);
|
|
163
|
+
expect(linhas(container)[2]).toHaveAttribute("tabindex", "0");
|
|
164
|
+
fireEvent.keyDown(document.activeElement, { key: "ArrowLeft" });
|
|
165
|
+
expect(document.activeElement).toBe(linhas(container)[0]);
|
|
166
|
+
fireEvent.keyDown(document.activeElement, { key: "End" });
|
|
167
|
+
expect(document.activeElement).toBe(linhas(container)[3]);
|
|
168
|
+
fireEvent.keyDown(document.activeElement, { key: "Home" });
|
|
169
|
+
expect(document.activeElement).toBe(linhas(container)[0]);
|
|
170
|
+
fireEvent.keyDown(document.activeElement, { key: "ArrowLeft" });
|
|
171
|
+
expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
|
|
172
|
+
});
|
|
173
|
+
it("clicar no botão não aciona o onRowClick da linha", () => {
|
|
174
|
+
const aoClicar = vi.fn();
|
|
175
|
+
render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", onRowClick: aoClicar }));
|
|
176
|
+
fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
|
|
177
|
+
expect(aoClicar).not.toHaveBeenCalled();
|
|
178
|
+
});
|
|
179
|
+
it("sem treeData, a tabela é a de sempre: sem role, sem aria-level", () => {
|
|
180
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE }));
|
|
181
|
+
expect(screen.queryByRole("treegrid")).toBeNull();
|
|
182
|
+
expect(container.querySelector("[aria-level]")).toBeNull();
|
|
183
|
+
expect(container.querySelector(".umds-datatable__tree-toggle")).toBeNull();
|
|
184
|
+
});
|
|
185
|
+
it("childrenKey troca o campo das filhas", () => {
|
|
186
|
+
const dados = [{ id: 1, nome: "Pai", sigla: "P", itens: [{ id: 2, nome: "Filho", sigla: "F" }] }];
|
|
187
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: dados, treeData: true, childrenKey: "itens", rowKey: "id", defaultExpandAll: true }));
|
|
188
|
+
expect(nomes(container)).toEqual(["Pai", "Filho"]);
|
|
189
|
+
});
|
|
190
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render } from "@testing-library/react";
|
|
4
|
+
import DataTable from "../components/DataTable/DataTable";
|
|
5
|
+
import { lerArquivo } from "./lerArquivo";
|
|
6
|
+
const cssDataTable = await lerArquivo("../core/src/components/DataTable/DataTable.css");
|
|
7
|
+
const COLUNAS = [
|
|
8
|
+
{ key: "nome", label: "Nome" },
|
|
9
|
+
{ key: "situacao", label: "Situação" },
|
|
10
|
+
];
|
|
11
|
+
const DADOS = [
|
|
12
|
+
{ nome: "Ana Souza", situacao: "Ativa", tom: "positive" },
|
|
13
|
+
{ nome: "Carlos Lima", situacao: "Bloqueado", tom: "negative" },
|
|
14
|
+
{ nome: "Marina Alves", situacao: "Licença", tom: "info" },
|
|
15
|
+
{ nome: "Rafael Pereira", situacao: "Desligado", tom: "muted" },
|
|
16
|
+
{ nome: "Beatriz Lima", situacao: "Ativa" },
|
|
17
|
+
];
|
|
18
|
+
const linhas = (c) => [...c.querySelectorAll("tbody tr")];
|
|
19
|
+
describe("DataTable · rowTone", () => {
|
|
20
|
+
it("o nome de um campo da linha traz o tom", () => {
|
|
21
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: "tom" }));
|
|
22
|
+
const l = linhas(container);
|
|
23
|
+
expect(l[0]).toHaveClass("umds-datatable__row--positive");
|
|
24
|
+
expect(l[1]).toHaveClass("umds-datatable__row--negative");
|
|
25
|
+
expect(l[2]).toHaveClass("umds-datatable__row--info");
|
|
26
|
+
expect(l[3]).toHaveClass("umds-datatable__row--muted");
|
|
27
|
+
expect(l[4].className).toBe("umds-datatable__row");
|
|
28
|
+
});
|
|
29
|
+
it("uma função (row, rowIndex) devolve o tom", () => {
|
|
30
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: (row, i) => (row.situacao === "Bloqueado" || i === 4 ? "negative" : undefined) }));
|
|
31
|
+
const l = linhas(container);
|
|
32
|
+
expect(l[1]).toHaveClass("umds-datatable__row--negative");
|
|
33
|
+
expect(l[4]).toHaveClass("umds-datatable__row--negative");
|
|
34
|
+
expect(l[0].className).toBe("umds-datatable__row");
|
|
35
|
+
});
|
|
36
|
+
it("tom desconhecido ou vazio não vira classe", () => {
|
|
37
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [{ nome: "A", situacao: "x", tom: "rosa" }, { nome: "B", situacao: "y", tom: "" }], rowTone: "tom" }));
|
|
38
|
+
for (const l of linhas(container))
|
|
39
|
+
expect(l.className).toBe("umds-datatable__row");
|
|
40
|
+
});
|
|
41
|
+
it("sem rowTone nada muda", () => {
|
|
42
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS }));
|
|
43
|
+
for (const l of linhas(container))
|
|
44
|
+
expect(l.className).toBe("umds-datatable__row");
|
|
45
|
+
});
|
|
46
|
+
it("o tom convive com a linha selecionada e a zebra (as classes ficam; o CSS faz a selecionada vencer)", () => {
|
|
47
|
+
const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowTone: "tom", striped: true, rowKey: "nome", selectedRowKeys: ["Carlos Lima"] }));
|
|
48
|
+
const l = linhas(container);
|
|
49
|
+
expect(l[1]).toHaveClass("umds-datatable__row--negative", "umds-datatable__row--selected", "umds-datatable__row--striped");
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
describe("DataTable · compacta, 44px e CSS do tom", () => {
|
|
53
|
+
const css = cssDataTable.replace(/\r\n/g, "\n");
|
|
54
|
+
const bloco = (seletor) => {
|
|
55
|
+
const inicio = css.indexOf(seletor + " {");
|
|
56
|
+
return css.slice(inicio, css.indexOf("}", inicio));
|
|
57
|
+
};
|
|
58
|
+
it("a densidade compacta fixa cabeçalho e linha na altura de campo (44px); o documento fica de fora", () => {
|
|
59
|
+
expect(bloco(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td")).toMatch(/height:\s*var\(--umds-semantic-field-height\)/);
|
|
60
|
+
expect(css).toContain(".umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,");
|
|
61
|
+
const { container } = render(_jsx(DataTable, { density: "compact", columns: COLUNAS, data: DADOS }));
|
|
62
|
+
expect(container.querySelector(".umds-datatable--compact")).not.toBeNull();
|
|
63
|
+
});
|
|
64
|
+
it("a linha selecionada vence o tom (o :not) e o tom vence a zebra", () => {
|
|
65
|
+
expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)/);
|
|
66
|
+
expect(css).toMatch(/\.umds-datatable__row--negative:not\(\.umds-datatable__row--selected\)\.umds-datatable__row--striped/);
|
|
67
|
+
expect(bloco(".umds-datatable__row--muted .umds-datatable__td")).toMatch(/neutral-dark-down/);
|
|
68
|
+
});
|
|
69
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render } from "@testing-library/react";
|
|
4
|
+
import DescriptionList from "../components/DescriptionList/DescriptionList";
|
|
5
|
+
const ITENS = [{ label: "Dotação", value: "02.031.0001" }];
|
|
6
|
+
describe("DescriptionList · density", () => {
|
|
7
|
+
it("compact escreve a classe; o padrão não", () => {
|
|
8
|
+
const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS, density: "compact" }));
|
|
9
|
+
const dl = () => container.querySelector("dl");
|
|
10
|
+
expect(dl()).toHaveClass("umds-description-list--compact");
|
|
11
|
+
rerender(_jsx(DescriptionList, { items: ITENS, density: "default" }));
|
|
12
|
+
expect(dl()).not.toHaveClass("umds-description-list--compact");
|
|
13
|
+
rerender(_jsx(DescriptionList, { items: ITENS }));
|
|
14
|
+
expect(dl()).not.toHaveClass("umds-description-list--compact");
|
|
15
|
+
});
|
|
16
|
+
it("compact vale nos dois desenhos", () => {
|
|
17
|
+
const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS, density: "compact", layout: "stacked", bordered: true }));
|
|
18
|
+
expect(container.querySelector("dl")).toHaveClass("umds-description-list--stacked", "umds-description-list--compact");
|
|
19
|
+
rerender(_jsx(DescriptionList, { items: ITENS, density: "compact", fit: true }));
|
|
20
|
+
expect(container.querySelector("dl")).toHaveClass("umds-description-list--inline", "umds-description-list--compact");
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render, screen } from "@testing-library/react";
|
|
4
|
+
import { faInbox } from "@fortawesome/free-solid-svg-icons";
|
|
5
|
+
import EmptyState from "../components/EmptyState/EmptyState";
|
|
6
|
+
describe("EmptyState · título rico", () => {
|
|
7
|
+
it("título em texto continua igual", () => {
|
|
8
|
+
const { container } = render(_jsx(EmptyState, { icon: faInbox, title: "Nenhuma mensagem", description: "Tudo em dia." }));
|
|
9
|
+
expect(container.querySelector(".umds-empty-state__title")).toHaveTextContent("Nenhuma mensagem");
|
|
10
|
+
expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
|
|
11
|
+
});
|
|
12
|
+
it("título aceita conteúdo rico: negrito, link", () => {
|
|
13
|
+
const { container } = render(_jsx(EmptyState, { title: _jsxs(_Fragment, { children: ["Nenhum processo para ", _jsx("strong", { "data-testid": "termo", children: "SOBR" }), " ", _jsx("a", { href: "#limpar", children: "Limpar filtro" })] }) }));
|
|
14
|
+
const titulo = container.querySelector(".umds-empty-state__title");
|
|
15
|
+
expect(titulo).toContainElement(screen.getByTestId("termo"));
|
|
16
|
+
expect(titulo.querySelector("a")).toHaveAttribute("href", "#limpar");
|
|
17
|
+
});
|
|
18
|
+
it("o título é um div (conteúdo de bloco não vira HTML inválido dentro de p)", () => {
|
|
19
|
+
const { container } = render(_jsx(EmptyState, { title: _jsx("div", { "data-testid": "bloco", children: "Bloco" }) }));
|
|
20
|
+
expect(container.querySelector(".umds-empty-state__title").tagName).toBe("DIV");
|
|
21
|
+
expect(screen.getByTestId("bloco").parentElement).toHaveClass("umds-empty-state__title");
|
|
22
|
+
});
|
|
23
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import { render } from "@testing-library/react";
|
|
4
|
+
import Input from "../components/Input/Input";
|
|
5
|
+
describe("Input · grouped", () => {
|
|
6
|
+
it("grouped liga a classe própria e a do borderless; sem a prop, nenhuma das duas", () => {
|
|
7
|
+
const { container, rerender } = render(_jsx(Input, { ariaLabel: "Adicionar setor", grouped: true }));
|
|
8
|
+
const raiz = () => container.firstElementChild;
|
|
9
|
+
expect(raiz()).toHaveClass("umds-input--grouped");
|
|
10
|
+
expect(raiz()).toHaveClass("umds-input--borderless");
|
|
11
|
+
rerender(_jsx(Input, { ariaLabel: "Adicionar setor" }));
|
|
12
|
+
expect(raiz()).not.toHaveClass("umds-input--grouped");
|
|
13
|
+
expect(raiz()).not.toHaveClass("umds-input--borderless");
|
|
14
|
+
});
|
|
15
|
+
it("borderless sozinho não ganha a classe do grupo (segue com altura de campo e foco próprio)", () => {
|
|
16
|
+
const { container } = render(_jsx(Input, { ariaLabel: "x", borderless: true }));
|
|
17
|
+
expect(container.firstElementChild).toHaveClass("umds-input--borderless");
|
|
18
|
+
expect(container.firstElementChild).not.toHaveClass("umds-input--grouped");
|
|
19
|
+
});
|
|
20
|
+
it("o campo continua digitável dentro do grupo", () => {
|
|
21
|
+
const { container } = render(_jsx(Input, { ariaLabel: "Adicionar setor", grouped: true, placeholder: "SADM, SOBR..." }));
|
|
22
|
+
expect(container.querySelector("input")).toHaveAttribute("placeholder", "SADM, SOBR...");
|
|
23
|
+
});
|
|
24
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import Input from "../components/Input/Input";
|
|
4
|
+
import { render } from "@testing-library/react";
|
|
5
|
+
import { lerArquivo } from "./lerArquivo";
|
|
6
|
+
const cssInput = await lerArquivo("../core/src/components/Input/Input.css");
|
|
7
|
+
const CSS = { Input: cssInput };
|
|
8
|
+
const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
|
|
9
|
+
const bloco = (texto, seletor) => {
|
|
10
|
+
const inicio = texto.indexOf(seletor + " {");
|
|
11
|
+
expect(inicio, seletor).toBeGreaterThanOrEqual(0);
|
|
12
|
+
return texto.slice(inicio, texto.indexOf("}", inicio));
|
|
13
|
+
};
|
|
14
|
+
describe("Input · variant ghost", () => {
|
|
15
|
+
it("ghost escreve a classe; sem a prop e com default, não", () => {
|
|
16
|
+
const { container } = render(_jsxs(_Fragment, { children: [_jsx(Input, { ariaLabel: "a", variant: "ghost" }), _jsx(Input, { ariaLabel: "b" }), _jsx(Input, { ariaLabel: "c", variant: "default" })] }));
|
|
17
|
+
expect(container.children[0]).toHaveClass("umds-input--ghost");
|
|
18
|
+
expect(container.children[1]).not.toHaveClass("umds-input--ghost");
|
|
19
|
+
expect(container.children[2]).not.toHaveClass("umds-input--ghost");
|
|
20
|
+
});
|
|
21
|
+
it("CSS: só o repouso muda (fundo claro, borda clara) e com baixa especificidade, para o hover e o foco vencerem", () => {
|
|
22
|
+
const t = css("Input");
|
|
23
|
+
const ghost = bloco(t, ".umds-input--ghost:where(:not(.umds-input--error):not(.umds-input--disabled):not(.umds-input--readonly)) .umds-input__container");
|
|
24
|
+
expect(ghost).toMatch(/background-color:\s*var\(--umds-semantic-color-background-light\)/);
|
|
25
|
+
expect(ghost).toMatch(/border-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
|
|
26
|
+
expect(t.indexOf(".umds-input__container:focus-within:not(")).toBeGreaterThanOrEqual(0);
|
|
27
|
+
});
|
|
28
|
+
it("o foco, o erro e o desabilitado do campo ghost seguem as classes do padrão", () => {
|
|
29
|
+
const { container } = render(_jsx(Input, { ariaLabel: "d", variant: "ghost", errorMessage: "Obrigat\u00F3rio" }));
|
|
30
|
+
expect(container.firstElementChild).toHaveClass("umds-input--ghost", "umds-input--error");
|
|
31
|
+
});
|
|
32
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it, vi } from "vitest";
|
|
3
|
+
import { render, screen, fireEvent } from "@testing-library/react";
|
|
4
|
+
import ListItem from "../components/List/ListItem";
|
|
5
|
+
describe("ListItem: tooltip, standalone e atributos só no elemento interativo", () => {
|
|
6
|
+
it("tooltip vira o atributo title do elemento interativo, e o li fica limpo", () => {
|
|
7
|
+
const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Memorando 114/2025", tooltip: "Abrir o memorando", "aria-label": "Memorando", role: "menuitem", "data-origem": "home" }) }));
|
|
8
|
+
const li = container.querySelector("li");
|
|
9
|
+
const botao = screen.getByRole("menuitem");
|
|
10
|
+
expect(botao).toHaveAttribute("title", "Abrir o memorando");
|
|
11
|
+
expect(botao).toHaveAttribute("aria-label", "Memorando");
|
|
12
|
+
expect(botao).toHaveAttribute("data-origem", "home");
|
|
13
|
+
for (const atributo of ["title", "aria-label", "role", "data-origem"])
|
|
14
|
+
expect(li).not.toHaveAttribute(atributo);
|
|
15
|
+
});
|
|
16
|
+
it("tooltip funciona no link e na linha div; sem tooltip não há title", () => {
|
|
17
|
+
const { container } = render(_jsxs("ul", { children: [_jsx(ListItem, { title: "Link", href: "/x", tooltip: "Dica do link" }), _jsx(ListItem, { as: "div", title: "Div", tooltip: "Dica da div" }), _jsx(ListItem, { title: "Sem dica" })] }));
|
|
18
|
+
const titulos = [...container.querySelectorAll(".umds-list-item")].map((e) => e.getAttribute("title"));
|
|
19
|
+
expect(titulos).toEqual(["Dica do link", "Dica da div", null]);
|
|
20
|
+
});
|
|
21
|
+
it("o título da linha continua sendo texto, não o atributo", () => {
|
|
22
|
+
const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "S\u00F3 o t\u00EDtulo" }) }));
|
|
23
|
+
expect(container.querySelector("[title]")).toBeNull();
|
|
24
|
+
});
|
|
25
|
+
it("standalone renderiza sem li, só o elemento interativo", () => {
|
|
26
|
+
const aoClicar = vi.fn();
|
|
27
|
+
const { container } = render(_jsx("div", { children: _jsx(ListItem, { standalone: true, title: "12", tooltip: "P\u00E1gina 12", onClick: aoClicar }) }));
|
|
28
|
+
expect(container.querySelector("li")).toBeNull();
|
|
29
|
+
const botao = screen.getByRole("button", { name: /12/ });
|
|
30
|
+
expect(botao.parentElement?.tagName).toBe("DIV");
|
|
31
|
+
expect(botao).toHaveAttribute("title", "Página 12");
|
|
32
|
+
fireEvent.click(botao);
|
|
33
|
+
expect(aoClicar).toHaveBeenCalledTimes(1);
|
|
34
|
+
});
|
|
35
|
+
it("sem standalone o li continua lá", () => {
|
|
36
|
+
const { container } = render(_jsx("ul", { children: _jsx(ListItem, { title: "Normal" }) }));
|
|
37
|
+
expect(container.querySelectorAll("li")).toHaveLength(1);
|
|
38
|
+
});
|
|
39
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, it } from "vitest";
|
|
3
|
+
import Modal from "../components/Modal/Modal";
|
|
4
|
+
import { render, screen } from "@testing-library/react";
|
|
5
|
+
import { lerArquivo } from "./lerArquivo";
|
|
6
|
+
const cssModal = await lerArquivo("../core/src/components/Modal/Modal.css");
|
|
7
|
+
const CSS = { Modal: cssModal };
|
|
8
|
+
const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
|
|
9
|
+
const bloco = (texto, seletor) => {
|
|
10
|
+
const inicio = texto.indexOf(seletor + " {");
|
|
11
|
+
expect(inicio, seletor).toBeGreaterThanOrEqual(0);
|
|
12
|
+
return texto.slice(inicio, texto.indexOf("}", inicio));
|
|
13
|
+
};
|
|
14
|
+
describe("Modal · density 1doc", () => {
|
|
15
|
+
it("escreve a classe e convive com variant primary; sem a prop, não", () => {
|
|
16
|
+
render(_jsx(Modal, { open: true, inline: true, density: "1doc", variant: "primary", title: "Resolver tarefa" }));
|
|
17
|
+
expect(screen.getByRole("dialog", { name: "Resolver tarefa" })).toHaveClass("umds-modal--1doc", "umds-modal--primary", "umds-modal--base");
|
|
18
|
+
});
|
|
19
|
+
it("sem density o modal é o de antes", () => {
|
|
20
|
+
render(_jsx(Modal, { open: true, inline: true, title: "Padr\u00E3o" }));
|
|
21
|
+
expect(screen.getByRole("dialog", { name: "Padrão" })).not.toHaveClass("umds-modal--1doc");
|
|
22
|
+
});
|
|
23
|
+
it("CSS: cabeçalho de 67px, rodapé de 65px (padding 12px 24px) e raio de 12px; o padrão (8px) não muda", () => {
|
|
24
|
+
const t = css("Modal");
|
|
25
|
+
expect(bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__header")).toMatch(/min-height:\s*67px/);
|
|
26
|
+
const rodape = bloco(t, ".umds-modal--1doc.umds-modal--base .umds-modal__footer");
|
|
27
|
+
expect(rodape).toMatch(/min-height:\s*65px/);
|
|
28
|
+
expect(rodape).toMatch(/padding:\s*var\(--umds-primitive-spacing-mini\)\s+var\(--umds-primitive-spacing-xxs\)/);
|
|
29
|
+
expect(t).toMatch(/\.umds-modal--1doc:not\(\.umds-modal--fullscreen\):not\(\.umds-modal--janela-fullscreen\):not\(\.umds-modal--sheet\) \{\n(?:\s*\/\*.*\*\/\n)?\s*border-radius:\s*12px/);
|
|
30
|
+
expect(bloco(t, ".umds-modal")).toMatch(/border-radius:\s*var\(--umds-primitive-border-radius-sm\)/);
|
|
31
|
+
});
|
|
32
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|