Merge branch 'main' into 5-lighthouse-action

.github/CODEOWNERS

@@ -5,5 +5,5 @@
 # the repo. Unless a later match takes precedence,
 # @global-owner1 and @global-owner2 will be requested for
 # review when someone opens a pull request.
-*       @ann-kilzer
+*       @ann-kilzer @sirbully
 

README.md

@@ -6,31 +6,55 @@
 
 # WiSE JP Homepage
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-Currently, two official plugins are available:
+## Prerequisites
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+1. Review the [CONTRIBUTING](https://github.com/WomenInSoftwareEngineeringJP/home/blob/main/CONTRIBUTING.md) guidelines
+2. NodeJS to match the version [here](https://github.com/WomenInSoftwareEngineeringJP/home/blob/main/.nvmrc)
 
-## Expanding the ESLint configuration
+## Running the app locally
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Install dependencies
+```sh
+npm i
+```
 
-- Configure the top-level `parserOptions` property like this:
+Run for dev mode
+```sh
+npm run dev
+```
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+Build for prod
+```sh
+npm run build
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+
+## Quality Strategy
+
+### Unit tests 📦️
+We are using [Vitest](https://vitest.dev/guide/) 
+and [Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for our unit tests.
+
+Please aim for about 80% or greater test coverage. Perfection on metrics can often be the wrong target, so we aim for "good enough"
+
+Automated tests are incorporated into GitHub Actions so we can easily see if our application is safe to deploy.
+
+You can run the unit tests like so:
+
+Command lines
+```sh
+npm run test
+```
+
+[UI Mode](https://vitest.dev/guide/ui)
+```sh
+npm run test:ui 
+```
+
+When writing new tests, please follow the [Testing Library Guiding Principles](https://testing-library.com/docs/guiding-principles)
+
+
+### End-to-end (E2E) tests ↔️
+
+We will use [Playwright](https://playwright.dev/) (to be installed after #4) for testing. 

src/components/Footer/Footer.tsx

@@ -1,14 +1,20 @@
 import { FC } from 'react';
 import BottomNavigation from '@mui/material/BottomNavigation'
 import Paper from '@mui/material/Paper'
-import StarIcon from '@mui/icons-material/Star'
+import InstagramIcon from '@mui/icons-material/Instagram';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import FacebookIcon from '@mui/icons-material/Facebook';
+import GitHubIcon from '@mui/icons-material/GitHub';
 import FooterIcon from './FooterIcon';
 
 
 const Footer: FC = () => {
     return <Paper sx={{ position: 'static', bottom: 0, left: 0, right: 0 }} elevation={0} aria-label="footer">
         <BottomNavigation sx={{ backgroundColor: '#512da8' }}>
-            <FooterIcon label="Example Icon" icon={<StarIcon />} href="https://example.com" />
+            <FooterIcon label="Instagram" icon={<InstagramIcon />} href="https://www.instagram.com/womeninsoftwarejp/" />
+            <FooterIcon label="LinkedIn" icon={<LinkedInIcon />} href="https://www.linkedin.com/company/womeninsoftwarejp/" />
+            <FooterIcon label="Facebook" icon={<FacebookIcon />} href="https://www.facebook.com/womeninsoftwarejp/" />
+            <FooterIcon label="GitHub" icon={<GitHubIcon />} href="https://github.com/WomenInSoftwareEngineeringJP" />
         </BottomNavigation>
     </Paper>
 }

src/components/Footer/__test__/Footer.test.tsx

@@ -6,8 +6,18 @@ import Footer from '../Footer'
 describe('Footer', () => {
     it('should display the Footer with relevant links', async () => {
         render(<Footer />)
-        const icon = await screen.findByLabelText('Example Icon')
-        expect(icon).toBeVisible()
+        const instagram = await screen.findByLabelText('Instagram')
+        expect(instagram).toBeVisible()
+        expect(instagram).toHaveAttribute('href', 'https://www.instagram.com/womeninsoftwarejp/')
+        const linkedIn = await screen.findByLabelText('LinkedIn')
+        expect(linkedIn).toBeVisible()
+        expect(linkedIn).toHaveAttribute('href', 'https://www.linkedin.com/company/womeninsoftwarejp/')
+        const facebook = await screen.findByLabelText('Facebook')
+        expect(facebook).toBeVisible()
+        expect(facebook).toHaveAttribute('href', 'https://www.facebook.com/womeninsoftwarejp/')
+        const github = await screen.findByLabelText('GitHub')
+        expect(github).toBeVisible()
+        expect(github).toHaveAttribute('href', 'https://github.com/WomenInSoftwareEngineeringJP')
     })
 
 })