Skip to content

Commit

Permalink
fix: rendered html formatting for elements with only text nodes and e…
Browse files Browse the repository at this point in the history 
…mpty ones
  • Loading branch information
@ncpa0cpl
ncpa0cpl committed Oct 9, 2022
1 parent d9a22a0 commit 6c3e832
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 207 deletions.
236 changes: 68 additions & 168 deletions __tests__/html-parser/__snapshots__/render-to-html.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,119 +3,69 @@
exports[`renderToHTML should correctly generate html from component base jsx structure 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div class=\\"main-container\\">
<h2>
Hello World!
</h2>
<input value=\\"write here\\">
</input>
<button>
Submit
</button>
<h2>Hello World!</h2>
<input value=\\"write here\\"></input>
<button>Submit</button>
</div>
</body>
</html>"
`;
exports[`renderToHTML should correctly generate html from simple jsx 1`] = `
"<div id=\\"container\\" class=\\"bordered active\\">
<h1>
Hello World
</h1>
<h2>
Prop Title
</h2>
<button onclick=\\"console.log(&quot;Hello World!&quot;)\\">
Click me!
</button>
<input autofocus draggable>
</input>
<h1>Hello World</h1>
<h2>Prop Title</h2>
<button onclick=\\"console.log(&quot;Hello World!&quot;)\\">Click me!</button>
<input autofocus draggable></input>
</div>"
`;
exports[`renderToHTML should correctly parse async components 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div class=\\"main-container\\">
<h2>
Async title
</h2>
<input value=\\"write here\\">
</input>
<button>
Submit
</button>
<h2>Async title</h2>
<input value=\\"write here\\"></input>
<button>Submit</button>
</div>
</body>
</html>"
`;
exports[`renderToHTML should correctly render jsx with arrays in between elements 1`] = `
"<div>
<h1>
Header
</h1>
<p>
0
</p>
<p>
1
</p>
<footer>
</footer>
<h1>Header</h1>
<p>0</p>
<p>1</p>
<footer></footer>
</div>"
`;
exports[`renderToHTML should properly handle context data close-by providers should not interfere with each other 1`] = `
"<html>
<body>
<p>
bar
</p>
<p>
baz
</p>
<p>
qux
</p>
<p>
coorg
</p>
<p>
fred
</p>
<p>
thud
</p>
<p>
foo
</p>
<p>bar</p>
<p>baz</p>
<p>qux</p>
<p>coorg</p>
<p>fred</p>
<p>thud</p>
<p>foo</p>
</body>
</html>"
`;
Expand All @@ -126,8 +76,7 @@ exports[`renderToHTML should properly handle context data correctly handles enca
<div id=\\"root\\">
<div class=\\"template for-magic\\">
<div>
<input type=\\"text\\" name=\\"repeating_magic_dwarf\\">
</input>
<input type=\\"text\\" name=\\"repeating_magic_dwarf\\"></input>
</div>
</div>
</div>
Expand All @@ -146,9 +95,7 @@ exports[`renderToHTML should properly handle context data should correctly drill
<div>
<div>
<div>
<p>
foo
</p>
<p>foo</p>
</div>
</div>
</div>
Expand All @@ -164,24 +111,16 @@ foo
exports[`renderToHTML should properly handle context data should correctly handle provider pattern 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div class=\\"main-container\\">
<div>
<h1>
Provided title
</h1>
<h1>Provided title</h1>
</div>
</div>
</body>
Expand All @@ -191,49 +130,32 @@ Provided title
exports[`renderToHTML should properly handle context data should correctly override existing context data 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<h1>
This title was overridden
</h1>
<input placeholder=\\"write here\\">
</input>
<h1>This title was overridden</h1>
<input placeholder=\\"write here\\"></input>
</body>
</html>"
`;
exports[`renderToHTML should properly handle context data should correctly render jsx with context data 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div class=\\"main-container\\">
<div>
<h1>
This title is set via the context
</h1>
<h1>This title is set via the context</h1>
</div>
</div>
</body>
Expand All @@ -243,59 +165,37 @@ This title is set via the context
exports[`renderToHTML should properly handle context data should correctly render jsx with context data and arrays in between elements 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div>
<h1>
This title is set via the context
</h1>
<h1>This title is set via the context</h1>
</div>
<input placeholder=\\"write here\\">
</input>
<button>
Submit
</button>
<input placeholder=\\"write here\\"></input>
<button>Submit</button>
</body>
</html>"
`;
exports[`renderToHTML should properly handle context data should correctly render jsx with context data and async components 1`] = `
"<html>
<head>
<meta charset=\\"utf-8\\">
</meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\">
</meta>
<title>
Page Title
</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\">
</meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\">
</link>
<meta charset=\\"utf-8\\"></meta>
<meta http-equiv=\\"x-ua-compatible\\" content=\\"IE=edge\\"></meta>
<title>Page Title</title>
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\"></meta>
<link rel=\\"stylesheet\\" type=\\"text/css\\" media=\\"screen\\" href=\\"main.css\\"></link>
</head>
<body>
<div>
<h1>
This title is set via the context
</h1>
<h1>This title is set via the context</h1>
</div>
<input placeholder=\\"write here\\">
</input>
<button>
Submit
</button>
<input placeholder=\\"write here\\"></input>
<button>Submit</button>
</body>
</html>"
`;
20 changes: 5 additions & 15 deletions __tests__/utilities/__snapshots__/memo.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,34 @@

exports[`memo asynchronous memoized components should works as expected 1`] = `
"<div id=\\"root\\">
<h1>
Hello World
</h1>
<h1>Hello World</h1>
</div>"
`;
exports[`memo children of the memoized components should have access to the top level context 1`] = `
"<div id=\\"root\\">
<div>
<div>
<h1>
Hello
</h1>
<h1>Hello</h1>
</div>
</div>
</div>"
`;
exports[`memo memoized components should have access to the context of it's parent 1`] = `
"<div id=\\"root\\">
<h1>
Hello
</h1>
<h1>Hello</h1>
</div>"
`;
exports[`memo should "forget" memoized results that are past expire time 1`] = `
"<div id=\\"root\\">
<h1>
Bye cruel world
</h1>
<h1>Bye cruel world</h1>
</div>"
`;
exports[`memo should correctly memoize the component 1`] = `
"<div id=\\"root\\">
<h1>
Hello World
</h1>
<h1>Hello World</h1>
</div>"
`;
Loading

0 comments on commit 6c3e832

Please sign in to comment.