Skip to content

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Aug 15, 2025
Merged

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b58dce5
Try adding optional infinite scroll to dataviews
tellthemachines Jul 29, 2025
a8042d9
try infinite scroll on all view types
tellthemachines Jul 30, 2025
5ef7214
make `infiniteScrollHandler` a property of `paginationInfo`
tellthemachines Jul 30, 2025
8b6f5f4
Add some more moons to storybook fixtures
tellthemachines Aug 4, 2025
61736d3
Add infinite scroll story
tellthemachines Aug 4, 2025
c8f47ab
update tests referring to data fixture
tellthemachines Aug 4, 2025
83c5644
Add aria roles for feed pattern
tellthemachines Aug 5, 2025
6269827
add feed aria roles to list and table layouts
tellthemachines Aug 5, 2025
afc4ac7
try toggle group control
tellthemachines Aug 5, 2025
c7b4fba
Changelog entry
tellthemachines Aug 5, 2025
c86bb1c
Fix storybook example
tellthemachines Aug 7, 2025
47dec0d
Fix styling issues with story
tellthemachines Aug 7, 2025
ac60b59
Hide pagination when infinite scroll is enabled
tellthemachines Aug 7, 2025
9a7d7aa
Remove memoed const
tellthemachines Aug 11, 2025
bf8010e
Make posinset optional prop and remove semantics from list layout
tellthemachines Aug 11, 2025
55302da
add aria attribs to div wrapper in list layout
tellthemachines Aug 11, 2025
fd50cfa
update changelog
tellthemachines Aug 11, 2025
be34116
Add loading more text
tellthemachines Aug 11, 2025
fd42a2c
Disable when data by group
tellthemachines Aug 11, 2025
b1ecc53
move infiniteScroll to base view
tellthemachines Aug 13, 2025
074c8ae
Try simple toggle and hiding per page values
tellthemachines Aug 13, 2025
3d54442
Center-align "loading more results"
tellthemachines Aug 13, 2025
1a9d90a
Change loading more text to spinner
tellthemachines Aug 13, 2025
07b49dc
Remove post list handler meant for testing
tellthemachines Aug 14, 2025
0cb6ad2
Update property name and clean up
tellthemachines Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
update tests referring to data fixture
  • Loading branch information
@tellthemachines
tellthemachines committed Aug 13, 2025
commit c8f47ab9d08e0786a35b5d8b873396b11134e354
187 changes: 123 additions & 64 deletions packages/dataviews/src/test/filter-and-sort-data-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,10 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 1 );
expect( result[ 0 ].title ).toBe( 'Neptune' );
expect( result ).toHaveLength( 4 );
expect(
result.find( ( item ) => item.title === 'Neptune' )
).toBeDefined();
} );

it( 'should search using searchable fields (description)', () => {
Expand Down Expand Up @@ -89,13 +91,11 @@ describe( 'filters', () => {
fieldsWithArraySearch
);

// Should find items with "satellite" in categories
expect( result ).toHaveLength( 3 );
expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
'Europa',
'Io',
'Moon',
] );
// Should find items with "Moon" in categories
expect( result ).toHaveLength( 10 );
expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Europa' );
expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Io' );
expect( result.map( ( r ) => r.title ).sort() ).toContain( 'Moon' );
} );

it( 'should search over array fields case-insensitively', () => {
Expand Down Expand Up @@ -154,16 +154,23 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 9 );
expect( result ).toHaveLength( 16 );
expect( result[ 0 ].title ).toBe( 'Moon' );
expect( result[ 1 ].title ).toBe( 'Io' );
expect( result[ 2 ].title ).toBe( 'Europa' );
expect( result[ 3 ].title ).toBe( 'Mercury' );
expect( result[ 4 ].title ).toBe( 'Venus' );
expect( result[ 5 ].title ).toBe( 'Earth' );
expect( result[ 6 ].title ).toBe( 'Mars' );
expect( result[ 7 ].title ).toBe( 'Jupiter' );
expect( result[ 8 ].title ).toBe( 'Saturn' );
expect( result[ 3 ].title ).toBe( 'Ganymede' );
expect( result[ 4 ].title ).toBe( 'Callisto' );
expect( result[ 5 ].title ).toBe( 'Amalthea' );
expect( result[ 6 ].title ).toBe( 'Himalia' );
expect( result[ 7 ].title ).toBe( 'Triton' );
expect( result[ 8 ].title ).toBe( 'Nereid' );
expect( result[ 9 ].title ).toBe( 'Proteus' );
expect( result[ 10 ].title ).toBe( 'Mercury' );
expect( result[ 11 ].title ).toBe( 'Venus' );
expect( result[ 12 ].title ).toBe( 'Earth' );
expect( result[ 13 ].title ).toBe( 'Mars' );
expect( result[ 14 ].title ).toBe( 'Jupiter' );
expect( result[ 15 ].title ).toBe( 'Saturn' );
} );

it( 'should search using IS ANY filter for STRING values', () => {
Expand Down Expand Up @@ -199,10 +206,17 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 3 );
expect( result ).toHaveLength( 10 );
expect( result[ 0 ].title ).toBe( 'Moon' );
expect( result[ 1 ].title ).toBe( 'Io' );
expect( result[ 2 ].title ).toBe( 'Europa' );
expect( result[ 3 ].title ).toBe( 'Ganymede' );
expect( result[ 4 ].title ).toBe( 'Callisto' );
expect( result[ 5 ].title ).toBe( 'Amalthea' );
expect( result[ 6 ].title ).toBe( 'Himalia' );
expect( result[ 7 ].title ).toBe( 'Triton' );
expect( result[ 8 ].title ).toBe( 'Nereid' );
expect( result[ 9 ].title ).toBe( 'Proteus' );
} );

it( 'should search using IS ANY filter for ARRAY values', () => {
Expand Down Expand Up @@ -238,14 +252,21 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 7 );
expect( result ).toHaveLength( 14 );
expect( result[ 0 ].title ).toBe( 'Moon' );
expect( result[ 1 ].title ).toBe( 'Io' );
expect( result[ 2 ].title ).toBe( 'Europa' );
expect( result[ 3 ].title ).toBe( 'Neptune' );
expect( result[ 4 ].title ).toBe( 'Jupiter' );
expect( result[ 5 ].title ).toBe( 'Saturn' );
expect( result[ 6 ].title ).toBe( 'Uranus' );
expect( result[ 3 ].title ).toBe( 'Ganymede' );
expect( result[ 4 ].title ).toBe( 'Callisto' );
expect( result[ 5 ].title ).toBe( 'Amalthea' );
expect( result[ 6 ].title ).toBe( 'Himalia' );
expect( result[ 7 ].title ).toBe( 'Neptune' );
expect( result[ 8 ].title ).toBe( 'Triton' );
expect( result[ 9 ].title ).toBe( 'Nereid' );
expect( result[ 10 ].title ).toBe( 'Proteus' );
expect( result[ 11 ].title ).toBe( 'Jupiter' );
expect( result[ 12 ].title ).toBe( 'Saturn' );
expect( result[ 13 ].title ).toBe( 'Uranus' );
} );

it( 'should search using IS ALL filter', () => {
Expand Down Expand Up @@ -287,10 +308,17 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 3 );
expect( result ).toHaveLength( 10 );
expect( result[ 0 ].title ).toBe( 'Moon' );
expect( result[ 1 ].title ).toBe( 'Io' );
expect( result[ 2 ].title ).toBe( 'Europa' );
expect( result[ 3 ].title ).toBe( 'Ganymede' );
expect( result[ 4 ].title ).toBe( 'Callisto' );
expect( result[ 5 ].title ).toBe( 'Amalthea' );
expect( result[ 6 ].title ).toBe( 'Himalia' );
expect( result[ 7 ].title ).toBe( 'Triton' );
expect( result[ 8 ].title ).toBe( 'Nereid' );
expect( result[ 9 ].title ).toBe( 'Proteus' );
} );

it( 'should search using IS filter and return all values if filter.value is undefined', () => {
Expand All @@ -307,18 +335,25 @@ describe( 'filters', () => {
},
fields
);
expect( result ).toHaveLength( 11 );
expect( result ).toHaveLength( 18 );
expect( result[ 0 ].title ).toBe( 'Moon' );
expect( result[ 1 ].title ).toBe( 'Io' );
expect( result[ 2 ].title ).toBe( 'Europa' );
expect( result[ 3 ].title ).toBe( 'Neptune' );
expect( result[ 4 ].title ).toBe( 'Mercury' );
expect( result[ 5 ].title ).toBe( 'Venus' );
expect( result[ 6 ].title ).toBe( 'Earth' );
expect( result[ 7 ].title ).toBe( 'Mars' );
expect( result[ 8 ].title ).toBe( 'Jupiter' );
expect( result[ 9 ].title ).toBe( 'Saturn' );
expect( result[ 10 ].title ).toBe( 'Uranus' );
expect( result[ 3 ].title ).toBe( 'Ganymede' );
expect( result[ 4 ].title ).toBe( 'Callisto' );
expect( result[ 5 ].title ).toBe( 'Amalthea' );
expect( result[ 6 ].title ).toBe( 'Himalia' );
expect( result[ 7 ].title ).toBe( 'Neptune' );
expect( result[ 8 ].title ).toBe( 'Triton' );
expect( result[ 9 ].title ).toBe( 'Nereid' );
expect( result[ 10 ].title ).toBe( 'Proteus' );
expect( result[ 11 ].title ).toBe( 'Mercury' );
expect( result[ 12 ].title ).toBe( 'Venus' );
expect( result[ 13 ].title ).toBe( 'Earth' );
expect( result[ 14 ].title ).toBe( 'Mars' );
expect( result[ 15 ].title ).toBe( 'Jupiter' );
expect( result[ 16 ].title ).toBe( 'Saturn' );
expect( result[ 17 ].title ).toBe( 'Uranus' );
} );

it( 'should filter using LESS THAN operator for integer', () => {
Expand Down Expand Up @@ -423,11 +458,23 @@ describe( 'filters', () => {
},
fields
);
expect( result.map( ( r ) => r.description ) ).toEqual( [
'The Moon is Earth’s only natural satellite, orbiting at an average distance of 384,400 kilometers with a synchronous rotation that leads to fixed lunar phases as seen from Earth. Its cratered surface and subtle glow define night skies, inspiring exploration missions and influencing tides and biological rhythms worldwide.',
'Moon of Jupiter',
'Moon of Jupiter',
'La planète Vénus',
// Should return items that don't contain "Solar system" in description
expect( result ).toHaveLength( 11 );
expect(
result.filter( ( r ) => r.description.includes( 'Solar system' ) )
).toHaveLength( 0 );
expect( result.map( ( r ) => r.title ).sort() ).toEqual( [
'Amalthea',
'Callisto',
'Europa',
'Ganymede',
'Himalia',
'Io',
'Moon',
'Nereid',
'Proteus',
'Triton',
'Venus',
] );
} );

Expand Down Expand Up @@ -595,7 +642,7 @@ describe( 'filters', () => {
},
fields
);
expect( result.length ).toBe( 9 );
expect( result.length ).toBe( 16 );
expect( result.map( ( r ) => r.title ) ).not.toContain( 'Neptune' );
} );

Expand Down Expand Up @@ -808,7 +855,7 @@ describe( 'sorting', () => {
fields
);

expect( result ).toHaveLength( 11 );
expect( result ).toHaveLength( 18 );

expect( result[ 0 ].type ).toBe( 'Gas giant' );
expect( result[ 0 ].title ).toBe( 'Saturn' );
Expand All @@ -820,21 +867,31 @@ describe( 'sorting', () => {
expect( result[ 3 ].type ).toBe( 'Ice giant' );
expect( result[ 3 ].title ).toBe( 'Neptune' );

expect( result[ 4 ].type ).toBe( 'Satellite' );
expect( result[ 4 ].title ).toBe( 'Moon' );
expect( result[ 5 ].type ).toBe( 'Satellite' );
expect( result[ 5 ].title ).toBe( 'Io' );
expect( result[ 6 ].type ).toBe( 'Satellite' );
expect( result[ 6 ].title ).toBe( 'Europa' );

expect( result[ 7 ].type ).toBe( 'Terrestrial' );
expect( result[ 7 ].title ).toBe( 'Venus' );
expect( result[ 8 ].type ).toBe( 'Terrestrial' );
expect( result[ 8 ].title ).toBe( 'Mercury' );
expect( result[ 9 ].type ).toBe( 'Terrestrial' );
expect( result[ 9 ].title ).toBe( 'Mars' );
expect( result[ 10 ].type ).toBe( 'Terrestrial' );
expect( result[ 10 ].title ).toBe( 'Earth' );
// All satellites should be grouped together
const satelliteItems = result.filter(
( item ) => item.type === 'Satellite'
);
expect( satelliteItems ).toHaveLength( 10 );
expect( satelliteItems[ 0 ].title ).toBe( 'Triton' );
expect( satelliteItems[ 1 ].title ).toBe( 'Proteus' );
expect( satelliteItems[ 2 ].title ).toBe( 'Nereid' );
expect( satelliteItems[ 3 ].title ).toBe( 'Moon' );
expect( satelliteItems[ 4 ].title ).toBe( 'Io' );
expect( satelliteItems[ 5 ].title ).toBe( 'Himalia' );
expect( satelliteItems[ 6 ].title ).toBe( 'Ganymede' );
expect( satelliteItems[ 7 ].title ).toBe( 'Europa' );
expect( satelliteItems[ 8 ].title ).toBe( 'Callisto' );
expect( satelliteItems[ 9 ].title ).toBe( 'Amalthea' );

// All terrestrial planets should be grouped together
const terrestrialItems = result.filter(
( item ) => item.type === 'Terrestrial'
);
expect( terrestrialItems ).toHaveLength( 4 );
expect( terrestrialItems[ 0 ].title ).toBe( 'Venus' );
expect( terrestrialItems[ 1 ].title ).toBe( 'Mercury' );
expect( terrestrialItems[ 2 ].title ).toBe( 'Mars' );
expect( terrestrialItems[ 3 ].title ).toBe( 'Earth' );
} );

it( 'should sort integer field types', () => {
Expand All @@ -846,7 +903,7 @@ describe( 'sorting', () => {
fields
);

expect( result ).toHaveLength( 11 );
expect( result ).toHaveLength( 18 );
expect( result[ 0 ].title ).toBe( 'Saturn' );
expect( result[ 1 ].title ).toBe( 'Jupiter' );
expect( result[ 2 ].title ).toBe( 'Uranus' );
Expand Down Expand Up @@ -880,11 +937,12 @@ describe( 'sorting', () => {
},
fields
);
expect( resultDesc ).toHaveLength( 11 );
expect( resultDesc ).toHaveLength( 18 );
expect( resultDesc[ 0 ].title ).toBe( 'Europa' );
expect( resultDesc[ 1 ].title ).toBe( 'Earth' );
expect( resultDesc[ 9 ].title ).toBe( 'Io' );
expect( resultDesc[ 10 ].title ).toBe( 'Jupiter' );
// Skip intermediate items
expect( resultDesc[ resultDesc.length - 2 ].title ).toBe( 'Io' );
expect( resultDesc[ resultDesc.length - 1 ].title ).toBe( 'Jupiter' );

const { data: resultAsc } = filterSortAndPaginate(
data,
Expand All @@ -893,11 +951,12 @@ describe( 'sorting', () => {
},
fields
);
expect( resultAsc ).toHaveLength( 11 );
expect( resultAsc ).toHaveLength( 18 );
expect( resultAsc[ 0 ].title ).toBe( 'Jupiter' );
expect( resultAsc[ 1 ].title ).toBe( 'Io' );
expect( resultAsc[ 9 ].title ).toBe( 'Earth' );
expect( resultAsc[ 10 ].title ).toBe( 'Europa' );
// Skip intermediate items
expect( resultAsc[ resultAsc.length - 2 ].title ).toBe( 'Earth' );
expect( resultAsc[ resultAsc.length - 1 ].title ).toBe( 'Europa' );
} );

it( 'should sort untyped fields if the value is a number', () => {
Expand All @@ -914,7 +973,7 @@ describe( 'sorting', () => {
)
);

expect( result ).toHaveLength( 11 );
expect( result ).toHaveLength( 18 );
expect( result[ 0 ].title ).toBe( 'Saturn' );
expect( result[ 1 ].title ).toBe( 'Jupiter' );
expect( result[ 2 ].title ).toBe( 'Uranus' );
Expand Down Expand Up @@ -979,10 +1038,10 @@ describe( 'pagination', () => {
);
expect( result ).toHaveLength( 2 );
expect( result[ 0 ].title ).toBe( 'Europa' );
expect( result[ 1 ].title ).toBe( 'Neptune' );
expect( result[ 1 ].title ).toBe( 'Ganymede' );
expect( paginationInfo ).toStrictEqual( {
totalItems: data.length,
totalPages: 6,
totalPages: 9,
} );
} );
} );