diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-10 12:09:32 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-12-10 12:09:32 +0300 |
commit | b2e3191074dc12ca0a29a8815db65da9275d7764 (patch) | |
tree | 9c3f5e567750a912d68b4b092bcc4bc7cc61034f /spec/frontend_integration/ide | |
parent | 65952e598a194110f5894da1c42577b2b20c6336 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend_integration/ide')
-rw-r--r-- | spec/frontend_integration/ide/helpers/ide_helper.js | 13 | ||||
-rw-r--r-- | spec/frontend_integration/ide/user_opens_file_spec.js | 87 | ||||
-rw-r--r-- | spec/frontend_integration/ide/user_opens_ide_spec.js | 14 |
3 files changed, 102 insertions, 12 deletions
diff --git a/spec/frontend_integration/ide/helpers/ide_helper.js b/spec/frontend_integration/ide/helpers/ide_helper.js index d421c21df84..fe8d5f93794 100644 --- a/spec/frontend_integration/ide/helpers/ide_helper.js +++ b/spec/frontend_integration/ide/helpers/ide_helper.js @@ -5,13 +5,14 @@ import { findByTestId, getByText, screen, + findByText, } from '@testing-library/dom'; const isFolderRowOpen = row => row.matches('.folder.is-open'); const getLeftSidebar = () => screen.getByTestId('left-sidebar'); -const clickOnLeftSidebarTab = name => { +export const switchLeftSidebarTab = name => { const sidebar = getLeftSidebar(); const button = getByLabelText(sidebar, name); @@ -25,7 +26,10 @@ export const waitForMonacoEditor = () => new Promise(resolve => window.monaco.editor.onDidCreateEditor(resolve)); export const findMonacoEditor = () => - screen.findByLabelText(/Editor content;/).then(x => x.closest('.monaco-editor')); + screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-editor')); + +export const findMonacoDiffEditor = () => + screen.findAllByLabelText(/Editor content;/).then(([x]) => x.closest('.monaco-diff-editor')); export const findAndSetEditorValue = async value => { const editor = await findMonacoEditor(); @@ -114,6 +118,9 @@ export const openFile = async path => { openFileRow(row); }; +export const waitForTabToOpen = fileName => + findByText(document.querySelector('.multi-file-edit-pane'), fileName); + export const createFile = async (path, content) => { const parentPath = path .split('/') @@ -157,7 +164,7 @@ export const closeFile = async path => { }; export const commit = async () => { - clickOnLeftSidebarTab('Commit'); + switchLeftSidebarTab('Commit'); screen.getByTestId('begin-commit-button').click(); await screen.findByLabelText(/Commit to .+ branch/).then(x => x.click()); diff --git a/spec/frontend_integration/ide/user_opens_file_spec.js b/spec/frontend_integration/ide/user_opens_file_spec.js new file mode 100644 index 00000000000..7fa6dcecc9e --- /dev/null +++ b/spec/frontend_integration/ide/user_opens_file_spec.js @@ -0,0 +1,87 @@ +import { useOverclockTimers } from 'test_helpers/utils/overclock_timers'; +import { screen } from '@testing-library/dom'; +import * as ideHelper from './helpers/ide_helper'; +import startWebIDE from './helpers/start'; + +describe('IDE: User opens a file in the Web IDE', () => { + useOverclockTimers(); + + let vm; + let container; + + beforeEach(async () => { + setFixtures('<div class="webide-container"></div>'); + container = document.querySelector('.webide-container'); + + vm = startWebIDE(container); + + await screen.findByText('README'); // wait for file tree to load + }); + + afterEach(() => { + vm.$destroy(); + vm = null; + }); + + describe('user opens a directory', () => { + beforeEach(async () => { + await ideHelper.openFile('files/images'); + await screen.findByText('logo-white.png'); + }); + + it('expands directory in the left sidebar', () => { + expect(ideHelper.getFilesList()).toEqual( + expect.arrayContaining(['html', 'js', 'images', 'logo-white.png']), + ); + }); + }); + + describe('user opens a text file', () => { + beforeEach(async () => { + await ideHelper.openFile('README.md'); + await ideHelper.waitForTabToOpen('README.md'); + }); + + it('opens the file in monaco editor', async () => { + expect(await ideHelper.getEditorValue()).toContain('Sample repo for testing gitlab features'); + }); + + describe('user switches to review mode', () => { + beforeEach(() => { + ideHelper.switchLeftSidebarTab('Review'); + }); + + it('shows diff editor', async () => { + expect(await ideHelper.findMonacoDiffEditor()).toBeDefined(); + }); + }); + }); + + describe('user opens an image file', () => { + beforeEach(async () => { + await ideHelper.openFile('files/images/logo-white.png'); + await ideHelper.waitForTabToOpen('logo-white.png'); + }); + + it('opens image viewer for the file', async () => { + const viewer = await screen.findByTestId('image-viewer'); + const img = viewer.querySelector('img'); + + expect(img.src).toContain('logo-white.png'); + }); + }); + + describe('user opens a binary file', () => { + beforeEach(async () => { + await ideHelper.openFile('Gemfile.zip'); + await ideHelper.waitForTabToOpen('Gemfile.zip'); + }); + + it('opens image viewer for the file', async () => { + const downloadButton = await screen.findByText('Download'); + + expect(downloadButton.getAttribute('download')).toEqual('Gemfile.zip'); + expect(downloadButton.getAttribute('href')).toContain('/raw/'); + }); + }); +}); diff --git a/spec/frontend_integration/ide/user_opens_ide_spec.js b/spec/frontend_integration/ide/user_opens_ide_spec.js index 645d2661b18..502cb2e2c7d 100644 --- a/spec/frontend_integration/ide/user_opens_ide_spec.js +++ b/spec/frontend_integration/ide/user_opens_ide_spec.js @@ -1,5 +1,5 @@ import { useOverclockTimers } from 'test_helpers/utils/overclock_timers'; -import { findByText, screen } from '@testing-library/dom'; +import { screen } from '@testing-library/dom'; import * as ideHelper from './helpers/ide_helper'; import startWebIDE from './helpers/start'; @@ -79,8 +79,7 @@ describe('IDE: User opens IDE', () => { beforeEach(async () => { vm = startWebIDE(container, { path: 'README.md' }); - // a new tab is open for README.md - await findByText(document.querySelector('.multi-file-edit-pane'), 'README.md'); + await ideHelper.waitForTabToOpen('README.md'); }); it('opens the file and its contents are shown in Monaco', async () => { @@ -92,8 +91,7 @@ describe('IDE: User opens IDE', () => { beforeEach(async () => { vm = startWebIDE(container, { path: 'Gemfile.zip' }); - // a new tab is open for Gemfile.zip - await findByText(document.querySelector('.multi-file-edit-pane'), 'Gemfile.zip'); + await ideHelper.waitForTabToOpen('Gemfile.zip'); }); it('shows download viewer', async () => { @@ -108,8 +106,7 @@ describe('IDE: User opens IDE', () => { beforeEach(async () => { vm = startWebIDE(container, { path: 'files/images/logo-white.png' }); - // a new tab is open for logo-white.png - await findByText(document.querySelector('.multi-file-edit-pane'), 'logo-white.png'); + await ideHelper.waitForTabToOpen('logo-white.png'); }); it('shows image viewer', async () => { @@ -147,8 +144,7 @@ describe('IDE: User opens IDE', () => { beforeEach(async () => { vm = startWebIDE(container, { path: 'abracadabra/hocus-focus.txt' }); - // a new tab is open for hocus-focus.txt - await findByText(document.querySelector('.multi-file-edit-pane'), 'hocus-focus.txt'); + await ideHelper.waitForTabToOpen('hocus-focus.txt'); }); it('create new folders and file in the left sidebar', () => { |