feat: Add unit tests for AboutUs component

facade-app/jest.config.ts

@@ -0,0 +1,8 @@
+
+const config = {
+    transform: {
+        "^.+\\.(ts|tsx|js|jsx)$": "ts-jest"
+    }
+}
+
+module.exports = config;

facade-app/package.json

@@ -43,5 +43,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ts-node": "^10.7.0"
   }
 }

facade-app/src/App.tsx

@@ -8,7 +8,7 @@ import "rsuite/dist/styles/rsuite-default.min.css";
 import { Header } from "./Components/Header";
 import { LeftNav } from "./Components/LeftNav";
 import { GlobalState } from "./interface/State";
-import Footer  from "./Components/Footer";
+import Footer from "./Components/Footer";
 import { Content } from "./Components/Content";
 import { getResource } from "./Utilities/Utils";
 import { VulnerabilityDefinitionResponse } from "./interface/GeneralContracts";
@@ -190,7 +190,6 @@ export default class App extends React.Component {
     };
   };
 
-
   render() {
     const copyRightYear = new Date().getFullYear();
 
@@ -200,21 +199,22 @@ export default class App extends React.Component {
           globalState={this.state}
           setGlobalState={this.setGlobalState}
         ></Header>
-        <RSuiteContainer className="show-container" style={{display:"flex", width:"100vw"}}>
+        <RSuiteContainer
+          className="show-container"
+          style={{ display: "flex", width: "100vw" }}
+        >
           <RSuitesSidebar>
             <LeftNav
               globalState={this.state}
               setGlobalState={this.setGlobalState}
             />
           </RSuitesSidebar>
-          <Content 
+          <Content
             globalState={this.state}
             setGlobalState={this.setGlobalState}
           ></Content>
         </RSuiteContainer>
-        <Footer globalState={this.state} setGlobalState={this.setGlobalState} copyRightYear={copyRightYear}>
-          Footer
-        </Footer>
+        <Footer copyRightYear={copyRightYear}>Footer</Footer>
       </RSuiteContainer>
     );
   }

facade-app/src/Components/AboutUs.tsx

@@ -5,7 +5,7 @@ import {
   Icon as RSuiteIcon,
 } from "rsuite";
 
-export class AboutUs extends React.Component {
+export default class AboutUs extends React.Component {
   Card = () => (
     <div>
       <RSuitePanel

facade-app/src/Components/Content.tsx

@@ -8,7 +8,7 @@ import {
 } from "../Utilities/Utils";
 import { VulnerabilityDefinitionResponse } from "../interface/GeneralContracts";
 import { HomePage } from "./HomePage";
-import { AboutUs } from "./AboutUs";
+import AboutUs from "./AboutUs";
 import { Props } from "../interface/Props";
 
 export class Content extends React.Component<Props> {

facade-app/src/Components/Footer.tsx

@@ -1,8 +1,15 @@
 import React from "react";
-import { Footer as RSuiteFooter, Navbar as RSuiteNavBar } from "rsuite";
-import { Props } from "../interface/Props";
+import {
+  Footer as RSuiteFooter,
+  FooterProps,
+  Navbar as RSuiteNavBar,
+} from "rsuite";
 
-export default class Footer extends React.Component<Props> {
+interface IFooter extends FooterProps {
+  copyRightYear: number;
+}
+
+export default class Footer extends React.Component<IFooter, {}> {
   render() {
     const { copyRightYear } = this.props;
     return (
@@ -11,7 +18,9 @@ export default class Footer extends React.Component<Props> {
           <RSuiteNavBar.Body
             style={{ textAlign: "center", height: "30px", fontSize: "15px" }}
           >
-            <div>&copy; Copyright {copyRightYear}, SasanLabs</div>
+            <div data-testid={"FOOTER_COPYRIGHT_TEXT"}>
+              &copy; Copyright {copyRightYear}, SasanLabs
+            </div>
           </RSuiteNavBar.Body>
         </RSuiteNavBar>
       </RSuiteFooter>

facade-app/src/index.css

@@ -43,14 +43,14 @@ code {
   font-weight: normal;
 }
 
-.rs-sidebar{
-  width:40vw !important;
+.rs-sidebar {
+  width: 40vw !important;
 }
 
-.VulnerableApp-Facade-Content-Container{
+.VulnerableApp-Facade-Content-Container {
   width: 60vw;
 }
 
-.rs-navbar{
-  width:100vw;
+.rs-navbar {
+  width: 100vw;
 }

facade-app/src/test/AboutUs.test.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import AboutUs from "./../Components/AboutUs";
+
+describe("About Us", () => {
+  it("renders correctly", () => {
+    const { container } = render(<AboutUs />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should have a header", () => {
+    render(<AboutUs />);
+
+    const header = screen.getAllByRole("rowheader")[0];
+    expect(header).toBeInTheDocument();
+    expect(header.textContent).toBe("About Us");
+  });
+
+  it("should have about us content", () => {
+    render(<AboutUs />);
+
+    const hyperLinks = screen.getAllByRole("link");
+    const fileUploadAddon = hyperLinks[0];
+    expect(fileUploadAddon).toBeInTheDocument();
+    expect(fileUploadAddon).toHaveAttribute(
+      "href",
+      "https://github.com/SasanLabs/owasp-zap-fileupload-addon"
+    );
+    expect(fileUploadAddon.textContent).toBe("File-upload addon");
+
+    const owaspZap = hyperLinks[1];
+    expect(owaspZap).toBeInTheDocument();
+    expect(owaspZap).toHaveAttribute("href", "https://www.zaproxy.org/");
+    expect(owaspZap.textContent).toBe("Owasp ZAP");
+
+    const vulnerableApp = hyperLinks[2];
+    expect(vulnerableApp).toBeInTheDocument();
+    expect(vulnerableApp).toHaveAttribute(
+      "href",
+      "https://github.com/SasanLabs/VulnerableApp"
+    );
+    expect(vulnerableApp.textContent).toBe("Owasp VulnerableApp");
+
+    expect(
+      screen.getByText(/VulnerableApp-Facade was started when we were building/)
+    ).toBeInTheDocument();
+  });
+
+  it("should have a contact us section", () => {
+    render(<AboutUs />);
+
+    const header = screen.getAllByRole("rowheader")[1];
+    expect(header).toBeInTheDocument();
+    expect(header.textContent).toBe("Contact Us");
+    expect(screen.getByText("[email protected]")).toBeInTheDocument();
+  });
+});

facade-app/src/test/Footer.test.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import Footer from "../Components/Footer";
+
+describe("Footer", () => {
+  it("renders correctly", () => {
+    const year = new Date().getFullYear();
+    const { container } = render(<Footer copyRightYear={year} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders copyright text", () => {
+    const year = new Date().getFullYear();
+    const text = `© Copyright ${year}, SasanLabs`;
+    render(<Footer copyRightYear={year} />);
+
+    const copyRightText = screen.getByTestId("FOOTER_COPYRIGHT_TEXT");
+    expect(copyRightText).toBeInTheDocument();
+    expect(copyRightText.textContent).toEqual(text);
+  });
+});

facade-app/src/test/__snapshots__/AboutUs.test.tsx.snap

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`About Us renders correctly 1`] = `
+<div>
+  <div>
+    <div
+      class="rs-panel-group"
+    >
+      <div>
+        <div
+          class="VulnerableApp-Facade-AboutUs-Content-Header rs-panel rs-panel-default"
+        >
+          <div
+            class="rs-panel-heading"
+            role="rowheader"
+            tabindex="-1"
+          >
+            About Us
+          </div>
+          <div
+            class="rs-panel-body"
+          >
+            <div
+              class="VulnerableApp-Facade-AboutUs-Content"
+            >
+              <p>
+                VulnerableApp-Facade was started when we were building
+
+                <a
+                  href="https://github.com/SasanLabs/owasp-zap-fileupload-addon"
+                >
+                  File-upload addon
+                </a>
+
+                for 
+                <a
+                  href="https://www.zaproxy.org/"
+                >
+                  Owasp ZAP
+                </a>
+                , which is used to find the vulnerabilities in the File Upload functionality. As we were developing the addon and writing the scan rules, in order to test those scan rules we were using
+
+                <a
+                  href="https://github.com/SasanLabs/VulnerableApp"
+                >
+                  Owasp VulnerableApp
+                </a>
+
+                but as Owasp VulnerableApp is written in Java and is a SpringBoot application hence testing scan rules related to PHP, ASP, JSP etc are not possible. Hence we thought of building a facade application which acts as proxy or gateway to route the requests to vulnerable applications written in different tech stacks.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="VulnerableApp-Facade-AboutUs-Content-Header rs-panel rs-panel-default"
+        >
+          <div
+            class="rs-panel-heading"
+            role="rowheader"
+            tabindex="-1"
+          >
+            Contact Us
+          </div>
+          <div
+            class="rs-panel-body"
+          >
+            <p
+              class="VulnerableApp-Facade-AboutUs-Content"
+            >
+              <i
+                class="rs-icon rs-icon-envelope"
+              />
+               [email protected]
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

facade-app/src/test/__snapshots__/Footer.test.js.snap → facade-app/src/test/__snapshots__/Footer.test.tsx.snap

@@ -13,7 +13,9 @@ exports[`Footer renders correctly 1`] = `
         class="rs-navbar-body"
         style="text-align: center; height: 30px; font-size: 15px;"
       >
-        <div>
+        <div
+          data-testid="FOOTER_COPYRIGHT_TEXT"
+        >
           © Copyright 
           2022
           , SasanLabs

facade-app/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,5 +20,8 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "public/GlobalUtility.js"]
+  "include": [
+    "src",
+    "public/GlobalUtility.js"
+  ]
 }