From c46c44fccac2dee5511b6898722a74a2640361b8 Mon Sep 17 00:00:00 2001
From: Pranav Kakaraparti <pkakaraparti@ufl.edu>
Date: Sun, 16 Jul 2023 22:23:23 -0500
Subject: [PATCH] feat: updated Layout.test.js

---
 src/components/layout/Layout.test.js          | 59 ++++++++-----------
 src/components/layout/Menu/Menu.test.js       |  1 -
 .../layout/Menu/MenuItem/MenuItem.test.js     |  1 -
 .../layout/Menu/TopMenu/TopMenu.test.js       |  2 -
 4 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/components/layout/Layout.test.js b/src/components/layout/Layout.test.js
index a40caed..268c5c7 100644
--- a/src/components/layout/Layout.test.js
+++ b/src/components/layout/Layout.test.js
@@ -1,41 +1,34 @@
-import { mount } from "enzyme";
-import React from "react";
-import Layout from "./Layout";
-import { StyledContent } from "./LayoutStyled";
-import Menu from "./Menu/Menu";
-import { BrowserRouter as Router } from "react-router-dom";
-import { ThemeProvider, createTheme } from "@mui/material";
+import React from 'react';
+import Layout from './Layout';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ThemeProvider } from '@mui/material';
+import { render, screen } from '@testing-library/react';
+import theme from '../UI/theme';
 
-const theme = createTheme({
-  zIndex: {
-    drawer: 1200,
-  },
-});
+describe('Layout component', () => {
 
-describe("Layout component", () => {
-  let wrapper;
+  const TestWrapper = (props) => {
+    return <ThemeProvider theme={theme}>
+      <Router>
+        {props.children}
+      </Router>
+    </ThemeProvider>;
+  };
 
-  beforeEach(() => {
-    wrapper = mount(
-      <ThemeProvider theme={theme}>
-        <Router>
-          <Layout>
-            <div>Test</div>
-          </Layout>
-        </Router>
-      </ThemeProvider>
-    );
-  });
 
-  it("should render Layout component", () => {
-    expect(wrapper).toBeTruthy();
-  });
+  it('renders correctly', async () => {
+    render(<TestWrapper>
+      <Layout></Layout>
+    </TestWrapper>);
 
-  it("should render Menu component", () => {
-    expect(wrapper.find(Menu)).toHaveLength(1);
-  });
+    //load data
+    await screen.findByAltText(/Greenstand logo/);
+    await screen.findAllByRole('link');
 
-  it("should render StyledContent component", () => {
-    expect(wrapper.find(StyledContent)).toHaveLength(1);
+    expect(screen.getAllByRole('link')).toHaveLength(3);
+    expect(screen.getByText(/Home/)).toBeInTheDocument();
+    expect(screen.getByText(/Send Tokens/)).toBeInTheDocument();
+    expect(screen.getAllByRole('button')).toHaveLength(3);
   });
+
 });
diff --git a/src/components/layout/Menu/Menu.test.js b/src/components/layout/Menu/Menu.test.js
index f9334bc..28f5f85 100644
--- a/src/components/layout/Menu/Menu.test.js
+++ b/src/components/layout/Menu/Menu.test.js
@@ -16,7 +16,6 @@ describe('Menu component', () => {
   };
 
   it('renders correctly', async () => {
-    //Menu open prop is irrelevant as Layout is responsible for open/close
     render(<TestWrapper>
       <Menu />
     </TestWrapper>);
diff --git a/src/components/layout/Menu/MenuItem/MenuItem.test.js b/src/components/layout/Menu/MenuItem/MenuItem.test.js
index b89c4cc..62cee4a 100644
--- a/src/components/layout/Menu/MenuItem/MenuItem.test.js
+++ b/src/components/layout/Menu/MenuItem/MenuItem.test.js
@@ -16,7 +16,6 @@ describe('MenuItem tests v1', () => {
   };
 
   it('Links are rendered correctly', async () => {
-    //MenuItem open prop is irrelevant as Layout is responsible for open/close
     render(
       <TestWrapper>
         <MenuItem />
diff --git a/src/components/layout/Menu/TopMenu/TopMenu.test.js b/src/components/layout/Menu/TopMenu/TopMenu.test.js
index 38252c5..b4a3750 100644
--- a/src/components/layout/Menu/TopMenu/TopMenu.test.js
+++ b/src/components/layout/Menu/TopMenu/TopMenu.test.js
@@ -19,8 +19,6 @@ describe('TopMenu component', () => {
       <TopMenu />
     </TestWrapper>);
 
-    screen.debug();
-
     //logo has loaded
     await screen.findByAltText(/Greenstand logo/);