Use walls for tests

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -34,44 +34,45 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
+    "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-jss": "^10.5.0",
-    "react-router-dom": "^5.2.0",
-    "react": "^17.0.1"
+    "react-router-dom": "^5.2.0"
   },
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "@types/classnames": "^2.2.11",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/is-url": "^1.2.28",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.165",
     "@types/react-router-dom": "^5.1.6",
-    "@typescript-eslint/eslint-plugin-tslint": "^4.8.1",
-    "@typescript-eslint/eslint-plugin": "^4.8.1",
-    "@typescript-eslint/parser": "^4.8.1",
+    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/eslint-plugin-tslint": "^4.8.2",
+    "@typescript-eslint/parser": "^4.8.2",
     "babel-polyfill": "^6.26.0",
     "codecov": "^3.8.1",
     "concurrently": "^5.3.0",
+    "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "enzyme-to-json": "^3.6.1",
-    "enzyme": "^3.11.0",
+    "eslint": "^7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.21.5",
-    "eslint": "^7.14.0",
     "express": "^4.17.1",
     "jest-enzyme": "^7.1.2",
     "prettier": "^2.2.0",
     "react-mock-router": "^1.0.15",
     "react-scripts": "^4.0.1",
-    "typescript": "^4.1.2"
+    "typescript": "^4.1.2",
+    "walls": "^2.2.0"
   },
   "keywords": [
     "react",

src/Base/index.test.tsx

@@ -6,7 +6,7 @@ import { Typography, IconButton } from "@material-ui/core";
 
 import Base from ".";
 
-import menuData from "../tests/data/menu";
+import menuData from "../__visual__/data/menu";
 import Header from "../Header";
 import Drawer from "../Drawer";
 

src/Drawer/index.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { shallow } from "enzyme";
 
-import menuData from "../tests/data/menu";
+import menuData from "../__visual__/data/menu";
 
 import Drawer from ".";
 

src/Form/__tests__/Form.test.tsx

@@ -4,7 +4,7 @@ import { shallow } from "enzyme";
 
 import Form from "..";
 
-import formData from "../../tests/data/form";
+import formData from "../../__visual__/data/form";
 
 it("renders correctly", () => {
   const tree = shallow(

src/Listing/Listing.test.tsx

@@ -5,8 +5,8 @@ import { Checkbox, TablePagination, IconButton } from "@material-ui/core";
 
 import Listing from ".";
 
-import headers from "../tests/data/listing_headers";
-import data from "../tests/data/listing_data";
+import headers from "../__visual__/data/listing_headers";
+import data from "../__visual__/data/listing_data";
 import ListingHeader from "./ListingHeader";
 
 Enzyme.configure({ adapter: new Adapter() });

src/Listing/ListingLine.test.tsx

@@ -3,7 +3,7 @@ import { shallow } from "enzyme";
 import { Table } from "@material-ui/core";
 import { Header } from "./Listing";
 import ListingLine from "./ListingLine";
-import headers from "../tests/data/listing_headers";
+import headers from "../__visual__/data/listing_headers";
 
 const twoHeaders = headers.slice(0, 2) as Header[];
 

src/Tabs/index.test.tsx

@@ -5,7 +5,7 @@ import Adapter from "enzyme-adapter-react-16";
 import { Tab } from "@material-ui/core";
 
 import Tabs from ".";
-import tabsContent from "../tests/data/tabs";
+import tabsContent from "../__visual__/data/tabs";
 
 Enzyme.configure({ adapter: new Adapter() });
 

src/__visual__/Container.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import Walls from "walls";
+import indigo from "@material-ui/core/colors/indigo";
+import amber from "@material-ui/core/colors/amber";
+import AppContainer from "../AppContainer";
+import NoMatch from "../NoMatch";
+import Page from "./pages";
+import General from "./General";
+import List from "./pages/list";
+import FormPage from "./pages/form";
+import Dashboard from "./pages/dashboard";
+import TabsPage from "./pages/tabs";
+import Layout from "./Layout";
+
+const theme = {
+  palette: {
+    primary: {
+      light: indigo[300],
+      main: indigo[500],
+      dark: indigo[700],
+    },
+    secondary: {
+      light: amber[300],
+      main: amber[500],
+      dark: amber[700],
+    },
+  },
+};
+
+const routes = [
+  {
+    exact: true,
+    path: "/",
+    render: (props: any) => (
+      <Layout>
+        <Page {...props} />
+        <General {...props} />
+      </Layout>
+    ),
+  },
+  {
+    exact: true,
+    path: "/dashboard",
+    render: (props: any) => (
+      <Layout>
+        <Dashboard />
+      </Layout>
+    ),
+  },
+  {
+    exact: true,
+    path: "/list",
+    render: (props: any) => (
+      <Layout>
+        <List />
+      </Layout>
+    ),
+  },
+  {
+    exact: true,
+    path: "/form",
+    render: (props: any) => (
+      <Layout>
+        <FormPage />
+      </Layout>
+    ),
+  },
+  {
+    exact: true,
+    path: "/tabs",
+    render: (props: any) => (
+      <Layout>
+        <TabsPage />
+      </Layout>
+    ),
+  },
+  {
+    render: (props: any) => (
+      <Layout>
+        <NoMatch />
+      </Layout>
+    ),
+  },
+];
+
+const Container = () => (
+  <AppContainer theme={theme}>
+    <Walls routes={routes} />
+  </AppContainer>
+);
+export default Container;

src/tests/data/menu.tsx → src/__visual__/data/menu.tsx

@@ -38,6 +38,11 @@ const menu: MenuDataItem[] = [
         url: "/dialog",
         title: "Dialog",
       },
+      {
+        type: "link",
+        url: "/tabs",
+        title: "Tabs",
+      },
     ],
   },
   {

src/tests/pages/index.tsx → src/__visual__/pages/index.tsx

@@ -8,9 +8,6 @@ import menuData from "../data/menu";
 import AddButton from "../../AddButton";
 import BackButton from "../../BackButton";
 
-import Tabs from "../../Tabs";
-import tabData from "../data/tabs";
-
 const noop = () => {};
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -44,8 +41,6 @@ const Page: FunctionComponent<any> = ({ ...props }) => {
         Tabs
       </Typography>
 
-      <Tabs data={tabData} />
-
       <Typography variant="h4" className={classes.headline}>
         Menu
       </Typography>

src/__visual__/pages/tabs.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Typography } from "@material-ui/core";
+import BackButton from "../../BackButton";
+
+import TabsComponent from "../../Tabs";
+import tabData from "../data/tabs";
+
+const Tabs = () => {
+  return (
+    <>
+      <BackButton url="/" />
+
+      <Typography variant="h2">Tabs</Typography>
+
+      <TabsComponent data={tabData} />
+    </>
+  );
+};
+
+export default Tabs;

src/index.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { FunctionComponent } from "react";
 import ReactDOM from "react-dom";
 
-import Container from "./tests/Container";
+import Container from "./__visual__/Container";
 
 const element = document.querySelector("[data-react-app]");
 
-const render = (Component: any) => {
+const render = (Component: FunctionComponent) => {
   ReactDOM.render(<Component />, element);
 };