add test for useId (#3716)

* assert rts and csr output match

* add hydrate test

hooks/test/browser/useId.test.js

@@ -1,6 +1,7 @@
-import { createElement, render } from 'preact';
-import { useId, useState } from 'preact/hooks';
+import { createElement, Fragment, hydrate, render } from 'preact';
+import { useId, useReducer, useState } from 'preact/hooks';
 import { setupRerender } from 'preact/test-utils';
+import { render as rts } from 'preact-render-to-string';
 import { setupScratch, teardown } from '../../../test/_util/helpers';
 
 /** @jsx createElement */
@@ -129,4 +130,148 @@ describe('useId', () => {
 			'<div id="P481"><div><span id="P476641">h</span><span id="P486251">h</span></div></div>'
 		);
 	});
+
+	it('matches with rts', () => {
+		const ChildFragmentReturn = ({ children }) => {
+			return <Fragment>{children}</Fragment>;
+		};
+
+		const ChildReturn = ({ children }) => {
+			return children;
+		};
+
+		const SomeMessage = ({ msg }) => {
+			const id = useId();
+			return (
+				<p>
+					{msg} {id}
+				</p>
+			);
+		};
+
+		const Stateful = () => {
+			const [count, add] = useReducer(c => c + 1, 0);
+			const id = useId();
+			return (
+				<div>
+					id: {id}, count: {count}
+					<button onClick={add}>+1</button>
+				</div>
+			);
+		};
+
+		const Component = ({ showStateful = false }) => {
+			const rootId = useId();
+			const paragraphId = useId();
+
+			return (
+				<main>
+					ID: {rootId}
+					<p>Hello world id: {paragraphId}</p>
+					{showStateful ? (
+						<Stateful />
+					) : (
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildReturn>
+								<SomeMessage msg="child-return" />
+								<ChildReturn>
+									<SomeMessage msg="child-return" />
+								</ChildReturn>
+							</ChildReturn>
+						</ChildReturn>
+					)}
+					<ChildFragmentReturn>
+						<SomeMessage msg="child-fragment-return" />
+						<SomeMessage msg="child-fragment-return-2" />
+						<SomeMessage msg="child-fragment-return-3" />
+						<SomeMessage msg="child-fragment-return-4" />
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildFragmentReturn>
+								<SomeMessage msg="child-fragment-return" />
+							</ChildFragmentReturn>
+						</ChildReturn>
+					</ChildFragmentReturn>
+				</main>
+			);
+		};
+
+		const rtsOutput = rts(<Component />);
+		render(<Component />, scratch);
+		expect(rtsOutput === scratch.innerHTML).to.equal(true);
+	});
+
+	it('matches with rts after hydration', () => {
+		const ChildFragmentReturn = ({ children }) => {
+			return <Fragment>{children}</Fragment>;
+		};
+
+		const ChildReturn = ({ children }) => {
+			return children;
+		};
+
+		const SomeMessage = ({ msg }) => {
+			const id = useId();
+			return (
+				<p>
+					{msg} {id}
+				</p>
+			);
+		};
+
+		const Stateful = () => {
+			const [count, add] = useReducer(c => c + 1, 0);
+			const id = useId();
+			return (
+				<div>
+					id: {id}, count: {count}
+					<button onClick={add}>+1</button>
+				</div>
+			);
+		};
+
+		const Component = ({ showStateful = false }) => {
+			const rootId = useId();
+			const paragraphId = useId();
+
+			return (
+				<main>
+					ID: {rootId}
+					<p>Hello world id: {paragraphId}</p>
+					{showStateful ? (
+						<Stateful />
+					) : (
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildReturn>
+								<SomeMessage msg="child-return" />
+								<ChildReturn>
+									<SomeMessage msg="child-return" />
+								</ChildReturn>
+							</ChildReturn>
+						</ChildReturn>
+					)}
+					<ChildFragmentReturn>
+						<SomeMessage msg="child-fragment-return" />
+						<SomeMessage msg="child-fragment-return-2" />
+						<SomeMessage msg="child-fragment-return-3" />
+						<SomeMessage msg="child-fragment-return-4" />
+						<ChildReturn>
+							<SomeMessage msg="child-return" />
+							<ChildFragmentReturn>
+								<SomeMessage msg="child-fragment-return" />
+							</ChildFragmentReturn>
+						</ChildReturn>
+					</ChildFragmentReturn>
+				</main>
+			);
+		};
+
+		const rtsOutput = rts(<Component />);
+
+		scratch.innerHTML = rtsOutput;
+		hydrate(<Component />, scratch);
+		expect(rtsOutput === scratch.innerHTML).to.equal(true);
+	});
 });

package.json

@@ -293,6 +293,7 @@
 		"mocha": "^8.2.1",
 		"npm-merge-driver-install": "^1.1.1",
 		"npm-run-all": "^4.0.0",
+		"preact-render-to-string": "^5.2.4",
 		"prettier": "^1.18.2",
 		"prop-types": "^15.7.2",
 		"sade": "^1.7.4",