test(archive): Add e2e test

src/lib/viewers/archive/SearchBar.js

@@ -8,6 +8,7 @@ const SearchBar = ({ onSearch, searchQuery }) => {
             <input
                 aria-label={__('search')}
                 data-resin-target="searchInput"
+                data-testid="search-input"
                 onChange={({ currentTarget }) => onSearch(currentTarget.value)}
                 placeholder={__('search_placeholder')}
                 type="search"

test/integration/archive/ArchiveViewer.e2e.test.js

@@ -0,0 +1,52 @@
+// <reference types="Cypress" />
+describe('Archive Viewer', () => {
+    const token = Cypress.env('ACCESS_TOKEN');
+    const fileId = Cypress.env('FILE_ID_ARCHIVE');
+
+    beforeEach(() => {
+        cy.visit('/');
+        cy.showPreview(token, fileId);
+    });
+
+    it('Should render correct item list', () => {
+        // clicking folder
+        cy.getByTitle('Preview SDK Sample Archive').within(() => {
+            cy.get('button').click();
+        });
+        cy.contains('Level 1 Folder').click();
+        cy.contains('XSS.txt');
+        cy.contains('Level 2 Folder').click();
+        cy.contains('Video (Normal).mp4');
+        // clicking breadcrumb
+        cy.contains('Level 1 Folder').click();
+        cy.contains('XSS.txt');
+    });
+
+    it('Should sort items when column header is clicked', () => {
+        cy.getByTitle('Preview SDK Sample Archive').within(() => {
+            cy.get('button').click();
+        });
+
+        cy.getByTitle('Name').click();
+
+        cy.get('.ReactVirtualized__Table__row')
+            .first()
+            .contains('Audio.mp3');
+    });
+
+    it('Should show matched item list based on search query', () => {
+        cy.getByTitle('Preview SDK Sample Archive').within(() => {
+            cy.get('button').click();
+        });
+
+        cy.getByTestId('search-input').type('level');
+        cy.contains('Level 2 Folder');
+
+        cy.getByTestId('search-input').clear();
+        cy.contains('Preview SDK Sample Excel.xlsx');
+
+        // fuzzy search
+        cy.getByTestId('search-input').type('vido');
+        cy.contains('Video (Normal).mp4');
+    });
+});

test/support/constants.js

@@ -1,6 +1,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_BAD: '433514141824',
     FILE_ID_DOC_LARGE: '420985736453',
     FILE_ID_DOC: '415542803939',
@@ -16,5 +17,5 @@ Cypress.env({
     FILE_ID_TXT: '420870357452',
     FILE_ID_VIDEO_SMALL: '415542846356',
     FILE_ID_VIDEO_SUBTITLES_TRACKS: '415542245854',
-    FILE_ID_VIDEO: '416047501580'
+    FILE_ID_VIDEO: '416047501580',
 });