More testing pages

react-backoffice · Nov 22, 2020 · de84694 · de84694
1 parent ebc8b99
commit de84694
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 53 deletions.
diff --git a/src/tests/Container.tsx b/src/tests/Container.tsx
@@ -8,6 +8,7 @@ import Page from "./pages";
 import General from "./General";
 import List from "./pages/list";
 import FormPage from "./pages/form";
+import Dashboard from "./pages/dashboard";
 import Layout from "./Layout";
 
 const theme = {
@@ -40,6 +41,16 @@ const Container = () => (
           )}
         />
 
+        <Route
+          exact
+          path="/dashboard"
+          render={(props) => (
+            <Layout>
+              <Dashboard />
+            </Layout>
+          )}
+        />
+
         <Route
           exact
           path="/list"

diff --git a/src/tests/Layout.tsx b/src/tests/Layout.tsx
@@ -9,23 +9,15 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginRight: "auto",
     marginLeft: "auto",
     maxWidth: "80rem",
-    paddingLeft: 0,
-    paddingRight: 0,
+    padding: theme.spacing(1),
     paddingBottom: theme.spacing(5),
 
-    [theme.breakpoints.up("sm")]: {
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(1),
-    },
-
     [theme.breakpoints.up("md")]: {
-      paddingLeft: theme.spacing(5),
-      paddingRight: theme.spacing(5),
+      padding: theme.spacing(5),
     },
 
     [theme.breakpoints.up("lg")]: {
-      paddingLeft: theme.spacing(5),
-      paddingRight: theme.spacing(5),
+      padding: theme.spacing(5),
     },
   },
 }));

diff --git a/src/tests/data/dashboard.ts b/src/tests/data/dashboard.ts
@@ -1,10 +1,10 @@
 export default {
-  title: "Backoffice",
-  description: "Visual Testing for Backoffice Framework",
+  title: "Dashboard Component",
+  description: "Component to show content for dashboards",
   groups: [
     {
       id: "components",
-      title: "Backoffice's Components",
+      title: "Dashboard Cards",
       cards: [
         {
           id: "list",

diff --git a/src/tests/pages/dashboard.tsx b/src/tests/pages/dashboard.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent } from "react";
+
+import DashboardComponent from "../../Dashboard";
+import dashboardData from "../data/dashboard";
+import BackButton from "../../BackButton";
+
+const Dashboard: FunctionComponent<any> = ({ ...props }) => {
+  return (
+    <>
+      <BackButton url="/" />
+
+      <DashboardComponent data={dashboardData} {...props} />
+    </>
+  );
+};
+
+export default Dashboard;
diff --git a/src/tests/pages/index.tsx b/src/tests/pages/index.tsx
@@ -1,9 +1,7 @@
-import React from "react";
+import React, { FunctionComponent } from "react";
 import Typography from "@material-ui/core/Typography";
-import withStyles from "@material-ui/core/styles/withStyles";
-
-import Dashboard from "../../Dashboard";
-import dashboardData from "../data/dashboard";
+import { makeStyles } from "@material-ui/styles";
+import { Theme } from "@material-ui/core";
 
 import Menu from "../../Menu";
 import menuData from "../data/menu";
@@ -15,48 +13,54 @@ import tabData from "../data/tabs";
 
 const noop = () => {};
 
-const styles = (theme: any) => ({
+const useStyles = makeStyles((theme: Theme) => ({
+  hero: {
+    maxWidth: "40rem",
+    marginTop: "3rem",
+    marginLeft: "auto",
+    marginRight: "auto",
+  },
   headline: {
     marginTop: theme.spacing(4),
   },
-});
-
-interface Props {
-  classes: {
-    [key: string]: string;
-  };
-}
-
-class Page extends React.Component<Props> {
-  render() {
-    const { classes, ...props } = this.props;
-
-    return (
-      <>
-        <Dashboard data={dashboardData} {...props} />
-
-        <Typography variant="h4" className={classes.headline}>
-          Tabs
+}));
+
+const Page: FunctionComponent<any> = ({ ...props }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <div className={classes.hero}>
+        <Typography variant="h1">Backoffice</Typography>
+        <Typography>
+          Backoffice is a Framework based on{" "}
+          <a href="https://material-ui.io">Material UI</a>, a Material Design
+          React implementation that provides a couple of components you might
+          want to use in a backoffice app.
         </Typography>
+      </div>
 
-        <Tabs data={tabData} />
+      <Typography variant="h4" className={classes.headline}>
+        Tabs
+      </Typography>
 
-        <Typography variant="h4" className={classes.headline}>
-          Menu
-        </Typography>
+      <Tabs data={tabData} />
 
-        <Menu data={menuData} redirectTo={noop} {...props} />
+      <Typography variant="h4" className={classes.headline}>
+        Menu
+      </Typography>
 
-        <AddButton onClick={noop} />
+      <Menu data={menuData} redirectTo={noop} {...props} />
 
-        <Typography variant="h4" className={classes.headline}>
-          Back Button
-        </Typography>
+      <AddButton onClick={noop} />
+
+      <Typography variant="h4" className={classes.headline}>
+        Back Button
+      </Typography>
 
-        <BackButton url="/root" />
-      </>
-    );
-  }
-}
+      <BackButton url="/root" />
+    </>
+  );
+};
 
-export default withStyles(styles)(Page);
+export default Page;