From 2a78f0bbb6818fc0a19e1eea511ba53cd54cf34e Mon Sep 17 00:00:00 2001 From: Lukas Grossmann Date: Sat, 18 Nov 2023 22:46:56 +0100 Subject: [PATCH] Adding Create component from local codebase UI test Signed-off-by: Lukas Grossmann --- .../ui/webview/newComponentWebViewEditor.ts | 90 ++++++++++---- test/ui/suite/createComponent.ts | 111 ++++++++++++------ 2 files changed, 146 insertions(+), 55 deletions(-) diff --git a/test/ui/common/ui/webview/newComponentWebViewEditor.ts b/test/ui/common/ui/webview/newComponentWebViewEditor.ts index aea90f172..c1f450f9c 100644 --- a/test/ui/common/ui/webview/newComponentWebViewEditor.ts +++ b/test/ui/common/ui/webview/newComponentWebViewEditor.ts @@ -96,14 +96,45 @@ export class SetNameAndFolderPage extends WebViewForm { } } +abstract class Page extends WebViewForm { + public constructor() { + super('Create Component') + } + + public async clickNextButton(): Promise { + 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 { + await this.enterWebView(async (webView) => { + const button = await this.getSelectDifferentDevfileButton(webView); + await button.click() + }); + } + + private async getNextButton(webView: WebView): Promise { + return await webView.findWebElement(By.xpath('//button[contains(text(), "NEXT")]')); + } + + private async getSelectDifferentDevfileButton(webView: WebView): Promise { + 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 */ -export class GitProjectPage extends WebViewForm { +export class GitProjectPage extends Page { public constructor() { - super('Create Component'); + super(); } public async insertGitLink(link: string): Promise { @@ -113,13 +144,9 @@ export class GitProjectPage extends WebViewForm { }); } - public async clickNextButton(): Promise { - 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 { await this.enterWebView(async (webView) => { const button = await this.getContinueButton(webView); @@ -127,27 +154,50 @@ export class GitProjectPage extends WebViewForm { }); } - public async clickSelectDifferentDevfileButton(): Promise { - await this.enterWebView(async (webView) => { - const button = await this.getSelectDifferentDevfileButton(webView); - await button.click() - }); + private async getContinueButton(webView: WebView): Promise { + return await webView.findWebElement(By.xpath('//button[contains(text(), "CONTINUE WITH THIS DEVFILE")]')); } private async getGitRepositoryLinkField(webView: WebView): Promise { return await webView.findWebElement(By.xpath('//div[./label[contains(text(), "Link to Git Repository")]]//input')); } +} - private async getNextButton(webView: WebView): Promise { - return await webView.findWebElement(By.xpath('//button[contains(text(), "NEXT")]')); +export class LocalCodeBasePage extends Page { + public constructor() { + super(); } - private async getContinueButton(webView: WebView): Promise { - return await webView.findWebElement(By.xpath('//button[contains(text(), "CONTINUE WITH THIS DEVFILE")]')); + public async insertComponentName(name: string): Promise { + await this.enterWebView(async (webView) => { + const nameField = await this.getComponentNameField(webView); + await nameField.sendKeys(name) + }); } - private async getSelectDifferentDevfileButton(webView: WebView): Promise { - return await webView.findWebElement(By.xpath('//button[contains(text(), "SELECT A DIFFERENT DEVFILE")]')); + public async clickSelectFolderButton(): Promise { + await this.enterWebView(async (webView) => { + const button = await this.getSelectFolderButton(webView); + await button.click() + }); } + public async clickCreateComponent(): Promise { + await this.enterWebView(async (webView) => { + const button = await this.getCreateComponentButton(webView); + await button.click() + }); + } + + private async getComponentNameField(webView: WebView): Promise { + return await webView.findWebElement(By.xpath('//div[./label[contains(text(), "Component Name")]]//input')); + } + + private async getSelectFolderButton(webView: WebView): Promise { + return await webView.findWebElement(By.xpath('//button[contains(text(), "Select Folder")]')); + } + + private async getCreateComponentButton(webView: WebView): Promise { + return await webView.findWebElement(By.xpath('//span[contains(text(), "Create Component")]')); + } } \ No newline at end of file diff --git a/test/ui/suite/createComponent.ts b/test/ui/suite/createComponent.ts index a375d6041..ff2531427 100644 --- a/test/ui/suite/createComponent.ts +++ b/test/ui/suite/createComponent.ts @@ -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'; @@ -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(); @@ -60,23 +51,51 @@ export function testCreateComponent(path: string) { await gitPage.initializeEditor(); await gitPage.insertGitLink('https://github.com/odo-devfiles/nodejs-ex'); await gitPage.clickNextButton(); - await new Promise((res) => { setTimeout(res, 1_500)}); + await new Promise((res) => { setTimeout(res, 2_500)}); await gitPage.clickContinueButton(); await createComponent(createCompView) componentName = 'node-js-runtime'; + await new Promise((res) => { setTimeout(res, 2_500)}); 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, 1_000); }); + 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(); @@ -105,28 +124,50 @@ 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 { + async function createComponent(createCompView: CreateComponentWebView): Promise { 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 { + 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, 3_000)})); + } + + async function clickCreateComponent() { + await button.click(); + await new Promise((res) => { setTimeout(res, 3_000); }); + } - async function initializeEditor(): Promise { - const createCompView = new CreateComponentWebView(); - await createCompView.initializeEditor(); - return createCompView; - } + 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; + } + } + } + }); }