Skip to content

Commit

Permalink
Adding Create component from local codebase UI test
Browse files Browse the repository at this point in the history 
Signed-off-by: Lukas Grossmann <[email protected]>
  • Loading branch information
@datho7561
Lukas Grossmann authored and datho7561 committed Nov 21, 2023
1 parent b2e0511 commit a99f237
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 61 deletions.
101 changes: 80 additions & 21 deletions test/ui/common/ui/webview/newComponentWebViewEditor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Copyright (c) Red Hat, Inc. All rights reserved.
* Licensed under the MIT License. See LICENSE file in the project root for license information.
*-----------------------------------------------------------------------------------------------*/
import { By, WebElement, WebView } from 'vscode-extension-tester';
import { By, Key, WebElement, WebView } from 'vscode-extension-tester';
import { WebViewForm } from './WebViewForm';

//TODO: Add support for create from git page and from local codebase page
Expand Down Expand Up @@ -69,6 +69,15 @@ export class SetNameAndFolderPage extends WebViewForm {
});
}

public async clearProjectFolderPath(): Promise<void> {
await this.enterWebView(async (webView) => {
const pathField = await this.getProjectFolderPathField(webView);
const controlKey = process.platform === 'darwin' ? Key.COMMAND : Key.CONTROL
await pathField.sendKeys(`${controlKey} ${'a'}`);
await pathField.sendKeys(Key.DELETE);
});
}

public async clickSelectFolder(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getSelectFolderButton(webView);
Expand Down Expand Up @@ -96,14 +105,45 @@ export class SetNameAndFolderPage extends WebViewForm {
}
}

abstract class Page extends WebViewForm {
public constructor() {
super('Create Component')
}

public async clickNextButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getNextButton(webView);
await button.click();
})
}

/**
* The button is shown only after filling all necessary fields and clicking the "Next" button
*/
public async clickSelectDifferentDevfileButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getSelectDifferentDevfileButton(webView);
await button.click()
});
}

private async getNextButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "NEXT")]'));
}

private async getSelectDifferentDevfileButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "SELECT A DIFFERENT DEVFILE")]'));
}
}

/**
* Class represents page that shows up after selecting to create a component from Git
* @author Lukas Grossmann <[email protected]>
*/
export class GitProjectPage extends WebViewForm {
export class GitProjectPage extends Page {

public constructor() {
super('Create Component');
super();
}

public async insertGitLink(link: string): Promise<void> {
Expand All @@ -113,41 +153,60 @@ export class GitProjectPage extends WebViewForm {
});
}

public async clickNextButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getNextButton(webView);
await button.click();
})
}

/**
* The button is shown only after filling all necessary fields and clicking the "Next" button
*/
public async clickContinueButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getContinueButton(webView);
await button.click()
});
}

public async clickSelectDifferentDevfileButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getSelectDifferentDevfileButton(webView);
await button.click()
});
private async getContinueButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "CONTINUE WITH THIS DEVFILE")]'));
}

private async getGitRepositoryLinkField(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//div[./label[contains(text(), "Link to Git Repository")]]//input'));
}
}

private async getNextButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "NEXT")]'));
export class LocalCodeBasePage extends Page {
public constructor() {
super();
}

private async getContinueButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "CONTINUE WITH THIS DEVFILE")]'));
public async insertComponentName(name: string): Promise<void> {
await this.enterWebView(async (webView) => {
const nameField = await this.getComponentNameField(webView);
await nameField.sendKeys(name)
});
}

private async getSelectDifferentDevfileButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "SELECT A DIFFERENT DEVFILE")]'));
public async clickSelectFolderButton(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getSelectFolderButton(webView);
await button.click()
});
}

public async clickCreateComponent(): Promise<void> {
await this.enterWebView(async (webView) => {
const button = await this.getCreateComponentButton(webView);
await button.click()
});
}

private async getComponentNameField(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//div[./label[contains(text(), "Component Name")]]//input'));
}

private async getSelectFolderButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//button[contains(text(), "Select Folder")]'));
}

private async getCreateComponentButton(webView: WebView): Promise<WebElement> {
return await webView.findWebElement(By.xpath('//span[contains(text(), "Create Component")]'));
}
}
121 changes: 81 additions & 40 deletions test/ui/suite/createComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
import * as fs from 'fs-extra';
import * as pth from 'path';
import { expect } from 'chai';
import { ActivityBar, EditorView, SideBarView, ViewSection, WelcomeContentButton } from 'vscode-extension-tester';
import { ActivityBar, EditorView, InputBox, SideBarView, ViewSection, WelcomeContentButton } from 'vscode-extension-tester';
import { VIEWS, BUTTONS } from '../common/constants';
import { CreateComponentWebView, GitProjectPage, SetNameAndFolderPage } from '../common/ui/webview/newComponentWebViewEditor';
import { CreateComponentWebView, GitProjectPage, LocalCodeBasePage, SetNameAndFolderPage } from '../common/ui/webview/newComponentWebViewEditor';
import { RegistryWebViewDevfileWindow, RegistryWebViewEditor } from '../common/ui/webview/registryWebViewEditor';
import { afterEach } from 'mocha';
import { collapse } from '../common/overdrives';
Expand All @@ -20,38 +20,29 @@ export function testCreateComponent(path: string) {
let section: ViewSection;
let button: WelcomeContentButton
let componentName: string
let dlt = true;

before(async function context() {
this.timeout(10_000)
await new EditorView().closeAllEditors();
fs.ensureDirSync(path, 0o6777);
view = await (await new ActivityBar().getViewControl(VIEWS.openshift)).openView();
for (const item of [VIEWS.appExplorer, VIEWS.compRegistries, VIEWS.serverlessFunctions, VIEWS.debugSessions]) {
await collapse(await view.getContent().getSection(item))
}
await loadCreateComponentButton();
});

beforeEach(async function context() {
componentName = undefined;
section = await view.getContent().getSection(VIEWS.components);
await new EditorView().closeAllEditors();
const buttons = await (await section.findWelcomeContent()).getButtons();
for(const btn of buttons) {
if(await btn.getTitle() === BUTTONS.newComponent) {
button = btn;
}
}
})

it('Shows default actions when no component exists', function test() {
if(!button) {
expect.fail('No Create Component button found')
}
})
});

it('Create component from git URL', async function test() {
this.timeout(25_000);

await button.click();
await new Promise((res) => { setTimeout(res, 3_000); });
await clickCreateComponent();

const createCompView = await initializeEditor();
await createCompView.createComponentFromGit();
Expand All @@ -67,16 +58,43 @@ export function testCreateComponent(path: string) {

componentName = 'node-js-runtime';
expect(await section.findItem(componentName)).to.be.not.undefined;

dlt = false
});

it('Create component from local folder');
it('Create component from local folder', async function test() {
this.timeout(25_000)
fs.rmSync(pth.join(path, componentName, 'devfile.yaml'), {force: true});
await refreshView();
await loadCreateComponentButton();
await clickCreateComponent();

const createCompView = await initializeEditor();
await createCompView.createComponentFromLocalCodebase();

const localCodeBasePage = new LocalCodeBasePage();
await localCodeBasePage.initializeEditor();
await localCodeBasePage.insertComponentName(componentName)
await localCodeBasePage.clickSelectFolderButton();

const input = await InputBox.create();
await input.setText(pth.join(path, componentName));
await input.confirm();

await localCodeBasePage.clickNextButton();
await new Promise((res) => { setTimeout(res, 500); });
await localCodeBasePage.clickCreateComponent();
await new Promise((res) => { setTimeout(res, 6_000); });

expect(await section.findItem(componentName)).to.be.not.undefined;
dlt = true
});

it('Create component from template project', async function test() {
this.timeout(25_000);

//Click on create component
await button.click();
await new Promise((res) => { setTimeout(res, 3_000); });
await clickCreateComponent();

//Initialize create component editor and select create from template
const createCompView = await initializeEditor();
Expand Down Expand Up @@ -105,28 +123,51 @@ export function testCreateComponent(path: string) {
//Delete the component using file system
afterEach(async function context() {
this.timeout(30_000)
if(componentName) {
if(componentName && dlt) {
fs.rmSync(pth.join(path, componentName), {recursive: true, force: true});
await section.collapse();
await section.expand();
const refresh = await section.getAction('Refresh Components View');
await refresh.click();
await new Promise((res => {setTimeout(res, 1_000)}));
componentName = undefined;
await refreshView();
await loadCreateComponentButton();
}
await new EditorView().closeAllEditors();
});
});

async function createComponent(createCompView: CreateComponentWebView): Promise<void> {
const page = new SetNameAndFolderPage(createCompView.editorName);
await page.initializeEditor();
await page.insertProjectFolderPath(path);
await page.clickCreateComponentButton();
await new Promise((res => {setTimeout(res, 6_000)}))
}

async function initializeEditor(): Promise<CreateComponentWebView> {
const createCompView = new CreateComponentWebView();
await createCompView.initializeEditor();
return createCompView;
}
async function createComponent(createCompView: CreateComponentWebView): Promise<void> {
const page = new SetNameAndFolderPage(createCompView.editorName);
await page.initializeEditor();
await page.clearProjectFolderPath();
await page.insertProjectFolderPath(path);
await page.clickCreateComponentButton();
await new Promise((res => {setTimeout(res, 6_000)}))
}

async function initializeEditor(): Promise<CreateComponentWebView> {
const createCompView = new CreateComponentWebView();
await createCompView.initializeEditor();
return createCompView;
}

async function refreshView() {
await section.collapse();
await section.expand();
const refresh = await section.getAction('Refresh Components View');
await refresh.click();
await new Promise((res => {setTimeout(res, 1_000)}));
}

async function clickCreateComponent() {
await button.click();
await new Promise((res) => { setTimeout(res, 3_000); });
}

async function loadCreateComponentButton() {
section = await view.getContent().getSection(VIEWS.components);
const buttons = await (await section.findWelcomeContent()).getButtons();
for(const btn of buttons) {
if(await btn.getTitle() === BUTTONS.newComponent) {
button = btn;
}
}
}
});
}

0 comments on commit a99f237

Please sign in to comment.