diff --git a/src/lib/viewers/archive/SearchBar.js b/src/lib/viewers/archive/SearchBar.js
index 44435ac28..d92e921f8 100644
--- a/src/lib/viewers/archive/SearchBar.js
+++ b/src/lib/viewers/archive/SearchBar.js
@@ -8,6 +8,7 @@ const SearchBar = ({ onSearch, searchQuery }) => {
onSearch(currentTarget.value)}
placeholder={__('search_placeholder')}
type="search"
diff --git a/test/integration/archive/ArchiveViewer.e2e.test.js b/test/integration/archive/ArchiveViewer.e2e.test.js
new file mode 100644
index 000000000..9967580fd
--- /dev/null
+++ b/test/integration/archive/ArchiveViewer.e2e.test.js
@@ -0,0 +1,52 @@
+//
+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');
+ });
+});
diff --git a/test/support/constants.js b/test/support/constants.js
index bf8ff716b..9e1d41436 100644
--- a/test/support/constants.js
+++ b/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',
});