Skip to content

Commit

Permalink
Add team avatars (#43)
Browse files Browse the repository at this point in the history 
* feat: add team avatars to about page (WIP)

* feat: add team ImageAvatars & shallow snapshot test

* fix: remove extra space in test

* chore: add @types/react-test-renderer

* fix: trying to fix the version of react-test-renderer

 Author:    Adam Cobb <[email protected]>
Date:      Sat Dec 18 10:46:00 2021 -0800

Co-authored-by: Alex Kerr <[email protected]>
Co-authored-by: Adam Cobb <[email protected]>
  • Loading branch information
@alex94143 @adamos486
3 people authored Dec 18, 2021
1 parent b5d27cc commit 451e21c
Show file tree
Hide file tree
Showing 9 changed files with 209 additions and 14 deletions.
10 changes: 7 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,22 @@
"dependencies": {
"@material-ui/core": "^4.10.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/dom": "5",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"@testing-library/user-event": "7.2.1",
"@types/jest": "^24.0.0",
"@types/lodash": "^4.14.159",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-test-renderer": "^17.0.1",
"axios": "^0.19.2",
"moment": "^2.27.0",
"prettier": "^2.3.2",
"react": "^16.13.1",
"react": "^16.8.0",
"react-dom": "^16.13.1",
"react-is": "16.8.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"styled-components": "^5.1.1",
Expand Down Expand Up @@ -52,6 +55,7 @@
"@commitlint/config-conventional": "^14.1.0",
"@types/react-router-dom": "^5.1.5",
"@types/styled-components": "^5.1.0",
"husky": "^7.0.0"
"husky": "^7.0.0",
"react-test-renderer": "^16.8.6"
}
}
Binary file added src/assets/avatars/emily.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/avatars/rocio.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/components/home/AboutUs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import {ReactComponent as YellowHalfCircle} from "../../assets/YellowHalfCircle.svg";
import styled from "styled-components";
import Typography from "@material-ui/core/Typography";
import ImageAvatars from "./ImageAvatars";

const Container = styled.div`
display: flex;
Expand Down Expand Up @@ -49,6 +50,8 @@ const AboutUs: React.FC = () => {
needs, as well as to help the City and other brigades with their
data science needs whenever appropriate.
</Typography>
<ImageAvatars />

</AboutDescription>
</Container>
);
Expand Down
9 changes: 9 additions & 0 deletions src/components/home/ImageAvatars.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react';
import { shallowRenderToMatchSnapshot } from '../../util/unitTests';
import ImageAvatars from './ImageAvatars';

describe('<ImageAvatars>', () => {
it('renders correctly', () => {
shallowRenderToMatchSnapshot(<ImageAvatars />);
});
});
56 changes: 56 additions & 0 deletions src/components/home/ImageAvatars.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
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';

const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
'& > *': {
margin: theme.spacing(1),
},
},
large: {
width: theme.spacing(15),
height: theme.spacing(15),
},
}));

export default function ImageAvatars() {
const classes = useStyles();

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>
</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>
</Box>
);
}
74 changes: 74 additions & 0 deletions src/components/home/__snapshots__/ImageAvatars.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ImageAvatars> renders correctly 1`] = `
<ForwardRef(StyledComponent)
component="section"
mb={8}
mt={8}
>
<ForwardRef(WithStyles)
variant="h3"
>
Meet the Team
</ForwardRef(WithStyles)>
<div
className="makeStyles-root-1"
>
<ForwardRef(WithStyles)
container={true}
spacing={2}
>
<ForwardRef(WithStyles)
item={true}
xs={6}
>
<ForwardRef(StyledComponent)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(WithStyles)
alt="Rocio"
className="makeStyles-large-2"
src="rocio.jpg"
/>
<ForwardRef(WithStyles)>
Rocio Ng
</ForwardRef(WithStyles)>
<ForwardRef(WithStyles)
variant="body2"
>
Project Lead
</ForwardRef(WithStyles)>
</ForwardRef(StyledComponent)>
</ForwardRef(WithStyles)>
<ForwardRef(WithStyles)
item={true}
xs={6}
>
<ForwardRef(StyledComponent)
alignItems="center"
display="flex"
flexDirection="column"
justifyContent="center"
>
<ForwardRef(WithStyles)
alt="Emily"
className="makeStyles-large-2"
src="emily.jpg"
/>
<ForwardRef(WithStyles)>
Emily Kasa
</ForwardRef(WithStyles)>
<ForwardRef(WithStyles)
variant="body2"
>
Data Jam Lead
</ForwardRef(WithStyles)>
</ForwardRef(StyledComponent)>
</ForwardRef(WithStyles)>
</ForwardRef(WithStyles)>
</div>
</ForwardRef(StyledComponent)>
`;
11 changes: 11 additions & 0 deletions src/util/unitTests.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as ShallowRenderer from 'react-test-renderer/shallow';

export const shallowRenderToMatchSnapshot = (
componentInstance: JSX.Element
) => {
const renderer = ShallowRenderer.createRenderer();

renderer.render(componentInstance);

expect(renderer.getRenderOutput()).toMatchSnapshot();
};
60 changes: 49 additions & 11 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1697,6 +1697,17 @@
"@svgr/plugin-svgo" "^4.3.1"
loader-utils "^1.2.3"

"@testing-library/dom@5":
version "5.6.1"
resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-5.6.1.tgz#705a1cb4a039b877c1e69e916824038e837ab637"
integrity sha512-Y1T2bjtvQMewffn1CJ28kpgnuvPYKsBcZMagEH0ppfEMZPDc8AkkEnTk4smrGZKw0cblNB3lhM2FMnpfLExlHg==
dependencies:
"@babel/runtime" "^7.5.5"
"@sheerun/mutationobserver-shim" "^0.3.2"
aria-query "3.0.0"
pretty-format "^24.8.0"
wait-for-expect "^1.2.0"

"@testing-library/dom@^6.15.0":
version "6.16.0"
resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz"
Expand Down Expand Up @@ -1734,9 +1745,9 @@
"@testing-library/dom" "^6.15.0"
"@types/testing-library__react" "^9.1.2"

"@testing-library/user-event@^7.1.2":
"@testing-library/user-event@7.2.1":
version "7.2.1"
resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz"
resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-7.2.1.tgz#2ad4e844175a3738cb9e7064be5ea070b8863a1c"
integrity sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA==

"@types/babel__core@^7.1.0":
Expand Down Expand Up @@ -1901,6 +1912,13 @@
"@types/history" "*"
"@types/react" "*"

"@types/react-test-renderer@^17.0.1":
version "17.0.1"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
dependencies:
"@types/react" "*"

"@types/react-transition-group@^4.2.0":
version "4.4.0"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz"
Expand Down Expand Up @@ -2367,7 +2385,7 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"

aria-query@^3.0.0:
aria-query@3.0.0, aria-query@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz"
integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
Expand Down Expand Up @@ -6866,7 +6884,7 @@ [email protected]:

"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

js-tokens@^3.0.2:
Expand Down Expand Up @@ -7982,7 +8000,7 @@ oauth-sign@~0.9.0:

object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=

object-copy@^0.1.0:
Expand Down Expand Up @@ -9267,7 +9285,7 @@ pretty-error@^2.1.1:
renderkid "^2.0.1"
utila "~0.4"

pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.8.0, pretty-format@^24.9.0:
version "24.9.0"
resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz"
integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
Expand Down Expand Up @@ -9538,7 +9556,12 @@ react-error-overlay@^6.0.7:
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.7.tgz"
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==

react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
[email protected]:
version "16.8.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.0.tgz#518db476214f3fb0716af9f82dfd420225ae970f"
integrity sha512-LOy+3La39aduxaPfuj+lCXC5RQ8ukjVPAAsFJ3yQ+DIOLf4eR9OMKeWKF0IzjRyE95xMj5QELwiXGgfQsIJguA==

react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand Down Expand Up @@ -9632,6 +9655,16 @@ [email protected]:
optionalDependencies:
fsevents "2.1.2"

react-test-renderer@^16.8.6:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
integrity sha512-L8yPjqPE5CZO6rKsKXRO/rVPiaCOy0tQQJbC+UjPNlobl5mad59lvPjwFsQHTvL03caVDIVr9x9/OSgDe6I5Eg==
dependencies:
object-assign "^4.1.1"
prop-types "^15.6.2"
react-is "^16.8.6"
scheduler "^0.19.1"

react-transition-group@^4.4.0:
version "4.4.1"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz"
Expand All @@ -9642,10 +9675,10 @@ react-transition-group@^4.4.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@^16.13.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react/-/react-16.13.1.tgz"
integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
react@^16.8.0:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
Expand Down Expand Up @@ -11528,6 +11561,11 @@ w3c-xmlserializer@^1.1.2:
webidl-conversions "^4.0.2"
xml-name-validator "^3.0.0"

wait-for-expect@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-1.3.0.tgz#65241ce355425f907f5d127bdb5e72c412ff830c"
integrity sha512-8fJU7jiA96HfGPt+P/UilelSAZfhMBJ52YhKzlmZQvKEZU2EcD1GQ0yqGB6liLdHjYtYAoGVigYwdxr5rktvzA==

wait-for-expect@^3.0.2:
version "3.0.2"
resolved "https://registry.npmjs.org/wait-for-expect/-/wait-for-expect-3.0.2.tgz"
Expand Down

0 comments on commit 451e21c

Please sign in to comment.