Adding create component test

Signed-off-by: Lukas Grossmann <[email protected]>

package.json

@@ -67,8 +67,8 @@
 		"test:instrument": "shx rm -rf out/src-orig && shx mv out/src out/src-orig && istanbul instrument --complete-copy --embed-source --output out/src out/src-orig",
 		"test:coverage": "npm run build && npm run test:instrument && node ./out/build/install-vscode.js && node ./out/build/run-tests.js unit",
 		"build": "npm run clean && npm run lint && npm run compile && npm run bundle-tools",
-		"cluster-ui-test": "extest setup-and-run out/test/ui/cluster-ui-test.js -o test/ui/settings.json -m test/ui/.mocharc.js -e ./test-resources/extensions -c max -i",
-		"public-ui-test": "extest setup-and-run out/test/ui/public-ui-test.js -o test/ui/settings.json -m test/ui/.mocharc.js -e ./test-resources/extensions -c max -i"
+		"cluster-ui-test": "extest setup-and-run out/test/ui/cluster-ui-test.js -o test/ui/settings.json -m test/ui/.mocharc.js -e ./test-resources/extensions -c 1.83.1 -i",
+		"public-ui-test": "extest setup-and-run out/test/ui/public-ui-test.js -o test/ui/settings.json -m test/ui/.mocharc.js -e ./test-resources/extensions -c 1.83.1 -i"
 	},
 	"dependencies": {
 		"@kubernetes/client-node": "^0.19.0",

test/ui/common/overdrives.ts

@@ -0,0 +1,18 @@
+/*-----------------------------------------------------------------------------------------------
+ *  Copyright (c) Red Hat, Inc. All rights reserved.
+ *  Licensed under the MIT License. See LICENSE file in the project root for license information.
+ *-----------------------------------------------------------------------------------------------*/
+import { ViewSection, By, waitForAttributeValue } from 'vscode-extension-tester';
+
+export async function collapse(section: ViewSection){
+    try {
+        await section.collapse();
+    } catch {
+        if (await section.isExpanded()) {
+            const mainPanel = await section.findElement(By.className('pane-header'));
+            const arrowPanel = await section.findElement(By.className('codicon'));
+            await arrowPanel.click();
+            await section.getDriver().wait(waitForAttributeValue(mainPanel, 'aria-expanded', 'false'), 2_000);
+        }
+    }
+}

test/ui/common/ui/webview/newComponentWebViewEditor.ts

@@ -0,0 +1,94 @@
+/*-----------------------------------------------------------------------------------------------
+ *  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 { WebViewForm } from './WebViewForm';
+
+//TODO: Add support for create from git page and from local codebase page
+
+/**
+ * @author [email protected]
+ * Class represents WebView of Create Component form
+ */
+
+export class CreateComponentWebView extends WebViewForm {
+
+    public constructor() {
+        super('Create Component');
+    }
+
+    private async getCreateFromTemplateButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//div[..//h6[contains(text(),"From Template Project")]]/button'));
+    }
+
+    private async getCreateFromGitButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//*[@id="root"]/div/div/div[1]/div[2]/div[3]/button'));
+    }
+
+    private async getCreateFromLocalButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//*[@id="root"]/div/div/div[1]/div[1]/div[3]/button'));
+    }
+
+    public async createComponentFromTemplate(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            const button = await this.getCreateFromTemplateButton(webView);
+            await button.click();
+        });
+    }
+
+    public async createComponentFromGit(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            await (await this.getCreateFromGitButton(webView)).click();
+        });
+    }
+
+    public async createComponentFromLocalCodebase(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            await (await this.getCreateFromLocalButton(webView)).click();
+        });
+    }
+}
+
+/**
+ * Class represents page that shows up after selecting a devfile
+*/
+export class TemplateProjectPage extends WebViewForm{
+
+    public constructor(name: string) {
+        super(name);
+    }
+
+    public async insertProjectFolderPath(path: string): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            const pathField = await this.getProjectFolderPathField(webView);
+            await pathField.sendKeys(path);
+        });
+    }
+
+    public async clickSelectFolder(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            const button = await this.getSelectFolderButton(webView);
+            await button.click();
+        })
+    }
+
+    public async clickCreateComponentButton(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            const button = await this.getCreateComponentButton(webView);
+            await button.click();
+        });
+    }
+
+    private async getSelectFolderButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//button[contains(text(), "Select Folder")]'));
+    }
+
+    private async getProjectFolderPathField(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//div[./label[contains(text(), "Project Folder Path")]]//input'));
+    }
+
+    private async getCreateComponentButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//span[contains(text(), "Create Component")]'));
+    }
+}

test/ui/common/ui/webview/registryWebViewEditor.ts

@@ -6,7 +6,7 @@ import { By, ModalDialog, WebElement, WebView } from 'vscode-extension-tester';
 import { WebViewForm } from './WebViewForm';
 
 /**
- * @author [email protected]
+ * @author [email protected], [email protected]
  * Class represents Registry Stack item in web View form
  */
 export class RegistryStackItem {
@@ -93,3 +93,33 @@ export class RegistryWebViewEditor extends WebViewForm {
         });
     }
 }
+
+export class RegistryWebViewDevfileWindow extends WebViewForm {
+    //TODO: Add more functionality to class to cover all elements
+
+    public constructor(name: string) {
+        super(name)
+    }
+
+    public async clickListBox(): Promise<void> {
+        await (await this.getListBox()).click();
+    }
+
+    public async getListBox(): Promise<WebElement> {
+        const listBox = this.enterWebView( async (webView) => {
+            return await webView.findWebElement(By.xpath('//svg[@data-testid="ArrowDropDownIcon"]'));
+        })
+        return listBox;
+    }
+
+    public async useDevfile(): Promise<void> {
+        await this.enterWebView(async (webView) => {
+            const button = await this.getUseDevfileButton(webView);
+            await button.click();
+        });
+    }
+
+    private async getUseDevfileButton(webView: WebView): Promise<WebElement> {
+        return await webView.findWebElement(By.xpath('//button[contains(text(), "Use Devfile")]'));
+    }
+}

test/ui/public-ui-test.ts

@@ -4,6 +4,7 @@
  *-----------------------------------------------------------------------------------------------*/
 
 import { checkAboutCommand } from './suite/command-about';
+import path = require('path');
 import { testCreateComponent } from './suite/createComponent';
 import { testDevfileRegistries } from './suite/devfileRegistries';
 import { checkExtension } from './suite/extension';
@@ -13,10 +14,12 @@ import { checkOpenshiftView } from './suite/openshift';
 require('source-map-support').install();
 
 describe('Extension public-facing UI tests', function() {
+    const contextFolder = path.join(__dirname, 'context');
+
     checkExtension();
     checkOpenshiftView();
     checkAboutCommand();
     testDevfileRegistries();
     checkFocusOnCommands();
-    testCreateComponent();
+    testCreateComponent(contextFolder);
 });

test/ui/suite/createComponent.ts

@@ -2,15 +2,96 @@
  *  Copyright (c) Red Hat, Inc. All rights reserved.
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
+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 { VIEWS, BUTTONS } from '../common/constants';
+import { CreateComponentWebView, TemplateProjectPage } from '../common/ui/webview/newComponentWebViewEditor';
+import { RegistryWebViewDevfileWindow, RegistryWebViewEditor } from '../common/ui/webview/registryWebViewEditor';
+import { afterEach } from 'mocha';
+import { collapse } from '../common/overdrives';
 
-export function testCreateComponent() {
+//TODO: Add more checks for different elements
+export function testCreateComponent(path: string) {
     describe('Create Component Wizard', function () {
 
+        let view: SideBarView;
+        let section: ViewSection;
+        let button: WelcomeContentButton
+        let componentName: string
+
+        before(async function context() {
+            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))
+            }
+        });
+
+        beforeEach(async function context() {
+            componentName = undefined;
+            section = await view.getContent().getSection(VIEWS.components);
+            await new EditorView().closeAllEditors();
+        })
+
+        it('Shows default actions when no component exists', async function test() {
+            const buttons = await (await section.findWelcomeContent()).getButtons();
+            for(const btn of buttons) {
+                if(await btn.getTitle() === BUTTONS.newComponent) {
+                    button = btn;
+                }
+            }
+            if(!button) {
+                expect.fail('No Create Component button found')
+            }
+        })
+
         it('Create component from git URL');
 
         it('Create component from local folder');
 
-        it('Create component from template project');
+        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, 4_000); });
+
+            //Initialize create component editor and select create from template
+            const createCompView = new CreateComponentWebView();
+            await createCompView.initializeEditor();
+            await createCompView.createComponentFromTemplate();
+
+            //Initialize devfile editor and select stack
+            const devfileView = new RegistryWebViewEditor(createCompView.editorName);
+            await devfileView.initializeEditor();
+            await devfileView.selectRegistryStack('Node.js Runtime');
+            await new Promise((res) => { setTimeout(res, 500); });
+
+            //Initialize stack window and click Use Devfile
+            const devFileWindow = new RegistryWebViewDevfileWindow(createCompView.editorName);
+            await devFileWindow.initializeEditor();
+            await devFileWindow.useDevfile();
+
+            //Initialize next page, fill out path and select create component
+            const page = new TemplateProjectPage(createCompView.editorName);
+            await page.initializeEditor();
+            await page.insertProjectFolderPath(path);
+            await page.clickCreateComponentButton();
+            await new Promise((res  => {setTimeout(res, 7_000)}))
+
+            //check if component is in component view
+            componentName = 'nodejs-starter'
+            expect(await section.findItem(componentName)).to.be.not.undefined;
+
+        });
 
+        //Delete the component using file system
+        afterEach(function context() {
+            if(componentName) {
+                fs.rmSync(pth.join(path, componentName), {recursive: true, force: true});
+            }
+        });
     });
 }

test/ui/suite/openshift.ts

@@ -3,21 +3,9 @@
  *  Licensed under the MIT License. See LICENSE file in the project root for license information.
  *-----------------------------------------------------------------------------------------------*/
 import { expect } from 'chai';
-import { ActivityBar, By, CustomTreeSection, SideBarView, ViewSection, WelcomeContentSection, Workbench, waitForAttributeValue } from 'vscode-extension-tester';
+import { ActivityBar, CustomTreeSection, SideBarView, ViewSection, WelcomeContentSection, Workbench } from 'vscode-extension-tester';
 import { BUTTONS, VIEWS } from '../common/constants';
-
-async function collapse(section: ViewSection){
-    try {
-        await section.collapse();
-    } catch {
-        if (await section.isExpanded()) {
-            const mainPanel = await section.findElement(By.className('pane-header'));
-            const arrowPanel = await section.findElement(By.className('codicon'));
-            await arrowPanel.click();
-            await section.getDriver().wait(waitForAttributeValue(mainPanel, 'aria-expanded', 'false'), 2_000);
-        }
-    }
-}
+import { collapse } from '../common/overdrives';
 
 export function checkOpenshiftView() {
     describe('OpenShift View', function() {