Skip to content

fix: prettifyHtml self closing tag indentation #21

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

Merged
johnjenkins merged 5 commits into from
Feb 17, 2026
Merged

fix: prettifyHtml self closing tag indentation #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
52a8e9b
fix: serializer preserve svg element tagName case
johnjenkins Feb 16, 2026
b68a299
fix: stop `toEqualHtml` stripping outer tags
johnjenkins Feb 16, 2026
fa0d776
fix: prettifyHtml self closing tag indentation
johnjenkins Feb 17, 2026
060d17d
chore:
johnjenkins Feb 17, 2026
b9d2c92
Merge remote-tracking branch 'origin/main' into fix-html-string-compa…
johnjenkins Feb 17, 2026
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
11 changes: 8 additions & 3 deletions src/testing/html-serializer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,13 +238,18 @@ export function prettifyHtml(html: string): string {

lines.push(' '.repeat(indentLevel * indentSize) + part);
} else if (part.endsWith('/>')) {
// Self-closing tag
// Self-closing tag (XML style)
lines.push(' '.repeat(indentLevel * indentSize) + part);
} else {
// Opening tag
lines.push(' '.repeat(indentLevel * indentSize) + part);
// Increase indent for next content
indentLevel++;

// Check if it's a void element - if so, don't increase indent
const tagName = part.match(/<([^\s>/]+)/)?.[1]?.toLowerCase();
if (!tagName || !VOID_ELEMENTS.has(tagName)) {
// Not a void element, increase indent for next content
indentLevel++;
}
}
} else {
// Text content - add on its own line with current indentation
Expand Down
50 changes: 50 additions & 0 deletions test-project/src/components/non-shadow/__snapshots__/non-shadow-jsdom.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`non-shadow-component serialization > nested components > should serialize nested non-shadow components 1`] = `
<non-shadow-component class="sc-non-shadow-component-h hydrated">
<div class="wrapper sc-non-shadow-component">
<div class="header sc-non-shadow-component sc-non-shadow-component-s">
<slot-fb name="header" class="sc-non-shadow-component" hidden>
Default Header
</slot-fb>
<non-shadow-component slot="header" class="sc-non-shadow-component-h hydrated">
<div class="wrapper sc-non-shadow-component">
<div class="header sc-non-shadow-component sc-non-shadow-component-s">
<slot-fb name="header" class="sc-non-shadow-component">
Default Header
</slot-fb>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
<span>
Nested Header
</span>
</div>
<div class="footer sc-non-shadow-component sc-non-shadow-component-s">
<slot-fb name="footer" class="sc-non-shadow-component">
Default Footer
</slot-fb>
</div>
</div>
</non-shadow-component>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
<p>
Main Content
</p>
</div>
<div class="footer sc-non-shadow-component sc-non-shadow-component-s">
<slot-fb name="footer" class="sc-non-shadow-component">
Default Footer
</slot-fb>
</div>
</div>
</non-shadow-component>
`;
8 changes: 8 additions & 0 deletions test-project/src/components/non-shadow/non-shadow-jsdom.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ describe('non-shadow-component serialization', () => {
</span>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
Expand Down Expand Up @@ -63,6 +64,7 @@ describe('non-shadow-component serialization', () => {
</slot-fb>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component">
Default Content
</slot-fb>
Expand Down Expand Up @@ -96,6 +98,7 @@ describe('non-shadow-component serialization', () => {
</span>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component">
Default Content
</slot-fb>
Expand Down Expand Up @@ -137,6 +140,7 @@ describe('non-shadow-component serialization', () => {
</slot-fb>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
Expand Down Expand Up @@ -203,6 +207,8 @@ describe('non-shadow-component serialization', () => {
</non-shadow-component>,
);

expect(result.root).toMatchSnapshot();

expect(result.root).toEqualHtml(`
<non-shadow-component class="sc-non-shadow-component-h hydrated">
<div class="wrapper sc-non-shadow-component">
Expand All @@ -218,6 +224,7 @@ describe('non-shadow-component serialization', () => {
</slot-fb>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
Expand All @@ -234,6 +241,7 @@ describe('non-shadow-component serialization', () => {
</non-shadow-component>
</div>
<div class="content sc-non-shadow-component sc-non-shadow-component-s">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="sc-non-shadow-component">
<slot-fb class="sc-non-shadow-component" hidden>
Default Content
</slot-fb>
Expand Down
1 change: 1 addition & 0 deletions test-project/src/components/non-shadow/non-shadow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export class NonShadowComponent {
<slot name="header">Default Header</slot>
</div>
<div class="content">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" />
<slot>Default Content</slot>
</div>
<div class="footer">
Expand Down