feat: adding alex to the About component

sfbrigade · Mar 17, 2022 · f176f5e · f176f5e
1 parent 3b79a50
commit f176f5e
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 42 deletions.
diff --git a/src/assets/avatars/alexkerr.jpg b/src/assets/avatars/alexkerr.jpg
diff --git a/src/components/home/ImageAvatars.test.tsx b/src/components/home/ImageAvatars.test.tsx
@@ -1,10 +1,35 @@
-import React from 'react';
-import { shallowRenderToMatchSnapshot } from '../../util/unitTests';
+import React from "react";
+import {shallowRenderToMatchSnapshot} from "../../util/unitTests";
 
-import ImageAvatars from './ImageAvatars';
+import ImageAvatars from "./ImageAvatars";
+import {render, screen} from "@testing-library/react";
 
-describe('<ImageAvatars>', () => {
-    it('renders correctly', () => {
-        shallowRenderToMatchSnapshot(<ImageAvatars />);
-    });
-});
+describe("<ImageAvatars>", () => {
+  it("renders correctly", () => {
+    shallowRenderToMatchSnapshot(<ImageAvatars />);
+  });
+
+  it("displays rocio name and photo and title", () => {
+    render(<ImageAvatars />);
+
+    expect(screen.getByText("Rocio Ng")).toBeVisible();
+    expect(screen.getByAltText("Rocio")).toHaveAttribute("src", "rocio.jpg");
+    expect(screen.getByText("Project Lead")).toBeVisible();
+  });
+
+  it("displays emilys name and photo and title", () => {
+    render(<ImageAvatars />);
+
+    expect(screen.getByText("Emily Kasa")).toBeVisible();
+    expect(screen.getByAltText("Emily")).toHaveAttribute("src", "emily.jpg");
+    expect(screen.getByText("Data Jam Lead")).toBeVisible();
+  });
+
+  it("displays alexs name and photo and title", () => {
+    render(<ImageAvatars />);
+
+    expect(screen.getByAltText("Alex")).toHaveAttribute("src", "alexkerr.jpg");
+    expect(screen.getByText("Alex Kerr")).toBeVisible();
+    expect(screen.getByText("Engineer")).toBeVisible();
+  });
+});
diff --git a/src/components/home/ImageAvatars.tsx b/src/components/home/ImageAvatars.tsx
@@ -1,17 +1,18 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
+import React from "react";
+import {makeStyles} from "@material-ui/core/styles";
+import Avatar from "@material-ui/core/Avatar";
+import Grid from "@material-ui/core/Grid";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
 
-import rocio from '../../assets/avatars/rocio.jpg';
-import emily from '../../assets/avatars/emily.jpg';
+import rocio from "../../assets/avatars/rocio.jpg";
+import emily from "../../assets/avatars/emily.jpg";
+import alex from "../../assets/avatars/alexkerr.jpg";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    display: 'flex',
-    '& > *': {
+    display: "flex",
+    "& > *": {
       margin: theme.spacing(1),
     },
   },
@@ -27,30 +28,46 @@ export default function ImageAvatars() {
   return (
     <Box component="section" mt={8} mb={8}>
       <Typography variant="h3">Meet the Team</Typography>
-    <div className={classes.root}>
-      <Grid container spacing={2}>
-        <Grid item xs={6}>
-          <Box display="flex"  
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center">
-        <Avatar alt="Rocio" src={rocio} className={classes.large} />
-        <Typography>Rocio Ng</Typography>
-        <Typography variant="body2">Project Lead</Typography>
-        </Box>
+      <div className={classes.root}>
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Avatar alt="Rocio" src={rocio} className={classes.large} />
+              <Typography>Rocio Ng</Typography>
+              <Typography variant="body2">Project Lead</Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Avatar alt="Emily" src={emily} className={classes.large} />
+              <Typography>Emily Kasa</Typography>
+              <Typography variant="body2">Data Jam Lead</Typography>
+            </Box>
+          </Grid>
+          <Grid item xs={6}>
+            <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Avatar alt="Alex" src={alex} className={classes.large}/>
+              <Typography>Alex Kerr</Typography>
+              <Typography variant="body2">Engineer</Typography>
+            </Box>
+          </Grid>
         </Grid>
-        <Grid item xs={6}>
-        <Box display="flex"  
-          flexDirection="column"
-          alignItems="center"
-          justifyContent="center">
-        <Avatar alt="Emily" src={emily} className={classes.large} />
-        <Typography>Emily Kasa</Typography>
-        <Typography  variant="body2">Data Jam Lead</Typography>
-        </Box>
-        </Grid>
-      </Grid>
-    </div>
+      </div>
     </Box>
   );
-}
+}
diff --git a/src/components/home/__snapshots__/ImageAvatars.test.tsx.snap b/src/components/home/__snapshots__/ImageAvatars.test.tsx.snap
@@ -68,6 +68,31 @@ exports[`<ImageAvatars> renders correctly 1`] = `
           </WithStyles(ForwardRef(Typography))>
         </Styled(MuiBox)>
       </WithStyles(ForwardRef(Grid))>
+      <WithStyles(ForwardRef(Grid))
+        item={true}
+        xs={6}
+      >
+        <Styled(MuiBox)
+          alignItems="center"
+          display="flex"
+          flexDirection="column"
+          justifyContent="center"
+        >
+          <WithStyles(ForwardRef(Avatar))
+            alt="Alex"
+            className="makeStyles-large-2"
+            src="alexkerr.jpg"
+          />
+          <WithStyles(ForwardRef(Typography))>
+            Alex Kerr
+          </WithStyles(ForwardRef(Typography))>
+          <WithStyles(ForwardRef(Typography))
+            variant="body2"
+          >
+            Engineer
+          </WithStyles(ForwardRef(Typography))>
+        </Styled(MuiBox)>
+      </WithStyles(ForwardRef(Grid))>
     </WithStyles(ForwardRef(Grid))>
   </div>
 </Styled(MuiBox)>