fix(archive): Reset vertical scroll when navigating folders (#1172)

* fix(archive): Reset vertical scroll when navigating folders * fix(archive): Address comments * fix(archive): Address comments
box · Feb 5, 2020 · b072491 · b072491
1 parent 9b10490
commit b072491
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/src/lib/viewers/archive/ArchiveExplorer.js b/src/lib/viewers/archive/ArchiveExplorer.js
@@ -224,6 +224,7 @@ class ArchiveExplorer extends React.Component {
                                     height={height}
                                     rowData={itemList}
                                     rowGetter={this.getRowData(itemList)}
+                                    scrollToIndex={0}
                                     sort={this.handleSort}
                                     sortBy={sortBy}
                                     sortDirection={sortDirection}

diff --git a/test/integration/archive/ArchiveViewer.e2e.test.js b/test/integration/archive/ArchiveViewer.e2e.test.js
@@ -2,13 +2,14 @@
 describe('Archive Viewer', () => {
     const token = Cypress.env('ACCESS_TOKEN');
     const fileId = Cypress.env('FILE_ID_ARCHIVE');
+    const fileIdLarge = Cypress.env('FILE_ID_ARCHIVE_LARGE');
 
     beforeEach(() => {
         cy.visit('/');
-        cy.showPreview(token, fileId);
     });
 
     it('Should render correct item list', () => {
+        cy.showPreview(token, fileId);
         // clicking folder
         cy.getByTitle('Preview SDK Sample Archive').within(() => {
             cy.get('button').click();
@@ -23,6 +24,7 @@ describe('Archive Viewer', () => {
     });
 
     it('Should sort items when column header is clicked', () => {
+        cy.showPreview(token, fileId);
         cy.getByTitle('Preview SDK Sample Archive').within(() => {
             cy.get('button').click();
         });
@@ -39,6 +41,7 @@ describe('Archive Viewer', () => {
     });
 
     it('Should show matched item list based on search query', () => {
+        cy.showPreview(token, fileId);
         cy.getByTitle('Preview SDK Sample Archive').within(() => {
             cy.get('button').click();
         });
@@ -53,4 +56,30 @@ describe('Archive Viewer', () => {
         cy.getByTestId('search-input').type('vido');
         cy.contains('Video (Normal).mp4');
     });
+
+    it('Should reset scroll when navigating folders', () => {
+        cy.showPreview(token, fileIdLarge);
+
+        cy.getByTitle('Collection').within(() => {
+            cy.get('button').click();
+        });
+
+        cy.get('.ReactVirtualized__Table__Grid').then($tables => {
+            const table = $tables[0];
+            table.scrollTo(0, 50);
+
+            const tableTop = table.getBoundingClientRect().top;
+            cy.get('.ReactVirtualized__Table__row').then($rows => {
+                expect($rows[0].getBoundingClientRect().top).not.to.equal(tableTop);
+            });
+
+            cy.getByTitle('Collection Child').within(() => {
+                cy.get('button').click();
+            });
+
+            cy.get('.ReactVirtualized__Table__row').then($rows => {
+                expect($rows[0].getBoundingClientRect().top).to.equal(tableTop);
+            });
+        });
+    });
 });
diff --git a/test/support/constants.js b/test/support/constants.js
@@ -2,6 +2,7 @@ Cypress.env({
     // NOTE: The token used is a readonly token accessing public data in a demo enterprise.
     ACCESS_TOKEN: 'S8wjvjOL9GEK5VtXsQNVMOwSrx1g55oC',
     FILE_ID_ARCHIVE: '589625563707',
+    FILE_ID_ARCHIVE_LARGE: '611800378713',
     FILE_ID_BAD: '433514141824',
     FILE_ID_DOC_LARGE: '420985736453',
     FILE_ID_DOC: '415542803939',