Activity Report Stepper cucumber tests

.circleci/config.yml

@@ -197,7 +197,7 @@ jobs:
           command: |
             mkdir reports
             sleep 5
-            yarn cucumber
+            yarn cucumber:ci
       - store_artifacts:
           path: reports/
   test_frontend:

.env.example

@@ -17,3 +17,5 @@ TTA_SMART_HUB_URI=http://localhost:3000
 AUTH_BASE=https://uat.hsesinfo.org
 # This env variable should go away soon in favor of TTA_SMART_HUB_URI
 REDIRECT_URI_HOST=http://localhost:8080
+CUCUMBER_USER_ID=999999;
+CUCUMBER_USER=this_is_secret

README.md

@@ -56,6 +56,7 @@ Yarn Commands
 | | Run the linter for the the backend with results output to xml files | `yarn lint:ci`| |
 | | Run `yarn lint:ci` for both the frontend and backend | `yarn lint:all`| |
 | | Host the open api 3 spec using [redoc](https://github.com/Redocly/redoc) at `localhost:5000` | `yarn docs:serve` | |
+| | Run cucumber tests | `yarn cucumber` | |
 
 Integration
 -----------

cucumber/features/activityReportStepper.feature

@@ -0,0 +1,28 @@
+Feature: Activity Report Stepper
+
+    Scenario: Activity Summary
+        Given I am logged in
+        And I am on the activity reports page
+        Then I see the Stepper
+        And the first step is the Activity Summary
+    Scenario: Navigation buttons
+        Given I am logged in
+        And I am on the activity reports page
+        Then I see two navigation buttons
+        And the "Previous" button is disabled
+        When I click the "Next" button
+        Then the "Previous" button is no longer disabled
+     Scenario: Progress
+        Given I am logged in
+        And I am on the activity reports page
+        When I click the "Next" button
+        Then I moved past the "Activity Summary" step
+        And I am on the "Participants" step
+        When I click the "Next" button again
+        Then the "Participants" step is still current, but I am on page 2
+        And I have not advanced to the "Goals & Objectives" step yet
+        When I click the "Previous" button
+        Then the "Participants" step is still current, but I am on page 1
+        When I click the "Previous" button again
+        Then I am no longer on the "Participants" step
+        And I am on the "Activity Summary" step

cucumber/features/homePage.feature

@@ -0,0 +1,11 @@
+Feature: TTA Smarthub Home Page
+
+    Scenario: Welcome page is displayed
+        Given I am logged in
+        And I am on the Smart Hub home page
+        Then I see "Welcome to the TTA Smart Hub" message
+        And I see "Activity Reports" link
+    # Scenario: Login is redirected to HSES
+    #     Given the home page of tta-smarthub
+    #     When pressing login
+    #     Then we should see "Head Start Enterprise System" page

cucumber/features/steps/activityReportStepperSteps.js

@@ -0,0 +1,158 @@
+const {
+  Given, When, Then,
+} = require('@cucumber/cucumber');
+const assertTrue = require('assert');
+const assert = require('assert');
+const select = require('puppeteer-select');
+const scope = require('../support/scope');
+
+Given('I am on the activity reports page', async () => {
+  const page = scope.context.currentPage;
+  const selector = 'a[href$="activity-reports"]';
+  await Promise.all([
+    page.waitForNavigation(),
+    page.click(selector),
+  ]);
+  await page.screenshot({ path: 'reports/givenOnTheActivityReports.png' });
+});
+
+Then('I see the Stepper', async () => {
+  const page = scope.context.currentPage;
+  const selector = '[aria-label="progress"]';
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assertTrue(value.startsWith('Activity Summary'));
+});
+
+Then('the first step is the Activity Summary', async () => {
+  const page = scope.context.currentPage;
+  const selector = '[aria-label="progress"] ol li span[aria-current="true"]';
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assert.equal(value, 'Activity Summary');
+});
+
+Then('I see two navigation buttons', async () => {
+  const page = scope.context.currentPage;
+
+  const buttonOne = await select(page).getElement('button:contains("Previous")');
+  const buttonTwo = await select(page).getElement('button:contains("Next")');
+
+  assertTrue(buttonOne);
+  assertTrue(buttonTwo);
+
+  let value = await page.evaluate((el) => el.textContent, buttonOne);
+  assert.equal(value, 'Previous');
+
+  value = await page.evaluate((el) => el.textContent, buttonTwo);
+  assert.equal(value, 'Next');
+});
+
+Then('the {string} button is disabled', async (string) => {
+  const page = scope.context.currentPage;
+  const buttonOneSelector = 'button[disabled]';
+  // const buttonOne = await select(page).getElement('button:contains("Previous")');
+  // const buttonTwo = await select(page).getElement('button:contains("Next")');
+  const buttonPrevious = await page.$(buttonOneSelector);
+
+  assertTrue(buttonPrevious);
+  // assertTrue(buttonTwo);
+
+  const value = await page.evaluate((el) => el.textContent, buttonPrevious);
+  assert.equal(value, string);
+
+  // value = await page.evaluate((el) => el.disabled, buttonTwo);
+  // assert.equal(value, 'Next');
+});
+
+When('I click the {string} button', async (string) => {
+  const page = scope.context.currentPage;
+  const buttonTwo = await select(page).getElement(`button:contains(${string})`);
+  await buttonTwo.click();
+});
+
+Then('the {string} button is no longer disabled', async (string) => {
+  const page = scope.context.currentPage;
+  const buttonOneSelector = 'button[disabled]';
+
+  const buttonPrevious = await page.$(buttonOneSelector);
+
+  const value = await page.evaluate((el) => el, buttonPrevious);
+  assert.equal(value, null);
+});
+
+Then('I moved past the {string} step', async (string) => {
+  const page = scope.context.currentPage;
+  assert.equal(string, 'Activity Summary');
+  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assertTrue(value.startsWith(string));
+});
+
+Then('I am on the {string} step', async (string) => {
+  const page = scope.context.currentPage;
+  // assert.equal(string, 'Participants');
+  const selector = `[data-testid="${string}"] > [aria-current="true"]`;
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assert.equal(value, string);
+});
+
+When('I click the {string} button again', async (string) => {
+  const page = scope.context.currentPage;
+  const buttonTwo = await select(page).getElement(`button:contains(${string})`);
+  await buttonTwo.click();
+});
+
+Then('the {string} step is still current, but I am on page 2', async (string) => {
+  const page = scope.context.currentPage;
+  assert.equal(string, 'Participants');
+  const selector = '[data-testid="form"] > h1';
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assert.equal(value, `${string} - Page 2`);
+});
+
+Then('I have not advanced to the {string} step yet', async (string) => {
+  const page = scope.context.currentPage;
+  assert.equal(string, 'Goals & Objectives');
+  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assertTrue(value.startsWith(string));
+  await page.screenshot({ path: 'reports/notOnGoalsYet.png' });
+});
+
+Then('the {string} step is still current, but I am on page 1', async (string) => {
+  const page = scope.context.currentPage;
+  assert.equal(string, 'Participants');
+  const selector = '[data-testid="form"] > h1';
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assert.equal(value, `${string} - Page 1`);
+});
+
+Then('I am no longer on the {string} step', async (string) => {
+  const page = scope.context.currentPage;
+  assert.equal(string, 'Participants');
+  const selector = `[data-testid="${string}"] > [aria-current="false"]`;
+
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assertTrue(value);
+  assertTrue(value.startsWith(string));
+});

cucumber/features/steps/homePageSteps.js

@@ -0,0 +1,76 @@
+require('dotenv').config();
+const {
+  Given, Then,
+} = require('@cucumber/cucumber');
+const assertTrue = require('assert');
+const assert = require('assert');
+const scope = require('../support/scope');
+
+Given('I am logged in', async () => {
+  if (!scope.browser) {
+    const width = 1024;
+    const height = 1600;
+
+    scope.browser = await scope.driver.launch({
+      defaultViewport: { width, height },
+      headless: true,
+      // slowMo: 250, // can be used in conjunction with headless: false to slow down the browser
+    });
+  }
+  scope.context.currentPage = await scope.browser.newPage();
+  const page = scope.context.currentPage;
+
+  const domain = process.env.TTA_SMART_HUB_URI.split('//')[1];
+
+  const cookies = [{
+    name: 'CUCUMBER_USER',
+    value: `${process.env.CUCUMBER_USER}`,
+    domain,
+    path: '/',
+    httpOnly: true,
+    secure: false,
+    session: true,
+    sameSite: 'Strict',
+  }];
+
+  await page.setCookie(...cookies);
+
+  const loginLinkSelector = 'a[href$="api/login"]';
+  // const homeLinkSelector = 'a[href$="/"]';
+  const activityReportsSelector = 'a[href$="activity-reports"]';
+
+  await page.goto(scope.uri);
+  await page.waitForSelector('em'); // Page title
+  const name = await page.$eval('em', (el) => el.innerText);
+
+  assert.equal(name, 'TTA Smart Hub');
+  // Check if actually logged in. If not login
+  const result = await page.$(loginLinkSelector);
+
+  if (result) {
+    await page.click(loginLinkSelector);
+    await page.waitForSelector(activityReportsSelector); // Activity Reports link
+    await page.screenshot({ path: 'reports/givenLoggedIn.png' });
+  }
+});
+
+Given('I am on the Smart Hub home page', async () => {
+  await scope.context.currentPage.waitForSelector('h1');
+});
+
+Then('I see {string} message', async (string) => {
+  const page = scope.context.currentPage;
+  const value = await page.$eval('h1', (el) => el.textContent);
+
+  assertTrue(value.includes(string));
+});
+
+Then('I see {string} link', async (string) => {
+  const page = scope.context.currentPage;
+  const selector = 'a[href$="activity-reports"]';
+
+  await page.waitForSelector(selector);
+  const value = await page.$eval(selector, (el) => el.textContent);
+
+  assert.equal(value, string);
+});

docs/adr/0010-bdd-testing.md

@@ -0,0 +1,19 @@
+# 10. BDD testing
+
+Date: 2020-10-25
+
+## Status
+
+Pending
+
+## Context
+
+Behavior-driven development (BDD) allows for a broader team to collaborate on software development. The business stakeholders have insight into how well the software meets the requirements. Through automated tests they have a way to validate the functionality in a user friendly way. Cucumber, and it particular cucumber-js was selected as the tool of choice to accomplish this. To go along with cucumber-js, puppeteer as well as selenium webdriver were looked at to provide a full solution for BDD testing.
+
+## Decision
+
+Puppeteer as well as selenium webdriver provide a way to run automated browser tests. Both of these are popular tools to enable browser automation. Puppeteer offers more control over Chromium based browsers, very fast, headless by default, run modej, and it can take screenshots of the pages, both in an image and PDF formats. Additionally, it measures rendering and load times by Chrome Performance Analysis tool and it is easier to set up than selenium webdriver. The drawback to using Puppeteer is it's lack of full cross-browser support, which is offered by the selenium webdriver, since Puppeteer is specialized for Chromium.
+
+## Consequences
+
+Investing time into enabling BDD with cucumber-js will have a positive impact on collaboration with the business stakeholders and provide a way to validate application's functionality. This was viewed as a worthwile investment considering that schedules might be affected. By using Puppeteer with cucumber-js we will have a solution that is fast and easier to set up with a limitation of not providing a full cross-browser support (Microsoft Edge, which is a default on Windows 10, is based on Chromium). Since the browsers to support include Chrome and IE this poses somewhat of a limitation, however the bulk of the benefits from using BDD comes from validating the application's behavior against the requirements.