Commit 1068efd8 authored by David O'Regan's avatar David O'Regan

Merge branch '270092-ide-user-opens-file' into 'master'

Add specs for when user opens files/folders in Web IDE

See merge request gitlab-org/gitlab!49501
parents 07705473 3aaa32e9
...@@ -5,13 +5,14 @@ import { ...@@ -5,13 +5,14 @@ import {
findByTestId, findByTestId,
getByText, getByText,
screen, screen,
findByText,
} from '@testing-library/dom'; } from '@testing-library/dom';
const isFolderRowOpen = row => row.matches('.folder.is-open'); const isFolderRowOpen = row => row.matches('.folder.is-open');
const getLeftSidebar = () => screen.getByTestId('left-sidebar'); const getLeftSidebar = () => screen.getByTestId('left-sidebar');
const clickOnLeftSidebarTab = name => { export const switchLeftSidebarTab = name => {
const sidebar = getLeftSidebar(); const sidebar = getLeftSidebar();
const button = getByLabelText(sidebar, name); const button = getByLabelText(sidebar, name);
...@@ -25,7 +26,10 @@ export const waitForMonacoEditor = () => ...@@ -25,7 +26,10 @@ export const waitForMonacoEditor = () =>
new Promise(resolve => window.monaco.editor.onDidCreateEditor(resolve)); new Promise(resolve => window.monaco.editor.onDidCreateEditor(resolve));
export const findMonacoEditor = () => 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 => { export const findAndSetEditorValue = async value => {
const editor = await findMonacoEditor(); const editor = await findMonacoEditor();
...@@ -114,6 +118,9 @@ export const openFile = async path => { ...@@ -114,6 +118,9 @@ export const openFile = async path => {
openFileRow(row); openFileRow(row);
}; };
export const waitForTabToOpen = fileName =>
findByText(document.querySelector('.multi-file-edit-pane'), fileName);
export const createFile = async (path, content) => { export const createFile = async (path, content) => {
const parentPath = path const parentPath = path
.split('/') .split('/')
...@@ -157,7 +164,7 @@ export const closeFile = async path => { ...@@ -157,7 +164,7 @@ export const closeFile = async path => {
}; };
export const commit = async () => { export const commit = async () => {
clickOnLeftSidebarTab('Commit'); switchLeftSidebarTab('Commit');
screen.getByTestId('begin-commit-button').click(); screen.getByTestId('begin-commit-button').click();
await screen.findByLabelText(/Commit to .+ branch/).then(x => x.click()); await screen.findByLabelText(/Commit to .+ branch/).then(x => x.click());
......
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/');
});
});
});
import { useOverclockTimers } from 'test_helpers/utils/overclock_timers'; 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 * as ideHelper from './helpers/ide_helper';
import startWebIDE from './helpers/start'; import startWebIDE from './helpers/start';
...@@ -79,8 +79,7 @@ describe('IDE: User opens IDE', () => { ...@@ -79,8 +79,7 @@ describe('IDE: User opens IDE', () => {
beforeEach(async () => { beforeEach(async () => {
vm = startWebIDE(container, { path: 'README.md' }); vm = startWebIDE(container, { path: 'README.md' });
// a new tab is open for README.md await ideHelper.waitForTabToOpen('README.md');
await findByText(document.querySelector('.multi-file-edit-pane'), 'README.md');
}); });
it('opens the file and its contents are shown in Monaco', async () => { it('opens the file and its contents are shown in Monaco', async () => {
...@@ -92,8 +91,7 @@ describe('IDE: User opens IDE', () => { ...@@ -92,8 +91,7 @@ describe('IDE: User opens IDE', () => {
beforeEach(async () => { beforeEach(async () => {
vm = startWebIDE(container, { path: 'Gemfile.zip' }); vm = startWebIDE(container, { path: 'Gemfile.zip' });
// a new tab is open for Gemfile.zip await ideHelper.waitForTabToOpen('Gemfile.zip');
await findByText(document.querySelector('.multi-file-edit-pane'), 'Gemfile.zip');
}); });
it('shows download viewer', async () => { it('shows download viewer', async () => {
...@@ -108,8 +106,7 @@ describe('IDE: User opens IDE', () => { ...@@ -108,8 +106,7 @@ describe('IDE: User opens IDE', () => {
beforeEach(async () => { beforeEach(async () => {
vm = startWebIDE(container, { path: 'files/images/logo-white.png' }); vm = startWebIDE(container, { path: 'files/images/logo-white.png' });
// a new tab is open for logo-white.png await ideHelper.waitForTabToOpen('logo-white.png');
await findByText(document.querySelector('.multi-file-edit-pane'), 'logo-white.png');
}); });
it('shows image viewer', async () => { it('shows image viewer', async () => {
...@@ -147,8 +144,7 @@ describe('IDE: User opens IDE', () => { ...@@ -147,8 +144,7 @@ describe('IDE: User opens IDE', () => {
beforeEach(async () => { beforeEach(async () => {
vm = startWebIDE(container, { path: 'abracadabra/hocus-focus.txt' }); vm = startWebIDE(container, { path: 'abracadabra/hocus-focus.txt' });
// a new tab is open for hocus-focus.txt await ideHelper.waitForTabToOpen('hocus-focus.txt');
await findByText(document.querySelector('.multi-file-edit-pane'), 'hocus-focus.txt');
}); });
it('create new folders and file in the left sidebar', () => { it('create new folders and file in the left sidebar', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment