pixuireactcomponents 1.2.0 → 1.2.1

package/lib/react-window/src/__tests__/VariableSizeList.js

@@ -1,442 +0,0 @@
-import React, { createRef, PureComponent } from 'react';
-import { render } from 'react-dom';
-import { Simulate } from 'react-dom/test-utils';
-import ReactTestRenderer from 'react-test-renderer';
-import { VariableSizeList } from '..';
-
-const simulateScroll = (instance, scrollOffset, direction = 'vertical') => {
-  if (direction === 'horizontal') {
-    instance._outerRef.scrollLeft = scrollOffset;
-  } else {
-    instance._outerRef.scrollTop = scrollOffset;
-  }
-  Simulate.scroll(instance._outerRef);
-};
-
-const findScrollContainer = rendered => rendered.root.children[0].children[0];
-
-describe('VariableSizeList', () => {
-  let itemRenderer, itemSize, defaultProps, onItemsRendered;
-
-  // Use PureComponent to test memoization.
-  // Pass through to itemRenderer mock for easier test assertions.
-  class PureItemRenderer extends PureComponent {
-    render() {
-      return itemRenderer(this.props);
-    }
-  }
-
-  beforeEach(() => {
-    jest.useFakeTimers();
-
-    // JSdom does not do actual layout and so doesn't return meaningful values here.
-    // For the purposes of our tests though, we can mock out semi-meaningful values.
-    // This mock is required for e.g. "onScroll" tests to work properly.
-    Object.defineProperties(HTMLElement.prototype, {
-      clientWidth: {
-        configurable: true,
-        get: function() {
-          return parseInt(this.style.width, 10) || 0;
-        },
-      },
-      clientHeight: {
-        configurable: true,
-        get: function() {
-          return parseInt(this.style.height, 10) || 0;
-        },
-      },
-      scrollHeight: {
-        configurable: true,
-        get: () => Number.MAX_SAFE_INTEGER,
-      },
-      scrollWidth: {
-        configurable: true,
-        get: () => Number.MAX_SAFE_INTEGER,
-      },
-    });
-
-    itemRenderer = jest.fn(({ style, ...rest }) => (
-      <div style={style}>{JSON.stringify(rest, null, 2)}</div>
-    ));
-    itemSize = jest.fn(index => 25 + index);
-    onItemsRendered = jest.fn();
-    defaultProps = {
-      children: PureItemRenderer,
-      estimatedItemSize: 25,
-      height: 100,
-      itemCount: 20,
-      itemSize,
-      onItemsRendered,
-      width: 50,
-    };
-  });
-
-  // Much of the shared List functionality is already tested by FixedSizeList tests.
-  // This test covers functionality that is unique to VariableSizeList.
-
-  it('should render an empty list', () => {
-    ReactTestRenderer.create(
-      <VariableSizeList {...defaultProps} itemCount={0} />
-    );
-    expect(itemSize).not.toHaveBeenCalled();
-    expect(itemRenderer).not.toHaveBeenCalled();
-    expect(onItemsRendered).not.toHaveBeenCalled();
-  });
-
-  it('changing itemSize does not impact the rendered items', () => {
-    const rendered = ReactTestRenderer.create(
-      <VariableSizeList {...defaultProps} />
-    );
-    itemRenderer.mockClear();
-    rendered.update(
-      <VariableSizeList
-        {...defaultProps}
-        itemSize={index => 50}
-        onItemsRendered={onItemsRendered}
-      />
-    );
-    expect(itemRenderer).not.toHaveBeenCalled();
-  });
-
-  describe('estimatedItemSize', () => {
-    it('should estimate an initial scrollable size based on this value', () => {
-      const itemSize = jest.fn(() => 25);
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList
-          {...defaultProps}
-          estimatedItemSize={50}
-          height={100}
-          itemCount={100}
-          itemSize={itemSize}
-          overscanCount={0}
-        />
-      );
-      // We'll render 5 rows initially, each at 25px tall (125px total).
-      // The remaining 95 rows will be estimated at 50px tall (4,750px total).
-      // This means an initial height estimate of 4,875px.
-      expect(itemSize).toHaveBeenCalledTimes(5);
-      const scrollContainer = findScrollContainer(rendered);
-      expect(scrollContainer.props.style.height).toEqual(4875);
-    });
-
-    it('should udpate the scrollable size as more items are measured', () => {
-      const itemSize = jest.fn(() => 25);
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList
-          {...defaultProps}
-          estimatedItemSize={50}
-          itemCount={100}
-          itemSize={itemSize}
-          overscanCount={0}
-        />
-      );
-      rendered.getInstance().scrollToItem(18);
-      // Including the additional 1 (minimum) overscan row,
-      // We've now measured 20 rows, each at 25px tall (500px total).
-      // The remaining 80 rows will be estimated at 50px tall (4,500px total).
-      // This means an updated height estimate of 4,500px.
-      expect(itemSize).toHaveBeenCalledTimes(20);
-      const scrollContainer = findScrollContainer(rendered);
-      expect(scrollContainer.props.style.height).toEqual(4500);
-    });
-  });
-
-  describe('scrollToItem method', () => {
-    it('should not set invalid offsets when the list contains few items', () => {
-      const onScroll = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} itemCount={3} onScroll={onScroll} />
-      );
-      expect(onItemsRendered).toMatchSnapshot();
-      onItemsRendered.mockClear();
-      rendered.getInstance().scrollToItem(0);
-      expect(onItemsRendered).not.toHaveBeenCalled();
-    });
-
-    it('should scroll to the correct item for align = "auto"', () => {
-      const onItemsRendered = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} onItemsRendered={onItemsRendered} />
-      );
-      // Scroll down enough to show item 10 at the bottom.
-      rendered.getInstance().scrollToItem(10, 'auto');
-      // No need to scroll again; item 9 is already visible.
-      // Overscan indices will change though, since direction changes.
-      rendered.getInstance().scrollToItem(9, 'auto');
-      // Scroll up enough to show item 2 at the top.
-      rendered.getInstance().scrollToItem(2, 'auto');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-
-    it('scroll with align = "auto" should work with partially-visible items', () => {
-      const rendered = ReactTestRenderer.create(
-        // Create list where items don't fit exactly into container.
-        // The container has space for 3 1/3 items.
-        <VariableSizeList
-          {...defaultProps}
-          itemCount={100}
-          itemSize={() => 30}
-        />
-      );
-      // Scroll down enough to show item 10 at the bottom.
-      // Should show 4 items: 3 full and one partial at the beginning
-      rendered.getInstance().scrollToItem(10, 'auto');
-      // No need to scroll again; item 9 is already visible.
-      // Because there's no scrolling, it won't call onItemsRendered.
-      rendered.getInstance().scrollToItem(9, 'auto');
-      // Scroll to near the end. #96 will be shown as partial.
-      rendered.getInstance().scrollToItem(99, 'auto');
-      // Scroll back to show #96 fully. This will cause #99 to be shown as a
-      // partial. Because #96 was already shown previously as a partial, all
-      // props of the onItemsRendered will be the same. This means that even
-      // though a scroll happened in the DOM, onItemsRendered won't be called.
-      rendered.getInstance().scrollToItem(96, 'auto');
-      // Scroll forward again. Because item #99 was already shown partially,
-      // all props of the onItemsRendered will be the same.
-      rendered.getInstance().scrollToItem(99, 'auto');
-      // Scroll to the second item. A partial fifth item should
-      // be shown after it.
-      rendered.getInstance().scrollToItem(1, 'auto');
-      // Scroll to the first item. Now the fourth item should be a partial.
-      rendered.getInstance().scrollToItem(0, 'auto');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-
-    it('should scroll to the correct item for align = "start"', () => {
-      const onItemsRendered = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} onItemsRendered={onItemsRendered} />
-      );
-      // Scroll down enough to show item 10 at the top.
-      rendered.getInstance().scrollToItem(10, 'start');
-      // Scroll back up so that item 9 is at the top.
-      // Overscroll direction wil change too.
-      rendered.getInstance().scrollToItem(9, 'start');
-      // Item 19 can't align at the top because there aren't enough items.
-      // Scroll down as far as possible though.
-      // Overscroll direction wil change again.
-      rendered.getInstance().scrollToItem(19, 'start');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-
-    it('should scroll to the correct item for align = "end"', () => {
-      const onItemsRendered = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} onItemsRendered={onItemsRendered} />
-      );
-      // Scroll down enough to show item 10 at the bottom.
-      rendered.getInstance().scrollToItem(10, 'end');
-      // Scroll back up so that item 9 is at the bottom.
-      // Overscroll direction wil change too.
-      rendered.getInstance().scrollToItem(9, 'end');
-      // Item 1 can't align at the bottom because it's too close to the beginning.
-      // Scroll up as far as possible though.
-      // Overscroll direction wil change again.
-      rendered.getInstance().scrollToItem(1, 'end');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-
-    it('should scroll to the correct item for align = "center"', () => {
-      const onItemsRendered = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} onItemsRendered={onItemsRendered} />
-      );
-      // Scroll down enough to show item 10 in the middle.
-      rendered.getInstance().scrollToItem(10, 'center');
-      // Scroll back up so that item 9 is in the middle.
-      // Overscroll direction wil change too.
-      rendered.getInstance().scrollToItem(9, 'center');
-      // Item 1 can't align in the middle because it's too close to the beginning.
-      // Scroll up as far as possible though.
-      // Overscroll direction wil change again.
-      rendered.getInstance().scrollToItem(1, 'center');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-      // Item 19 can't align in the middle because it's too close to the end.
-      // Scroll down as far as possible though.
-      // Overscroll direction wil change again.
-      rendered.getInstance().scrollToItem(19, 'center');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-
-    it('should scroll to the correct item for align = "smart"', () => {
-      const onItemsRendered = jest.fn();
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} onItemsRendered={onItemsRendered} />
-      );
-      // Scroll down enough to show item 10 in the middle.
-      rendered.getInstance().scrollToItem(10, 'smart');
-      // Scrolldn't scroll at all because it's close enough.
-      rendered.getInstance().scrollToItem(9, 'smart');
-      // Should scroll but not center because it's close enough.
-      rendered.getInstance().scrollToItem(6, 'smart');
-      // Item 1 can't align in the middle because it's too close to the beginning.
-      // Scroll up as far as possible though.
-      rendered.getInstance().scrollToItem(1, 'smart');
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-  });
-
-  describe('onScroll', () => {
-    it('scrolling should report partial items correctly in onItemsRendered', () => {
-      // Use ReactDOM renderer so the container ref works correctly.
-      const instance = render(
-        <VariableSizeList
-          {...defaultProps}
-          initialScrollOffset={20}
-          itemCount={100}
-          itemSize={() => 25}
-        />,
-        document.createElement('div')
-      );
-      // Scroll 2 items fwd, but thanks to the initialScrollOffset, we should
-      // still be showing partials on both ends.
-      simulateScroll(instance, 70);
-      // Scroll a little fwd to cause partials to be hidden
-      simulateScroll(instance, 75);
-      // Scroll backwards to show partials again
-      simulateScroll(instance, 70);
-      // Scroll near the end so that the last item is shown
-      // as a partial.
-      simulateScroll(instance, 96 * 25 - 5);
-      // Scroll to the end. No partials.
-      simulateScroll(instance, 96 * 25);
-      // Verify that backwards scrolling near the end works OK.
-      simulateScroll(instance, 96 * 25 - 5);
-      expect(onItemsRendered.mock.calls).toMatchSnapshot();
-    });
-  });
-
-  describe('resetAfterIndex method', () => {
-    it('should recalculate the estimated total size', () => {
-      const itemSize = jest.fn(() => 75);
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList {...defaultProps} itemSize={index => 25} />
-      );
-      rendered.getInstance().scrollToItem(19);
-      // We've measured every item initially.
-      const scrollContainer = findScrollContainer(rendered);
-      expect(scrollContainer.props.style.height).toEqual(500);
-      // Supplying a new itemSize alone should not impact anything.
-      rendered.update(
-        <VariableSizeList {...defaultProps} itemSize={itemSize} />
-      );
-      expect(scrollContainer.props.style.height).toEqual(500);
-      // Reset styles after index 15,
-      // And verify that the new estimated total takes this into account.
-      rendered.getInstance().resetAfterIndex(15);
-      rendered.getInstance().scrollToItem(19);
-      expect(itemSize).toHaveBeenCalledTimes(5);
-      expect(scrollContainer.props.style.height).toEqual(750);
-    });
-
-    it('should delay the recalculation of the estimated total size if shouldForceUpdate is false', () => {
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList
-          {...defaultProps}
-          estimatedItemSize={30}
-          overscanCount={1}
-          itemSize={index => 25}
-        />
-      );
-      const scrollContainer = findScrollContainer(rendered);
-      // The estimated total size should be (100 + 25 * 1 + 30 * 15)px = 575px.
-      expect(scrollContainer.props.style.height).toEqual(575);
-      // Supplying a new itemSize alone should not impact anything.
-      // Although the list get re-rendered by passing inline functions,
-      // but it still use the cached metrics to calculate the estimated size.
-      rendered.update(
-        <VariableSizeList
-          {...defaultProps}
-          estimatedItemSize={30}
-          overscanCount={1}
-          itemSize={index => 20}
-        />
-      );
-      expect(scrollContainer.props.style.height).toEqual(575);
-      // Reset calculation cache but don't re-render the list,
-      // the estimated total size should stay the same.
-      rendered.getInstance().resetAfterIndex(0, false);
-      expect(scrollContainer.props.style.height).toEqual(575);
-      // Pass inline function to make the list re-render.
-      rendered.update(
-        <VariableSizeList
-          {...defaultProps}
-          estimatedItemSize={30}
-          overscanCount={1}
-          itemSize={index => 20}
-        />
-      );
-      // The estimated total height should be (100 + 20 * 1 + 30 * 14)px = 540px.
-      expect(scrollContainer.props.style.height).toEqual(540);
-    });
-
-    it('should re-render items after the specified index with updated styles', () => {
-      const itemSize = jest.fn(() => 75);
-      const rendered = ReactTestRenderer.create(
-        <VariableSizeList
-          {...defaultProps}
-          itemCount={5}
-          itemSize={index => 25}
-        />
-      );
-      // We've rendered 5 rows initially.
-      expect(itemRenderer).toHaveBeenCalledTimes(5);
-      expect(itemRenderer.mock.calls[3][0].style.height).toBe(25);
-      // Supplying a new itemSize alone should not impact anything.
-      rendered.update(
-        <VariableSizeList {...defaultProps} itemCount={5} itemSize={itemSize} />
-      );
-      // Reset styles for rows 4 and 5.
-      // And verify that the affected rows are re-rendered with new styles.
-      itemRenderer.mockClear();
-      rendered.getInstance().resetAfterIndex(3);
-      expect(itemRenderer).toHaveBeenCalledTimes(5);
-      expect(itemRenderer.mock.calls[3][0].style.height).toBe(75);
-    });
-  });
-
-  describe('props validation', () => {
-    beforeEach(() => spyOn(console, 'error'));
-
-    it('should fail if non-function itemSize is provided', () => {
-      expect(() =>
-        ReactTestRenderer.create(
-          <VariableSizeList {...defaultProps} itemSize={123} />
-        )
-      ).toThrow(
-        'An invalid "itemSize" prop has been specified. ' +
-          'Value should be a function. "number" was specified.'
-      );
-    });
-  });
-
-  // https://github.com/bvaughn/react-window/pull/138
-  it('should descrease scroll size when itemCount decreases', () => {
-    const innerRef = createRef();
-    const listRef = createRef();
-
-    class Wrapper extends PureComponent {
-      state = { itemCount: 100 };
-      render() {
-        return (
-          <VariableSizeList
-            {...defaultProps}
-            itemCount={this.state.itemCount}
-            innerRef={innerRef}
-            ref={listRef}
-          />
-        );
-      }
-    }
-
-    // Use ReactDOM renderer so "scroll" events work correctly.
-    const instance = render(<Wrapper />, document.createElement('div'));
-
-    // Simulate scrolling past several rows.
-    simulateScroll(listRef.current, 3000);
-
-    // Decrease itemCount a lot and verify the scroll height is descreased as well.
-    instance.setState({ itemCount: 3 });
-    expect(innerRef.current.style.height).toEqual('78px');
-  });
-});