Add routes and basic e2e

features/alm.feature

@@ -0,0 +1,7 @@
+Feature: Application Lifecycle Management
+
+  @tests:req-managing-items
+  Scenario: View ALM page
+    Given User is on landing page
+    And User is on the ALM page
+    Then User should see the ALM page

features/gitBasedItems.feature

@@ -0,0 +1,7 @@
+Feature: Git-based Items
+
+  @tests:req-managing-items
+  Scenario: View Git-based Items page
+    Given User is on landing page
+    And User is on the Git-based Items page
+    Then User should see the Git-based Items page

features/sample.feature

@@ -1,6 +1,6 @@
 Feature: Sample app
 
-  @tests:ATP-3
+  @tests:
   Scenario: View landing page
     Given User is on landing page
     Then Page has title "React App"

features/support/steps.js

@@ -1,5 +1,5 @@
 const {Given, Then, After, AfterAll, BeforeAll} = require('@cucumber/cucumber');
-const {chromium} = require('@playwright/test');
+const {chromium, expect} = require('@playwright/test');
 const assert = require('node:assert');
 
 let browser;
@@ -45,10 +45,28 @@ AfterAll(async () => {
 });
 
 Given('User is on landing page', async () => {
-    await page.goto('http://localhost:' + (process.env.PORT || '3001'));
+    await page.goto('http://localhost:' + (process.env.PORT || '3000'));
 });
 
 Then('Page has title {string}', async (expectedTitle) => {
     const actualTitle = await page.title();
-    assert.equal(actualTitle, expectedTitle);
+    expect(actualTitle, expectedTitle);
+});
+
+Given('User is on the ALM page', async () => {
+    await page.getByText('ALM').click();
+})
+
+Then('User should see the ALM page', async () => {
+    const title = await page.getByText('Alm').innerText();
+    expect(title).toEqual('Alm');
+});
+
+Given('User is on the Git-based Items page', async () => {
+    await page.getByText('Git-based Items').click();
+})
+
+Then('User should see the Git-based Items page', async () => {
+    const title = await page.getByText('Git Based Items').innerText();
+    expect(title).toEqual('Git Based Items');
 });

package.json

@@ -12,6 +12,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -3,14 +3,25 @@ import './App.css';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          A basic web application initialized with <a className="App-link" href="https://create-react-app.dev/" rel="nofollow noopener noreferrer">Create React App</a>
-        </p>
-      </header>
-    </div>
+      <div className="App">
+          <header className="App-header">
+              <img src={logo} className="App-logo" alt="logo"/>
+              <p>
+                  A basic web application initialized with <a className="App-link" href="https://create-react-app.dev/"
+                                                              rel="nofollow noopener noreferrer">Create React App</a>
+              </p>
+          <nav>
+              <ul>
+                  <li>
+                      <a href={`/alm`}>ALM</a>
+                  </li>
+                  <li>
+                      <a href={`/git-based-items`}>Git-based Items</a>
+                  </li>
+              </ul>
+          </nav>
+          </header>
+      </div>
   );
 }
 

src/index.js

@@ -1,11 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import {
+    createBrowserRouter,
+    RouterProvider,
+} from "react-router-dom";
 import './index.css';
 import App from './App';
+import Alm from "./routes/alm";
+import GitBasedItems from "./routes/git-based-items";
+
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <App />,
+    },
+    {
+        path: "/alm",
+        element: <Alm />,
+    },
+    {
+        path: "/git-based-items",
+        element: <GitBasedItems />,
+    },
+]);
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+      <RouterProvider router={router} />
   </React.StrictMode>
 );

src/routes/alm.jsx

@@ -0,0 +1,5 @@
+export default function Alm() {
+  return (
+      <h1>Alm</h1>
+  );
+}

src/routes/git-based-items.jsx

@@ -0,0 +1,7 @@
+export default function GitBasedItems() {
+    return (
+        <div>
+        <h1>Git Based Items</h1>
+        </div>
+    );
+}