1 files changed, 32 insertions, 1 deletions

diff --git a/spec/frontend/blob/csv/csv_viewer_spec.js b/spec/frontend/blob/csv/csv_viewer_spec.js
index 8f105f04aa7..04d11011e70 100644
--- a/spec/frontend/blob/csv/csv_viewer_spec.js
+++ b/spec/frontend/blob/csv/csv_viewer_spec.js
@@ -1,10 +1,12 @@
-import { GlLoadingIcon, GlTable } from '@gitlab/ui';
+import { GlLoadingIcon, GlTable, GlButton } from '@gitlab/ui';
 import { getAllByRole } from '@testing-library/dom';
 import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Papa from 'papaparse';
 import CsvViewer from '~/blob/csv/csv_viewer.vue';
 import PapaParseAlert from '~/vue_shared/components/papa_parse_alert.vue';
+import { s__ } from '~/locale';
+import { MAX_ROWS_TO_RENDER } from '~/blob/csv/constants';
 
 const validCsv = 'one,two,three';
 const brokenCsv = '{\n "json": 1,\n "key": [1, 2, 3]\n}';
@@ -28,6 +30,8 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
   const findCsvTable = () => wrapper.findComponent(GlTable);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAlert = () => wrapper.findComponent(PapaParseAlert);
+  const findSwitchToRawViewBtn = () => wrapper.findComponent(GlButton);
+  const findLargeCsvText = () => wrapper.find('[data-testid="large-csv-text"]');
 
   it('should render loading spinner', () => {
     createComponent();
@@ -76,6 +80,33 @@ describe('app/assets/javascripts/blob/csv/csv_viewer.vue', () => {
     });
   });
 
+  describe('when the CSV is larger than 2000 lines', () => {
+    beforeEach(async () => {
+      const largeCsv = validCsv.repeat(3000);
+      jest.spyOn(Papa, 'parse').mockImplementation(() => {
+        return { data: largeCsv.split(','), errors: [] };
+      });
+      createComponent({ csv: largeCsv });
+      await nextTick();
+    });
+    it('renders not more than max rows value', () => {
+      expect(Papa.parse).toHaveBeenCalledTimes(1);
+      expect(wrapper.vm.items).toHaveLength(MAX_ROWS_TO_RENDER);
+    });
+    it('renders large csv text', () => {
+      expect(findLargeCsvText().text()).toBe(
+        s__(
+          'CsvViewer|The file is too large to render all the rows. To see the entire file, switch to the raw view.',
+        ),
+      );
+    });
+    it('renders button with link to raw view', () => {
+      const url = 'http://test.host/?plain=1';
+      expect(findSwitchToRawViewBtn().text()).toBe(s__('CsvViewer|View raw data'));
+      expect(findSwitchToRawViewBtn().attributes('href')).toBe(url);
+    });
+  });
+
   describe('when csv prop is path and indicates a remote file', () => {
     it('should render call parse with download flag true', async () => {
       const path = 'path/to/remote/file.csv';