Added Cucumber-Puppeteer tests

Tests for: - Add route - View route - Login
Arquisoft · Apr 28, 2020 · 6addf7a · 6addf7a
1 parent 9bcbf60
commit 6addf7a
Show file tree

Hide file tree

Showing 15 changed files with 1,251 additions and 27 deletions.
diff --git a/e2e/features/login.feature b/e2e/features/login.feature
@@ -0,0 +1,6 @@
+Feature: Basic login process in the app
+
+Scenario: The user is not logged in the site
+  Given A not logged user
+  When The user clicks the login button and fills the form
+  Then A welcome message should be shown in the screen
diff --git a/e2e/features/routes/addRoute.feature b/e2e/features/routes/addRoute.feature
@@ -0,0 +1,6 @@
+Feature: Add a new route
+
+Scenario: The user wants to create a new route
+  Given The user is logged in and in the create new route form
+  When The user fills the Create New route stepper form
+  Then The user can create and upload the new route
diff --git a/e2e/features/routes/viewRoutes.feature b/e2e/features/routes/viewRoutes.feature
@@ -0,0 +1,6 @@
+Feature: List routes of a user
+
+Scenario: The user wants to list his routes
+  Given The user is logged in and in the dashboard
+  When The user clicks on My Routes button
+  Then The user can view his routes
diff --git a/e2e/jest.config.js b/e2e/jest.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    preset: 'jest-puppeteer',
+    testRegex: './*\\.steps\\.js$',
+    testTimeout: 60000
+}
diff --git a/e2e/step-definitions/login.steps.js b/e2e/step-definitions/login.steps.js
@@ -0,0 +1,73 @@
+const { defineFeature, loadFeature } = require('jest-cucumber');
+const feature = loadFeature('./e2e/features/login.feature');
+const puppeteer = require('puppeteer');
+
+let webId;
+let username;
+let password;
+let browser;
+let page;
+let navigationPromise;
+
+beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto('http://localhost:3000');
+    navigationPromise = page.waitForNavigation();
+
+    page.waitFor(3000);
+
+    await page.goto('http://localhost:3000/#/home');
+
+    await page.setViewport({ width: 1160, height: 1057 });
+});
+
+defineFeature(feature, (test) => {
+
+    test('The user is not logged in the site', ({ given, when, then }) => {
+
+        given('A not logged user', () => {
+
+            webId = "https://viadeen3b1pod.solid.community/profile/card#me"
+            username = "ViadeEn3B1Pod";
+            password = "Arquisoft1920ViadeEn3B1";
+        });
+
+        when('The user clicks the login button and fills the form', async () => {
+
+            await page.waitForSelector('.makeStyles-root-1 > .MuiPaper-root > .MuiToolbar-root > .MuiButtonBase-root:nth-child(3) > .MuiButton-label')
+            await page.click('.makeStyles-root-1 > .MuiPaper-root > .MuiToolbar-root > .MuiButtonBase-root:nth-child(3) > .MuiButton-label')
+
+            await page.waitForSelector('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb')
+            await page.click('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb')
+
+            await expect(page).toFill('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb', webId);
+
+            await page.waitForSelector('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxgMl')
+            await page.click('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxgMl')
+
+            await navigationPromise
+
+            await page.waitForSelector('.panel-body #username')
+            await page.click('.panel-body #username')
+
+            await expect(page).toFill('.panel-body #username', username);
+
+            await page.waitForSelector('.panel-body #password')
+            await page.click('.panel-body #password')
+
+            await expect(page).toFill('.panel-body #password', password);
+
+            await page.waitForSelector('.col-md-6 #login')
+            await page.click('.col-md-6 #login')
+
+            await navigationPromise
+
+            await navigationPromise
+        });
+
+        then('A welcome message should be shown in the screen', async () => {
+            await page.waitForFunction('document.querySelector("body").innerText.includes("Welcome to ViaDe.")');
+        });
+    });
+});
diff --git a/e2e/step-definitions/routes.steps.js b/e2e/step-definitions/routes.steps.js
@@ -0,0 +1,161 @@
+const { defineFeature, loadFeature } = require('jest-cucumber');
+const feature2 = loadFeature('./e2e/features/routes/viewRoutes.feature');
+const feature = loadFeature('./e2e/features/routes/addRoute.feature');
+const puppeteer = require('puppeteer');
+
+let webId = "https://viadeen3b1pod.solid.community/profile/card#me";
+let username = "ViadeEn3B1Pod";
+let password = "Arquisoft1920ViadeEn3B1";
+let browser;
+let page;
+let navigationPromise;
+
+beforeAll(async () => {
+    browser = await puppeteer.launch();
+    page = await browser.newPage();
+    await page.goto('http://localhost:3000');
+    navigationPromise = page.waitForNavigation();
+
+
+    /*  
+        -----------------
+        ----- LOGIN -----
+        -----------------
+    */
+    page.waitFor(3000);
+
+    await page.goto('http://localhost:3000/#/home');
+
+    await page.setViewport({ width: 1160, height: 1057 });
+
+    await page.waitForSelector('.makeStyles-root-1 > .MuiPaper-root > .MuiToolbar-root > .MuiButtonBase-root:nth-child(3) > .MuiButton-label');
+    await page.click('.makeStyles-root-1 > .MuiPaper-root > .MuiToolbar-root > .MuiButtonBase-root:nth-child(3) > .MuiButton-label');
+
+    await page.waitForSelector('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb');
+    await page.click('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb');
+
+    await expect(page).toFill('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxhCb', webId);
+
+    await page.waitForSelector('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxgMl');
+    await page.click('.MuiPaper-root > .MuiCardContent-root > .sc-Axmtr > form > .sc-AxgMl');
+
+    await navigationPromise
+
+    await page.waitForSelector('.panel-body #username');
+    await page.click('.panel-body #username');
+
+    await expect(page).toFill('.panel-body #username', username);
+
+    await page.waitForSelector('.panel-body #password');
+    await page.click('.panel-body #password');
+
+    await expect(page).toFill('.panel-body #password', password);
+
+    await page.waitForSelector('.col-md-6 #login');
+    await page.click('.col-md-6 #login');
+
+    await navigationPromise
+
+    await navigationPromise
+
+    // console.log("########## LOGGED IN ###########")
+});
+
+defineFeature(feature, (test) => {
+
+    test('The user wants to create a new route', ({ given, when, then }) => {
+
+
+        given('The user is logged in and in the create new route form', async () => {
+
+            await page.waitForSelector('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+            await page.click('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+
+            await page.waitForSelector('.MuiPaper-root:nth-child(3) > .MuiList-root > .MuiTypography-root:nth-child(2) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+            await page.click('.MuiPaper-root:nth-child(3) > .MuiList-root > .MuiTypography-root:nth-child(2) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+
+            // console.log('############### IN CREATE-ROUTE ###############');
+        });
+
+        when('The user fills the Create New route stepper form', async () => {
+
+            page.waitFor(2000);
+            await page.waitForSelector('.MuiGrid-root #name');
+            await page.click('.MuiGrid-root #name');
+            await expect(page).toFill('.MuiGrid-root #name', "Route-Cucumber-Puppeteer");
+
+            await page.waitForSelector('.MuiGrid-root #description');
+            await page.click('.MuiGrid-root #description');
+            await expect(page).toFill('.MuiGrid-root #description', "This is the description for the route Cucumber-Puppeteer");
+
+            await page.waitForSelector('.MuiPaper-root > form > .MuiGrid-root > #btn-next > .MuiButton-label');
+            await page.click('.MuiPaper-root > form > .MuiGrid-root > #btn-next > .MuiButton-label');
+
+            // console.log("DATA FORM DONE");
+
+            page.waitFor(2000);
+            await page.waitForSelector('.MuiGrid-root #test-map-leaflet');
+            await page.click('.MuiGrid-root #test-map-leaflet');
+
+            await page.waitForSelector('.MuiGrid-root #test-map-leaflet');
+            await page.click('.MuiGrid-root #test-map-leaflet');
+
+            await page.waitForSelector('.MuiPaper-root > form > .MuiGrid-root > #btn-next > .MuiButton-label');
+            await page.click('.MuiPaper-root > form > .MuiGrid-root > #btn-next > .MuiButton-label');
+
+            // console.log("MAP FORM DONE");
+
+            page.waitFor(2000);
+            await page.waitForSelector('.MuiPaper-root > div > .MuiGrid-root > #btn-next > .MuiButton-label');
+            await page.click('.MuiPaper-root > div > .MuiGrid-root > #btn-next > .MuiButton-label');
+
+            // console.log("REVIEW FORM DONE");
+
+        });
+
+        then('The user can create and upload the new route', async () => {
+            await page.waitForSelector('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+            await page.click('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+
+            await page.waitForSelector('.MuiList-root > .MuiTypography-root:nth-child(1) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+            await page.click('.MuiList-root > .MuiTypography-root:nth-child(1) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+
+            // console.log('############### IN DASHBOARD ###############');
+
+            page.waitFor(7000);
+            await page.waitForFunction('document.querySelector("body").innerText.includes("Route-Cucumber-Puppeteer")');
+        });
+    });
+});
+
+defineFeature(feature2, (test2) => {
+    test2("The user wants to list his routes", ({ given, when, then }) => {
+
+        given('The user is logged in and in the dashboard', async () => {
+            // logged in thanks to beforeAll
+
+            await page.waitForSelector('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+            await page.click('.MuiPaper-root > .MuiToolbar-root > div:nth-child(4) > .MuiButtonBase-root > .MuiButton-label');
+
+            await page.waitForSelector('.MuiList-root > .MuiTypography-root:nth-child(1) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+            await page.click('.MuiList-root > .MuiTypography-root:nth-child(1) > .MuiButtonBase-root > .MuiListItemText-root > .MuiTypography-root');
+
+            // console.log('############### IN DASHBOARD ###############');
+        });
+
+        when('The user clicks on My Routes button', async () => {
+            page.waitFor(10000);
+
+            await page.waitForSelector('.MuiGrid-root:nth-child(1) > .MuiPaper-root > .MuiCardContent-root > .MuiGrid-root > .MuiGrid-root > #Route-Cucumber-Puppeteer > .MuiButton-label');
+            await page.click('.MuiGrid-root:nth-child(1) > .MuiPaper-root > .MuiCardContent-root > .MuiGrid-root > .MuiGrid-root > #Route-Cucumber-Puppeteer > .MuiButton-label');
+
+            // console.log('############### CLICK DETAILS ###############');
+        });
+
+        then('The user can view his routes', async () => {
+            await page.waitForFunction('document.querySelector("body").innerText.includes("Route-Cucumber-Puppeteer")');
+
+            // console.log('############### ROUTE DETAILS ###############');
+        });
+    });
+});
diff --git a/jest-puppeteer.config.js b/jest-puppeteer.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+    server: {
+        command: `npm start`,
+        port: 3000,
+        launchTimeout: 10000,
+        debug: true,
+    },
+}