update cm tests @dai-shi

salvoravida · salvoravida · commit 66478360b611 · 2019-11-11T16:21:53.000+01:00
diff --git a/test/cm/__tests__/all_spec.js b/test/cm/__tests__/all_spec.js
@@ -8,7 +8,8 @@ const names = [
 
 const sleep = ms => new Promise(r => setTimeout(r, ms));
 jest.setTimeout(15 * 1000);
-const REPEAT = 10;
+const REPEAT = 5;
+const DOUBLE = 2; // two clicks to increment one
 const NUM_COMPONENTS = 50; // defined in src/common.js
 
 names.forEach((name) => {
@@ -30,7 +31,7 @@ names.forEach((name) => {
 
     it('check1: updated properly', async () => {
       delays = [];
-      for (let loop = 0; loop < REPEAT; ++loop) {
+      for (let loop = 0; loop < REPEAT * DOUBLE; ++loop) {
         const start = Date.now();
         // click buttons three times
         await Promise.all([
@@ -41,7 +42,7 @@ names.forEach((name) => {
         delays.push(Date.now() - start);
       }
       console.log(name, delays);
-      // check if all counts become 15 = REPEAT * 3
+      // check if all counts become REPEAT * 3
       await Promise.all([...Array(NUM_COMPONENTS).keys()].map(async (i) => {
         await expect(page).toMatchElement(`.count:nth-of-type(${i + 1})`, {
           text: `${REPEAT * 3}`,
@@ -70,8 +71,11 @@ names.forEach((name) => {
         page.click('#remoteIncrement'),
         page.click('#remoteIncrement'),
         page.click('#localIncrement'),
+        page.click('#remoteIncrement'),
+        page.click('#remoteIncrement'),
+        page.click('#localIncrement'),
       ]);
-      // check if all counts become 18 = REPEAT * 3 + 3
+      // check if all counts become REPEAT * 3 + 2
       await Promise.all([...Array(NUM_COMPONENTS).keys()].map(async (i) => {
         await expect(page).toMatchElement(`.count:nth-of-type(${i + 1})`, {
           text: `${REPEAT * 3 + 2}`,
diff --git a/test/cm/public/index.html b/test/cm/public/index.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <p>This is a button to trigger action from outside of React</p>
-    <button id="remoteIncrement">Increment remote count</button>
+    <button id="remoteIncrement">Increment remote count (two clicks to increment one)</button>
     <div id="app"></div>
   </body>
 </html>
diff --git a/test/cm/src/common.js b/test/cm/src/common.js
@@ -18,12 +18,20 @@ export const useRegisterIncrementDispatcher = (listener) => {
   }, [listener]);
 };
 
-export const initialState = { count: 0 };
+export const initialState = {
+  count: 0,
+  dummy: 0,
+};
 
 export const reducer = (state = initialState, action) => {
   switch (action.type) {
     case 'increment':
-      return { ...state, count: state.count + 1 };
+      return {
+        ...state,
+        dummy: state.dummy + 1,
+        // only update once in two
+        count: state.dummy % 2 === 1 ? state.count + 1 : state.count,
+      };
     default:
       return state;
   }
@@ -45,3 +53,14 @@ export const useCheckTearing = () => {
     }
   });
 };
+
+// naive shallowEqual for React.memo
+// a hack until the issue is resolved
+// https://github.com/facebook/react/issues/17314
+// https://github.com/facebook/react/issues/17318
+export const shallowEqual = (prevProps, nextProps) => {
+  const prevKeys = Object.keys(prevProps);
+  const nextKeys = Object.keys(nextProps);
+  return prevKeys.every(key => prevProps[key] === nextProps[key])
+    && nextKeys.every(key => prevProps[key] === nextProps[key]);
+};
diff --git a/test/cm/src/react-redux/index.js b/test/cm/src/react-redux/index.js
@@ -8,20 +8,16 @@ import {
   reducer,
   ids,
   useCheckTearing,
+  shallowEqual,
 } from '../common';
 
 const store = createStore(reducer);
 
-const _Counter = () => {
+const Counter = React.memo(() => {
   const count = useSelector(state => state.count);
   syncBlock();
   return <div className="count">{count}</div>;
-};
-
-_Counter.defaultProps={};
-//https://github.com/facebook/react/issues/17318  currently 2019.11.10 SimpleMemoCompnent is buggy on CM
-
-const Counter=React.memo(_Counter);
+}, shallowEqual);
 
 const Main = () => {
   const dispatch = useDispatch();
