Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(contributions): afficher une hierarchie des headings valides même si un sous-titre est utilisé alors que pas de titre avant #6370

Merged
merged 12 commits into from
Dec 18, 2024
Merged

fix(contributions): afficher une hierarchie des headings valides même si un sous-titre est utilisé alors que pas de titre avant #6370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
87d0083
fix(contributions): afficher une hierarchie des headings valides même…
carolineBda Dec 17, 2024
b20febf
fix test
carolineBda Dec 17, 2024
30048c6
run html validation
carolineBda Dec 17, 2024
ab8115f
run html validation
carolineBda Dec 17, 2024
56e9bf3
run run run
carolineBda Dec 17, 2024
ed8b885
run run run run !
carolineBda Dec 17, 2024
e9968c8
run run run run run !
carolineBda Dec 17, 2024
2b99053
only the contrib with error
carolineBda Dec 17, 2024
fea4b3a
only failed contribs
carolineBda Dec 17, 2024
43170e7
Merge branch 'dev' into carolineBda/headings-level-contribs
carolineBda Dec 17, 2024
f6599fd
update test
carolineBda Dec 17, 2024
815dd1b
revert
carolineBda Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/code-du-travail-frontend/src/contributions/DisplayContentContribution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,17 +131,19 @@ const getHeadingElement = (titleLevel: number, domNode) => {

const options = (titleLevel: number): HTMLReactParserOptions => {
let accordionTitle = titleLevel;
let headingTitleLevel = titleLevel;

return {
replace(domNode) {
if (domNode instanceof Element) {
if (domNode.name === "span" && domNode.attribs.class === "title") {
accordionTitle = titleLevel + 1;
headingTitleLevel = titleLevel + 1;
return getHeadingElement(titleLevel, domNode);
}
if (domNode.name === "span" && domNode.attribs.class === "sub-title") {
accordionTitle = titleLevel + 1;
return getHeadingElement(titleLevel + 1, domNode);
return getHeadingElement(headingTitleLevel, domNode);
}
if (domNode.name === "details") {
const items: any[] = [];
Expand Down Expand Up @@ -175,18 +177,15 @@ const options = (titleLevel: number): HTMLReactParserOptions => {
);
}
if (domNode.name === "strong") {
// Disable trim on strong
return <strong>{renderChildrenWithNoTrim(domNode)}</strong>;
}
if (domNode.name === "em") {
// Disable trim on em
return <em>{renderChildrenWithNoTrim(domNode)}</em>;
}
if (domNode.name === "p") {
if (!domNode.children.length) {
return <br />;
}
// Disable trim on p
return <p>{renderChildrenWithNoTrim(domNode)}</p>;
}
}
Expand Down
40 changes: 31 additions & 9 deletions .../code-du-travail-frontend/src/contributions/__tests__/DisplayContentContribution.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,38 +15,60 @@ describe("DisplayContentContribution", () => {
expect(baseElement.firstChild).toMatchSnapshot();
});
it(`should replace span with with heading according to given title level`, () => {
const { baseElement } = render(
const { getByText } = render(
<DisplayContentContribution
content={`<span class="title">Mon title</span><span class="sub-title">Mon title</span>`}
content={`<span class="title">Ceci est un titre</span><span class="sub-title">Ceci est un sous titre</span>`}
titleLevel={4}
></DisplayContentContribution>
);

expect(baseElement.firstChild).toMatchSnapshot();
expect(getByText("Ceci est un titre").tagName).toEqual("H4");
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

j'ai retiré les snapshot pour ne tester que ce qui nous interesse

expect(getByText("Ceci est un sous titre").tagName).toEqual("H5");
});
it(`should not add headings higher than h6 for titles`, () => {
const { baseElement } = render(
const { getByText } = render(
<DisplayContentContribution
content={`<span class="title">Mon title</span><span class="sub-title">Mon title</span>`}
content={`<span class="title">Ceci est un titre</span><span class="sub-title">Ceci est un sous titre</span>`}
titleLevel={6}
></DisplayContentContribution>
);

expect(baseElement.firstChild).toMatchSnapshot();
expect(getByText("Ceci est un titre").tagName).toEqual("H6");
expect(getByText("Ceci est un sous titre").tagName).toEqual("STRONG");
});
it(`should not add headings higher than h6 for accordion`, () => {
const { asFragment } = render(
const { getByText } = render(
<DisplayContentContribution
content={`
<details className=" details"><summary>Ceci est un titre</summary>
<div data-type=" detailsContent">
<span class="sub-title">Mon title</span>
<span class="title">Ceci est un sous titre</span>
<span class="sub-title">Ceci est un sous sous titre</span>
</div>
</details>`}
titleLevel={6}
></DisplayContentContribution>
);
expect(asFragment().firstChild).toMatchSnapshot();
expect(getByText("Ceci est un titre").tagName).toEqual("H6");
expect(getByText("Ceci est un sous titre").tagName).toEqual("STRONG");
expect(getByText("Ceci est un sous sous titre").tagName).toEqual(
"STRONG"
);
});
it(`should handle sub-title in accordion even if no title`, () => {
const { getByText } = render(
<DisplayContentContribution
content={`
<details className=" details"><summary>Ceci est un titre</summary>
<div data-type=" detailsContent">
<span class="sub-title">Ceci est un sous titre</span>
</div>
</details>`}
titleLevel={4}
></DisplayContentContribution>
);
expect(getByText("Ceci est un titre").tagName).toEqual("H4");
expect(getByText("Ceci est un sous titre").tagName).toEqual("H5");
});
});

Expand Down
Loading
Loading