front end test

docs/05_building_block_view.adoc

@@ -105,6 +105,7 @@ The restAPI defines DeDe's API in accordance with REST architecture, which allow
 
 ****
 
+////
 ****
 
 .Level 3
@@ -167,6 +168,8 @@ The controllers interlink the frontend and the backend
 
 ****
 
+////
+
 ////
 Important Interfaces::
 _<Description of important interfaces>_

docs/07_deployment_view.adoc

@@ -42,10 +42,3 @@ Utilizing the user's POD following SOLID design principles allows the applicatio
 |===
 
 ****
-
-=== Level 2
-****
-.Motivation
-The figure above shows the infrastructure and interlinking of each environment involved in DeDe.
-
-****

webapp/e2e/features/add-to-cart.feature

@@ -0,0 +1,6 @@
+Feature: Adding item to cart
+
+Scenario: Adding an item to cart
+  Given An empty cart
+  When I add an item to the cart
+  Then The item appears in the cart

webapp/e2e/features/product-details.feature

@@ -0,0 +1,6 @@
+Feature: Displaying product details
+
+Scenario: No product details are displayed
+  Given No product details
+  When I click on the product details button of a product
+  Then I am taken to a new page where product details are displayed

webapp/e2e/steps/add-to-cart.steps.ts

@@ -0,0 +1,56 @@
+import { defineFeature, loadFeature } from 'jest-cucumber';
+import puppeteer from "puppeteer";
+
+const feature = loadFeature('./features/add-to-cart.feature');
+
+let page: puppeteer.Page;
+let browser: puppeteer.Browser;
+
+defineFeature(feature, test => {
+
+  const testProduct = {
+    _id: "622fc1418aedec1b7f536775",
+    name: "Screwdriver",
+    price: 2,
+    description: "Multi-purpose screwdriver.",
+  }
+
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: true });
+    page = await browser.newPage();
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+
+
+  test('Adding an item to cart', ({given,when,then}) => {
+
+    given('An empty cart', () => {
+    });
+
+    when('I add an item to the cart', async () => {
+      await expect(page).toMatch('DEDE')
+
+      await expect(page).toClick(testProduct._id + '_cart')
+    });
+
+    then('The item appears in the cart', async () => {
+      await expect(page).toClick('shoppingCart')
+
+      await expect(page).toMatch('Total')
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});
+

webapp/e2e/steps/product-details.steps.ts

@@ -0,0 +1,51 @@
+import { defineFeature, loadFeature } from 'jest-cucumber';
+import puppeteer from "puppeteer";
+
+const feature = loadFeature('./features/product-details.feature');
+
+let page: puppeteer.Page;
+let browser: puppeteer.Browser;
+
+defineFeature(feature, test => {
+
+  const testProduct = {
+    _id: "622fc1418aedec1b7f536775",
+    name: "Screwdriver",
+    price: 2,
+    description: "Multi-purpose screwdriver.",
+  }
+
+  beforeAll(async () => {
+    browser = process.env.GITHUB_ACTIONS
+      ? await puppeteer.launch()
+      : await puppeteer.launch({ headless: true });
+    page = await browser.newPage();
+
+    await page
+      .goto("http://localhost:3000", {
+        waitUntil: "networkidle0",
+      })
+      .catch(() => {});
+  });
+
+  test('No product details are displayed', ({given,when,then}) => {
+
+    given('No product details', () => {
+    });
+
+    when('I click on the product details button of a product', async () => {
+      await expect(page).toMatch('DEDE')
+      await expect(page).toClick(testProduct._id + '_details')
+    });
+
+    then('I am taken to a new page where product details are displayed', async () => {
+      await expect(page).toMatch('Price:')
+    });
+  })
+
+  afterAll(async ()=>{
+    browser.close()
+  })
+
+});
+