diff options
Diffstat (limited to 'spec/frontend/blob/csv/csv_viewer_spec.js')
-rw-r--r-- | spec/frontend/blob/csv/csv_viewer_spec.js | 33 |
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'; |