fix e2e

dai-shi · May 21, 2024 · b43c211 · b43c211
1 parent d2fb790
commit b43c211
Show file tree

Hide file tree

Showing 33 changed files with 765 additions and 515 deletions.
diff --git a/examples/12_async/src/app.tsx b/examples/12_async/src/app.tsx
@@ -1,9 +1,9 @@
 import { Provider } from './store';
-import Main from './main';
+import Root from './root';
 
 const App = () => (
   <Provider>
-    <Main />
+    <Root />
   </Provider>
 );
 

diff --git a/examples/12_async/src/main.tsx b/examples/12_async/src/main.tsx
@@ -1,27 +1,10 @@
-import { useState } from 'react';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 
-import { useTrackedState } from './store';
-import Person from './person';
-import Counter from './counter';
+import App from './app';
 
-const Main = () => {
-  const state = useTrackedState();
-  const [id, setId] = useState('3');
-  return (
-    <div>
-      <h1>Person</h1>
-      <div>
-        User ID:
-        <input value={id} onChange={(e) => setId(e.target.value)} />
-      </div>
-      {state.loadingState !== 'idle' ? (
-        <span>{state.loadingState}...</span>
-      ) : (
-        <Person id={id} />
-      )}
-      <Counter />
-    </div>
-  );
-};
-
-export default Main;
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
diff --git a/examples/12_async/src/root.tsx b/examples/12_async/src/root.tsx
@@ -0,0 +1,27 @@
+import { useState } from 'react';
+
+import { useTrackedState } from './store';
+import Person from './person';
+import Counter from './counter';
+
+const Root = () => {
+  const state = useTrackedState();
+  const [id, setId] = useState('3');
+  return (
+    <div>
+      <h1>Person</h1>
+      <div>
+        User ID:
+        <input value={id} onChange={(e) => setId(e.target.value)} />
+      </div>
+      {state.loadingState !== 'idle' ? (
+        <span>{state.loadingState}...</span>
+      ) : (
+        <Person id={id} />
+      )}
+      <Counter />
+    </div>
+  );
+};
+
+export default Root;
diff --git a/tests/e2e/01_counter.ts b/tests/e2e/01_counter.ts
@@ -11,142 +11,142 @@ describe('01_minimal', () => {
     await page.goto(`http://localhost:${port}/`);
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(2) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(2) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(3)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(3)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
     await page.waitForSelector(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     await page.click(
-      'body > #app > div:nth-child(3) > div > button:nth-child(2)',
+      'body > #root > div:nth-child(3) > div > button:nth-child(2)',
     );
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
-    await page.waitForSelector('body > #app > div:nth-child(5) > div > input');
-    await page.click('body > #app > div:nth-child(5) > div > input');
+    await page.waitForSelector('body > #root > div:nth-child(5) > div > input');
+    await page.click('body > #root > div:nth-child(5) > div > input');
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
-    await page.type('body > #app > div:nth-child(5) > div > input', '1');
+    await page.type('body > #root > div:nth-child(5) > div > input', '1');
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
-    await page.type('body > #app > div:nth-child(5) > div > input', '2');
+    await page.type('body > #root > div:nth-child(5) > div > input', '2');
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();
 
-    await page.type('body > #app > div:nth-child(5) > div > input', '3');
+    await page.type('body > #root > div:nth-child(5) > div > input', '3');
     expect(
       await page.evaluate(() => document.body.innerHTML),
     ).toMatchSnapshot();