chore: Full test coverage (#3)

* add demo

* full coverage

* clean up

Author: zombieJ

examples/without-height.tsx renamed to examples/no-virtual.tsx

@@ -38,8 +38,35 @@ const Demo = () => {
   return (
     <React.StrictMode>
       <div>
-        <h2>Without Height</h2>
+        <h2>Less Count</h2>
+        <List
+          data={data.slice(0, 1)}
+          itemHeight={30}
+          height={100}
+          itemKey="id"
+          style={{
+            border: '1px solid red',
+            boxSizing: 'border-box',
+          }}
+        >
+          {item => <ForwardMyItem {...item} />}
+        </List>
 
+        <h2>Less Item Height</h2>
+        <List
+          data={data.slice(0, 10)}
+          itemHeight={1}
+          height={100}
+          itemKey="id"
+          style={{
+            border: '1px solid red',
+            boxSizing: 'border-box',
+          }}
+        >
+          {item => <ForwardMyItem {...item} />}
+        </List>
+
+        <h2>Without Height</h2>
         <List
           data={data}
           itemHeight={30}

src/List.tsx

@@ -102,20 +102,28 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
   /**
    * Always point to the latest props if `disabled` is `false`
    */
-  cachedProps: Partial<ListProps<T>> = {};
+  cachedProps: Partial<ListProps<T>>;
 
   /**
    * Lock scroll process with `onScroll` event.
    * This is used for `data` length change and `scrollTop` restore
    */
   lockScroll: boolean = false;
 
+  constructor(props: ListProps<T>) {
+    super(props);
+
+    this.cachedProps = props;
+  }
+
   /**
    * Phase 1: Initial should sync with default scroll top
    */
   public componentDidMount() {
-    this.listRef.current.scrollTop = 0;
-    this.onScroll();
+    if (this.listRef.current) {
+      this.listRef.current.scrollTop = 0;
+      this.onScroll();
+    }
   }
 
   /**
@@ -127,7 +135,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
     const { data, height, itemHeight, disabled } = this.props;
     const prevData: T[] = this.cachedProps.data || [];
 
-    if (disabled) {
+    if (disabled || !this.listRef.current) {
       return;
     }
 
@@ -209,7 +217,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
         itemElementHeights: this.itemElementHeights,
       });
 
-      this.scrollTo({
+      this.internalScrollTo({
         itemIndex: originCompareItemIndex,
         relativeTop: originCompareItemTop,
       });
@@ -262,6 +270,7 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
 
     const item = data[index];
     if (!item) {
+      /* istanbul ignore next */
       console.error('Not find index item. Please report this since it is a bug.');
     }
 
@@ -286,106 +295,106 @@ class List<T> extends React.Component<ListProps<T>, ListState<T>> {
     }
   };
 
-  public scrollTo(arg: number | RelativeScroll): void {
-    if (typeof arg === 'number') {
-      this.listRef.current.scrollTop = arg;
-    } else if (typeof arg === 'object') {
-      const { itemIndex: compareItemIndex, relativeTop: compareItemRelativeTop } = arg;
-      const { scrollTop: originScrollTop } = this.state;
-      const { data, itemHeight, height } = this.props;
+  public scrollTo(scrollTop: number) {
+    this.listRef.current.scrollTop = scrollTop;
+  }
+
+  public internalScrollTo(relativeScroll: RelativeScroll): void {
+    const { itemIndex: compareItemIndex, relativeTop: compareItemRelativeTop } = relativeScroll;
+    const { scrollTop: originScrollTop } = this.state;
+    const { data, itemHeight, height } = this.props;
 
-      // 1. Find the best match compare item top
-      let bestSimilarity = Number.MAX_VALUE;
-      let bestScrollTop: number = null;
-      let bestItemIndex: number = null;
-      let bestItemOffsetPtg: number = null;
-      let bestStartIndex: number = null;
-      let bestEndIndex: number = null;
+    // 1. Find the best match compare item top
+    let bestSimilarity = Number.MAX_VALUE;
+    let bestScrollTop: number = null;
+    let bestItemIndex: number = null;
+    let bestItemOffsetPtg: number = null;
+    let bestStartIndex: number = null;
+    let bestEndIndex: number = null;
 
-      let missSimilarity = 0;
+    let missSimilarity = 0;
 
-      const scrollHeight = data.length * itemHeight;
-      const { clientHeight } = this.listRef.current;
-      const maxScrollTop = scrollHeight - clientHeight;
+    const scrollHeight = data.length * itemHeight;
+    const { clientHeight } = this.listRef.current;
+    const maxScrollTop = scrollHeight - clientHeight;
 
-      for (let i = 0; i < maxScrollTop; i += 1) {
-        const scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);
+    for (let i = 0; i < maxScrollTop; i += 1) {
+      const scrollTop = getIndexByStartLoc(0, maxScrollTop, originScrollTop, i);
 
-        const scrollPtg = getScrollPercentage({ scrollTop, scrollHeight, clientHeight });
-        const visibleCount = Math.ceil(height / itemHeight);
+      const scrollPtg = getScrollPercentage({ scrollTop, scrollHeight, clientHeight });
+      const visibleCount = Math.ceil(height / itemHeight);
 
-        const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(
+      const { itemIndex, itemOffsetPtg, startIndex, endIndex } = getRangeIndex(
+        scrollPtg,
+        data.length,
+        visibleCount,
+      );
+
+      // No need to check if compare item out of the index to save performance
+      if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {
+        // 1.1 Get measure located item relative top
+        const locatedItemRelativeTop = getItemRelativeTop({
+          itemIndex,
+          itemOffsetPtg,
+          itemElementHeights: this.itemElementHeights,
           scrollPtg,
-          data.length,
-          visibleCount,
-        );
-
-        // No need to check if compare item out of the index to save performance
-        if (startIndex <= compareItemIndex && compareItemIndex <= endIndex) {
-          // 1.1 Get measure located item relative top
-          const locatedItemRelativeTop = getItemRelativeTop({
-            itemIndex,
-            itemOffsetPtg,
-            itemElementHeights: this.itemElementHeights,
-            scrollPtg,
-            clientHeight,
-            getItemKey: this.getIndexKey,
-          });
-
-          const compareItemTop = getCompareItemRelativeTop({
-            locatedItemRelativeTop,
-            locatedItemIndex: itemIndex,
-            compareItemIndex, // Same as origin index
-            startIndex,
-            endIndex,
-            getItemKey: this.getIndexKey,
-            itemElementHeights: this.itemElementHeights,
-          });
-
-          // 1.2 Find best match compare item top
-          const similarity = Math.abs(compareItemTop - compareItemRelativeTop);
-          if (similarity < bestSimilarity) {
-            bestSimilarity = similarity;
-            bestScrollTop = scrollTop;
-            bestItemIndex = itemIndex;
-            bestItemOffsetPtg = itemOffsetPtg;
-            bestStartIndex = startIndex;
-            bestEndIndex = endIndex;
-
-            missSimilarity = 0;
-          } else {
-            missSimilarity += 1;
-          }
-        }
+          clientHeight,
+          getItemKey: this.getIndexKey,
+        });
 
-        // If keeping 10 times not match similarity,
-        // check more scrollTop is meaningless.
-        // Here boundary is set to 10.
-        if (missSimilarity > 10) {
-          break;
+        const compareItemTop = getCompareItemRelativeTop({
+          locatedItemRelativeTop,
+          locatedItemIndex: itemIndex,
+          compareItemIndex, // Same as origin index
+          startIndex,
+          endIndex,
+          getItemKey: this.getIndexKey,
+          itemElementHeights: this.itemElementHeights,
+        });
+
+        // 1.2 Find best match compare item top
+        const similarity = Math.abs(compareItemTop - compareItemRelativeTop);
+        if (similarity < bestSimilarity) {
+          bestSimilarity = similarity;
+          bestScrollTop = scrollTop;
+          bestItemIndex = itemIndex;
+          bestItemOffsetPtg = itemOffsetPtg;
+          bestStartIndex = startIndex;
+          bestEndIndex = endIndex;
+
+          missSimilarity = 0;
+        } else {
+          missSimilarity += 1;
         }
       }
 
-      // 2. Re-scroll if has best scroll match
-      if (bestScrollTop !== null) {
-        this.lockScroll = true;
-        this.listRef.current.scrollTop = bestScrollTop;
-
-        this.setState({
-          status: 'MEASURE_START',
-          scrollTop: bestScrollTop,
-          itemIndex: bestItemIndex,
-          itemOffsetPtg: bestItemOffsetPtg,
-          startIndex: bestStartIndex,
-          endIndex: bestEndIndex,
-        });
+      // If keeping 10 times not match similarity,
+      // check more scrollTop is meaningless.
+      // Here boundary is set to 10.
+      if (missSimilarity > 10) {
+        break;
+      }
+    }
+
+    // 2. Re-scroll if has best scroll match
+    if (bestScrollTop !== null) {
+      this.lockScroll = true;
+      this.listRef.current.scrollTop = bestScrollTop;
 
+      this.setState({
+        status: 'MEASURE_START',
+        scrollTop: bestScrollTop,
+        itemIndex: bestItemIndex,
+        itemOffsetPtg: bestItemOffsetPtg,
+        startIndex: bestStartIndex,
+        endIndex: bestEndIndex,
+      });
+
+      requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            this.lockScroll = false;
-          });
+          this.lockScroll = false;
         });
-      }
+      });
     }
   }
 

src/utils/algorithmUtil.ts

@@ -22,7 +22,7 @@ export function getIndexByStartLoc(min: number, max: number, start: number, inde
     if (index % 2) {
       return start + stepIndex + 1;
     }
-      return start - stepIndex;
+    return start - stepIndex;
   }
 
   // One is out of range
@@ -46,7 +46,7 @@ export function findListDiffIndex<T>(
   }
 
   let startIndex = 0;
-  let endIndex = originList.length - 1;
+  let endIndex = Math.max(originList.length, targetList.length) - 1;
   let midIndex = Math.floor((startIndex + endIndex) / 2);
 
   const keyCache: Map<T, string | { __EMPTY_ITEM__: true }> = new Map();