Files
react-native/Libraries/Lists/__tests__/CellRenderMask-test.js
T
Nick Gerleman 5cb2debbea Add "CellRenderMask" Region Tracking Structure (#31420)
Summary:
A CellRenderMask helps track regions of cells/spacers to render. It's API allows adding ranges of cells, where its otput be an ordered list of contiguous spacer/non-spacer ranges.

The implementation keeps this region list internally, splitting or merging regions when cells are added. This output will be used by the render function of a refactored VirtualizedList.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Internal] [Added] - Add "CellRenderMask" Region Tracking Structure

Pull Request resolved: https://github.com/facebook/react-native/pull/31420

Test Plan: Validated via UTs.

Reviewed By: lunaleaps

Differential Revision: D28293161

Pulled By: rozele

fbshipit-source-id: a5e4e2144a90387aabe0974650429018440abf67
2021-06-24 07:57:01 -07:00

180 lines
5.2 KiB
JavaScript

/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow strict
* @format
*/
import {CellRenderMask} from '../CellRenderMask';
describe('CellRenderMask', () => {
it('throws when constructed with invalid size', () => {
expect(() => new CellRenderMask(-1)).toThrow();
});
it('allows creation of empty mask', () => {
const renderMask = new CellRenderMask(0);
expect(renderMask.enumerateRegions()).toEqual([]);
});
it('allows creation of single-cell mask', () => {
const renderMask = new CellRenderMask(1);
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 0, isSpacer: true},
]);
});
it('throws when adding invalid cell ranges', () => {
const renderMask = new CellRenderMask(5);
expect(() => renderMask.addCells({first: -1, last: 0})).toThrow();
expect(() => renderMask.addCells({first: 1, last: 0})).toThrow();
expect(() => renderMask.addCells({first: 0, last: 5})).toThrow();
expect(() => renderMask.addCells({first: 6, last: 7})).toThrow();
});
it('allows adding single cell at beginning', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 0, last: 0});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 0, isSpacer: false},
{first: 1, last: 4, isSpacer: true},
]);
});
it('allows adding single cell at end', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 4, last: 4});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 3, isSpacer: true},
{first: 4, last: 4, isSpacer: false},
]);
});
it('allows adding single cell in middle', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 2, last: 2});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 1, isSpacer: true},
{first: 2, last: 2, isSpacer: false},
{first: 3, last: 4, isSpacer: true},
]);
});
it('allows marking entire cell range', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 0, last: 4});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 4, isSpacer: false},
]);
});
it('correctly replaces fragmented cell ranges', () => {
const renderMask = new CellRenderMask(10);
renderMask.addCells({first: 3, last: 3});
renderMask.addCells({first: 5, last: 7});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
{first: 5, last: 7, isSpacer: false},
{first: 8, last: 9, isSpacer: true},
]);
renderMask.addCells({first: 3, last: 7});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 7, isSpacer: false},
{first: 8, last: 9, isSpacer: true},
]);
});
it('left-expands region', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 3, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
renderMask.addCells({first: 2, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 1, isSpacer: true},
{first: 2, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
});
it('right-expands region', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 3, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
renderMask.addCells({first: 3, last: 4});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 4, isSpacer: false},
]);
});
it('left+right expands region', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 3, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 2, isSpacer: true},
{first: 3, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
renderMask.addCells({first: 2, last: 4});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 1, isSpacer: true},
{first: 2, last: 4, isSpacer: false},
]);
});
it('does nothing when adding existing cells', () => {
const renderMask = new CellRenderMask(5);
renderMask.addCells({first: 2, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 1, isSpacer: true},
{first: 2, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
renderMask.addCells({first: 3, last: 3});
expect(renderMask.enumerateRegions()).toEqual([
{first: 0, last: 1, isSpacer: true},
{first: 2, last: 3, isSpacer: false},
{first: 4, last: 4, isSpacer: true},
]);
});
});