Merge pull request #687 from GNS3/e2e

Introducing E2E tests in GNS3 Web UI

e2e/app.e2e-spec.ts

@@ -1,14 +1,20 @@
 import { Gns3WebUiPage } from './app.po';
 
-describe('gns3-web-ui App', () => {
+describe('GNS3 Web UI Application', () => {
   let page: Gns3WebUiPage;
 
   beforeEach(() => {
     page = new Gns3WebUiPage();
   });
 
-  it('should display title', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('GNS3 Web UI');
+  it('should have correct page title', async () => {
+    // arrange
+    await page.navigateTo();
+    
+    // act
+    let text = await page.getTitleText();
+
+    // assert
+    expect(text).toEqual('GNS3 Web UI');
   });
 });

e2e/app.po.ts

@@ -6,7 +6,7 @@ export class Gns3WebUiPage {
   }
 
   getTitleText() {
-    return browser.getTitle();
+    return browser.driver.getTitle();
   }
 
   getParagraphText() {

e2e/helpers/common.po.ts

@@ -0,0 +1,22 @@
+import { browser, by, element } from 'protractor';
+import { ServersPage } from './server.po';
+
+export class TestHelper {
+    sleep(value: number) {
+        browser.sleep(value);
+    }
+
+    waitForLoading() {
+        browser.waitForAngular();
+    }
+
+    async asyncForEach(array, callback) {
+        for (let index = 0; index < array.length; index++) {
+            await callback(array[index], index, array);
+        }
+    }
+
+    getCurrentUrl() {
+        return browser.getCurrentUrl();
+    }
+}

e2e/helpers/project-map.po.ts

@@ -0,0 +1,50 @@
+import { TestHelper } from "./common.po"
+import { browser, by } from "protractor";
+
+export class ProjectMapPage {
+    helper = new TestHelper();
+
+    async openAddProjectDialog() {
+        let addButton = await browser.driver.findElement(by.css('button.addNode'));
+        await addButton.click();
+    }
+
+    async addNode() {
+        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+        await inputs[0].sendKeys('VPCS');
+        this.helper.sleep(1000);
+
+        let selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+        await selects[1].click();
+        this.helper.sleep(1000);
+
+        let options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+        await options[1].click(); //first option should be chosen
+        this.helper.sleep(1000);
+
+        // new select appears after refreshing data
+        selects = await browser.driver.findElements(by.css('mat-select.mat-select'));
+        if (selects[2]) {
+            await selects[2].click();
+            this.helper.sleep(1000);
+    
+            options = await browser.driver.findElements(by.css('mat-option.mat-option'));
+            await options[0].click();
+            this.helper.sleep(1000);
+        }
+
+        let addButton = await browser.driver.findElement(by.css('button.addButton'));
+        await addButton.click();
+        this.helper.sleep(1000);
+    }
+
+    async verifyIfNodeWithLabelExists(labelToFind: string) {
+        this.helper.sleep(5000);
+        let nodeLabel = await browser.driver.findElement(by.css('#map > g > g.layer > g.nodes > g > g > g > g > text'));
+        let selectedNode;
+        let textFromNodeLabel = await nodeLabel.getText();
+        if (textFromNodeLabel == labelToFind) selectedNode = nodeLabel;
+
+        return selectedNode ? true : false;
+    }
+}

e2e/helpers/project.po.ts

@@ -0,0 +1,20 @@
+import { TestHelper } from "./common.po"
+import { browser, by } from "protractor";
+
+export class ProjectsPage {
+    helper = new TestHelper();
+
+    async openAddProjectDialog() {
+        let addButton = await browser.driver.findElement(by.css('button.add-button'));
+        await addButton.click();
+    }
+
+    async createProject() {
+        let today = new Date();
+        let inputs = await browser.driver.findElements(by.css('input.mat-input-element'));
+        await inputs[1].sendKeys('test project ' + today.getUTCMilliseconds());
+        this.helper.sleep(2000);
+        let dialogButton = await browser.driver.findElement(by.css('button.add-project-button'));
+        await dialogButton.click();
+    }
+}

e2e/helpers/server.po.ts

@@ -0,0 +1,41 @@
+import { browser, by, element } from 'protractor';
+import { TestHelper } from './common.po';
+
+export class ServersPage {
+    helper = new TestHelper;
+
+    maximizeWindow() {
+        browser.driver.manage().window().maximize();
+    }
+
+    navigateToServersPage() {
+        return browser.get('/servers');
+    }
+
+    getAddServerNotificationText() {
+        return browser.driver.findElement(by.className('mat-card-content')).getText();
+    }
+
+    async clickAddServer() {
+        let serversTable = await this.checkServersTable();
+        if (serversTable.length === 0) {
+            let buttons = await browser.driver.findElements(by.className('mat-button mat-button-base'));
+            await buttons[3].click();   
+        }
+    }
+
+    checkServersTable() {
+        return browser.driver.findElements(by.css('mat-cell'));
+    }
+
+    async navigateToServerProjects() {
+        this.helper.sleep(2000);
+        let hyperlinks = await browser.driver.findElements(by.css('a.table-link'));
+        let serverLink;
+        await this.helper.asyncForEach(hyperlinks, async element => {
+            let text = await element.getText();
+            if (text === '127.0.0.1') serverLink = element;
+        });
+        await serverLink.click();
+    }
+}

e2e/project-map.e2e-spec.ts

@@ -0,0 +1,41 @@
+import { ServersPage } from './helpers/server.po';
+import { TestHelper } from './helpers/common.po';
+import { element } from 'protractor';
+import { ProjectsPage } from './helpers/project.po';
+import { ProjectMapPage } from './helpers/project-map.po';
+
+describe('Project map page', () => {
+    let serversPage: ServersPage;
+    let projectsPage: ProjectsPage;
+    let projectMapPage: ProjectMapPage;
+    let helper: TestHelper;
+
+    beforeEach(async () => {
+        serversPage = new ServersPage();
+        projectsPage = new ProjectsPage();
+        projectMapPage = new ProjectMapPage();
+        helper = new TestHelper();
+
+        serversPage.maximizeWindow();
+        await serversPage.navigateToServersPage();
+        await serversPage.clickAddServer();
+        await serversPage.navigateToServerProjects();
+        await projectsPage.openAddProjectDialog();
+        helper.sleep(2000);
+        await projectsPage.createProject();
+        helper.sleep(2000);
+    });
+
+    it('user should have possibility to add nodes to map', async () => {
+        // arrange
+        projectMapPage.openAddProjectDialog();
+        helper.sleep(2000);
+
+        //act
+        projectMapPage.addNode();
+        helper.sleep(2000);
+
+        //assert
+        expect(await projectMapPage.verifyIfNodeWithLabelExists('PC1')).toBe(true);
+    });
+});

e2e/projects.e2e-spec.ts

@@ -0,0 +1,34 @@
+import { ServersPage } from './helpers/server.po';
+import { TestHelper } from './helpers/common.po';
+import { element } from 'protractor';
+import { ProjectsPage } from './helpers/project.po';
+
+describe('Projects page', () => {
+    let serversPage: ServersPage;
+    let projectsPage: ProjectsPage;
+    let helper: TestHelper;
+
+    beforeEach(() => {
+        serversPage = new ServersPage();
+        projectsPage = new ProjectsPage();
+        helper = new TestHelper();
+    });
+
+    it('user should have possibility to create new project', async () => {
+        // arrange
+        serversPage.maximizeWindow();
+        await serversPage.navigateToServersPage();
+        await serversPage.clickAddServer();
+        await serversPage.navigateToServerProjects();
+        helper.sleep(2000);
+
+        //act
+        await projectsPage.openAddProjectDialog();
+        helper.sleep(2000);
+        await projectsPage.createProject();
+        helper.sleep(2000);
+
+        //assert
+        expect(helper.getCurrentUrl()).toMatch('server/1/project/');
+    });
+});

e2e/servers.e2e-spec.ts

@@ -0,0 +1,44 @@
+import { ServersPage } from './helpers/server.po';
+import { TestHelper } from './helpers/common.po';
+import { element } from 'protractor';
+
+describe('Servers page', () => {
+    let page: ServersPage;
+    let helper: TestHelper;
+
+    beforeEach(() => {
+        page = new ServersPage();
+        helper = new TestHelper();
+    });
+
+    xit('user should have possibility to add server', async () => {
+        // arrange
+        page.maximizeWindow();
+        await page.navigateToServersPage();
+
+        // act
+        let text = await page.getAddServerNotificationText();
+
+        // assert
+        expect(text).toBe("We've discovered GNS3 server on 127.0.0.1:3080, would you like to add to the list?");
+    });
+
+    it('user should see added server in the list', async () => {
+        // arrange
+        page.maximizeWindow();
+        await page.navigateToServersPage();
+        await page.clickAddServer();
+        helper.sleep(1000);
+
+        // act
+        let firstRowOfServersTable = await page.checkServersTable();
+        let serverData = [];
+        await helper.asyncForEach(firstRowOfServersTable, async element => {
+            serverData.push(await element.getText());
+        });
+
+        // assert
+        expect(serverData).toContain('127.0.0.1');
+        expect(serverData).toContain('3080');
+    });
+});

src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.html

@@ -21,6 +21,6 @@
   </mat-form-field>
   <div mat-dialog-actions>
     <button mat-button (click)="onNoClick()" color="accent">Cancel</button>
-    <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add project</button>
+    <button mat-button (click)="onAddClick()" tabindex="2" class="add-project-button" mat-raised-button color="primary">Add project</button>
   </div>
 </form>

src/app/components/projects/navigation-dialog/navigation-dialog.component.html

@@ -2,6 +2,6 @@
     <div class="title"> Do you want to navigate to {{projectMessage}}?</div>
     <div>
         <button mat-button (click)="onNoClick()">No</button>
-        <button mat-button (click)="onYesClick()">Yes</button>
+        <button class="confirmButton" mat-button (click)="onYesClick()">Yes</button>
     </div>
 </div>

src/app/components/template/template-list-dialog/template-list-dialog.component.html

@@ -71,5 +71,5 @@
 </div>
 <div mat-dialog-actions align="end">
   <button mat-button (click)="onNoClick()" tabindex="-1" color="accent">Close</button>
-  <button mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
+  <button class="addButton" mat-button (click)="onAddClick()" tabindex="2" mat-raised-button color="primary">Add</button>
 </div>

src/app/components/template/template.component.html

@@ -1 +1 @@
-<button  matTooltip="Add a node" mat-icon-button (click)="listTemplatesModal()"><mat-icon>add_to_queue</mat-icon></button>
+<button class="addNode" matTooltip="Add a node" mat-icon-button (click)="listTemplatesModal()"><mat-icon>add_to_queue</mat-icon></button>