basic TS enzyme jest units running for footer

Aid19801 · Aug 5, 2020 · 6f97ecb · 6f97ecb
1 parent e7f9c7f
commit 6f97ecb
Show file tree

Hide file tree

Showing 32 changed files with 9,847 additions and 2,207 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,13 @@
+{
+    "env": {
+      "development": {
+        "presets": ["next/babel", "@zeit/next-typescript/babel"]
+      },
+      "production": {
+        "presets": ["next/babel", "@zeit/next-typescript/babel"]
+      },
+      "test": {
+        "presets": ["@babel/env", "@babel/react"]
+      }
+    }
+  }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "deno.enable": false
+}
diff --git a/README.md b/README.md
@@ -1,9 +1,53 @@
 STACK:
 
-- NextJS (React)
+- 💻 NextJS (React, hooks)
 
-- Typescript
+- 📝 CMS (Wordpress / Prismic)
 
-- Docker
+- 📊 API (React-Query, GraphQL, Apollo-GraphQL )
 
-- SCSS
+- 🚨 Typescript
+
+- 🛳 Docker
+
+- 🧳 Kubernetes
+
+- 🚀 SCSS, GSAP, Bulma, FontAwesome
+
+  - SCSS (css modules, variables and nested style rules)
+
+  - GSAP (animations)
+
+  - Bulma (basic layout, minimal styling)
+
+  - Font Awesome (free-solid-svg-icons)
+
+
+- 🤡 Jest / Enzyme
+
+
+Basic Layout 
+
+Each Page Layout / Setup:
+
+```
+<div className="container">
+    <Head>
+        <title>NAME OF PAGE</title>
+        <link rel="icon" href="/favicon.ico" />
+    </Head>
+
+    <main>
+        
+        <div className="columns">
+            <div className="column">First column</div>
+            <div className="column">Second column</div>
+            <div className="column">Third column</div>
+            <div className="column">Fourth column</div>
+        </div>
+
+        
+    </main>
+
+</div>
+```
diff --git a/__mocks__/@fortawesome/free-brands-svg-icons.tsx b/__mocks__/@fortawesome/free-brands-svg-icons.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const faFacebookF = () => <div id="facebook-icon">faFacebookF</div>
+export const faTwitter = () => <div id="twitter-icon">faTwitter</div>
+export const faLinkedin = () => <div id="linkedin-icon">faLinkedin</div>
+
+module.exports = {
+    faFacebookF,
+    faTwitter,
+    faLinkedin,
+}
diff --git a/__mocks__/@fortawesome/free-solid-svg-icons.tsx b/__mocks__/@fortawesome/free-solid-svg-icons.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export const faMailBulk = () => <div id="mail-icon">mail-icon</div>
+
+module.exports = {
+    faMailBulk,
+}
diff --git a/__mocks__/@fortawesome/react-fontawesome.tsx b/__mocks__/@fortawesome/react-fontawesome.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement, MouseEvent } from 'react';
+// import { faFacebookF, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+// import { faMailBulk } from '@fortawesome/free-solid-svg-icons';
+
+interface Props {
+    onClick: any,
+    icon: object,
+    size: string,
+}
+
+export function FontAwesomeIcon({ onClick, size, icon }: Props): ReactElement {
+	return (
+        <div
+            onClick={onClick}
+            id="mock-font-awesome-icon"
+            >
+                mocked icon.
+        </div>
+    );
+}
diff --git a/__mocks__/mocks.js b/__mocks__/mocks.js
diff --git a/__mocks__/react-bulma-components/index.tsx b/__mocks__/react-bulma-components/index.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Button = () => <div>blah</div>;
+
+export default Button;
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -0,0 +1,8 @@
+// const styles = {
+//     footer: "footer",
+//     footerSocialsContainer: "footerSocialsContainer",
+// }
+
+// module.exports = styles;
+
+module.exports = {};
diff --git a/__tests__/footer.test.tsx b/__tests__/footer.test.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Footer from '../components/footer';
+
+describe('<Footer />', (): void => {
+	let shallowWrapper: any;
+
+	beforeAll((): void => {
+		shallowWrapper = mount(<Footer />);
+	});
+
+	it('should render footer without exploding', (): void => {
+		expect(shallowWrapper.find('footer').exists()).toBe(true);
+	});
+
+	describe('Social Icons', (): void => {
+		let names: string[] = ['facebook', 'twitter', 'linkedin', 'mail'];
+
+		let component: any;
+
+		let { open, location } = window;
+
+		beforeAll((): void => {
+			component = mount(<Footer />);
+
+			delete window.open;
+			delete window.location;
+			// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+			// @ts-ignore
+			window.location = {
+				href: '',
+			};
+		});
+
+		afterAll((): void => {
+			window.open = open;
+			window.location = location;
+		});
+
+		it('should render 4 x FontAwesomeIcons (socials)', (): void => {
+			expect(component.find('#mock-font-awesome-icon').length).toBe(4);
+		});
+
+		it('should render an icon for each social', (): void => {
+			names.map((each, i) => {
+				const renderedProps: any = component.find('FontAwesomeIcon').at(i).props();
+				expect(renderedProps.icon().props.id).toBe(`${each}-icon`);
+			});
+		});
+
+		it('should click to expected location [fb]', (): void => {
+			window.open = jest.fn();
+			component.find('FontAwesomeIcon').at(0).simulate('click');
+			expect(window.open).toBeCalledWith('https://www.facebook.com/funkTwentySeven'); // Happy happy, joy joy
+		});
+
+		it('should click to expected location [twitter]', (): void => {
+			window.open = jest.fn();
+			component.find('FontAwesomeIcon').at(1).simulate('click');
+			expect(window.open).toBeCalledWith('https://www.twitter.com/funkTwentySeven/'); // Happy happy, joy joy
+		});
+
+		it('should click to expected location [linkedin]', (): void => {
+			window.open = jest.fn();
+			component.find('FontAwesomeIcon').at(2).simulate('click');
+			expect(window.open).toBeCalledWith('https://www.linkedin.com/company/funk-27'); // Happy happy, joy joy
+		});
+		it('should click to expected location [email]', (): void => {
+			window.open = jest.fn();
+			component.find('FontAwesomeIcon').at(3).simulate('click');
+			expect(window.location.href).toBe(
+				'mailto:[email protected]' + "&subject='email_website_query'"
+			);
+		});
+	});
+	describe('Responsiveness', (): void => {
+		it('should show all icons if width > 1024', () => {
+
+		})
+	})
+});
+
+// let someValue: any = "this is a string";
+// let strLength: number = (someValue as string).length;
diff --git a/components/footer/footer.module.scss b/components/footer/footer.module.scss
@@ -0,0 +1,34 @@
+@import '../../scss/variables.scss';
+
+.footer {
+	background-color: #d4d0d2;
+	bottom: 0;
+	position: fixed;
+	left: 0;
+	width: 100vw;
+	padding: 10px 30px;
+	border-top: 0.2px solid lightgrey;
+	border-width: 60%;
+	border: 4px solid black;
+	height: auto;
+
+	.p {
+		color: $text-colour;
+		border: 1px solid $border-dark;
+		font-size: 9px;
+	}
+	.footerSocialsContainer {
+		width: 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-evenly;
+		svg {
+			width: 30px;
+			height: 30px;
+			min-width: 30px;
+			max-width: 30px;
+			min-height: 30px;
+			max-height: 30px;
+		}
+	}
+}
diff --git a/components/footer/index.tsx b/components/footer/index.tsx
@@ -0,0 +1,63 @@
+import React, { ReactElement } from 'react';
+import { faFacebookF, faTwitter, faLinkedin } from '@fortawesome/free-brands-svg-icons';
+import { faMailBulk } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import styles from './footer.module.scss';
+
+interface Props {}
+
+function Footer({}: Props): ReactElement {
+
+	const handleClick = (location: string) => {
+
+		let str = '';
+
+		switch(location) {
+
+			case 'facebook':
+				str = "https://www.facebook.com/funkTwentySeven";
+			break;
+
+			case 'twitter':
+				str = "https://www.twitter.com/funkTwentySeven/"
+			break;
+
+			case 'linkedin':
+				str = "https://www.linkedin.com/company/funk-27"
+			break;
+
+			case 'email':
+				window.location.href = "mailto:[email protected]"+"&subject='email_website_query'";
+			break;
+
+			default:
+				return;
+		}
+		return window.open(str);
+	}
+	return (
+		<React.Fragment>
+			<footer className={styles.footer}>
+
+				<div className={styles.footerSocialsContainer}>
+					<FontAwesomeIcon onClick={() => handleClick('facebook')} icon={faFacebookF} size="xs" />
+					<FontAwesomeIcon onClick={() => handleClick('twitter')} icon={faTwitter} size="xs" />
+					<FontAwesomeIcon onClick={() => handleClick('linkedin')} icon={faLinkedin} size="xs" />
+					<FontAwesomeIcon onClick={() => handleClick('email')} icon={faMailBulk} size="xs" />
+				</div>
+
+				<div className="has-text-centered">
+					<p className={styles.p}>
+						<strong>Funk-27</strong> by <a href="https://github.com/Aid19801">Aid Thompson</a>. The source code is
+						licensed
+						<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is
+						licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
+					</p>
+				</div>
+
+			</footer>
+		</React.Fragment>
+	);
+}
+
+export default Footer;
diff --git a/components/index.tsx b/components/index.tsx
@@ -1,7 +1,9 @@
 import Image from './image';
+import Footer from './footer';
 import Navbar from './navbar';
 
 export {
     Image,
+    Footer,
     Navbar
 }