Fix: CI tests failing

package.json

@@ -23,6 +23,7 @@
     "deploy": "gh-pages -d build",
     "lint": "eslint src/",
     "test": "node scripts/custom-config test --env=jsdom",
+    "test:staged": "cross-env CI=true node scripts/custom-config test --env=jsdom --findRelatedTests",
     "eject": "react-scripts eject",
     "sass": "sass --watch src/styles/scss:src/styles/css",
     "precommit": "lint-staged",
@@ -38,14 +39,16 @@
     "**/src/**/*.js": [
       "prettier --write",
       "eslint --fix",
-      "git add"
+      "git add",
+      "test"
     ]
   },
   "devDependencies": {
     "@storybook/addon-viewport": "^3.4.10",
     "@storybook/react": "^3.4.10",
     "ajv": "^6.5.3",
     "babel-core": "^6.26.3",
+    "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
     "eslint": "^5.5.0",
     "eslint-config-prettier": "^3.0.1",
@@ -68,4 +71,4 @@
     "style-loader": "^0.23.0",
     "webpack-bundle-analyzer": "^3.0.2"
   }
-}
+}

scripts/config-overrides.prod.js

@@ -2,7 +2,7 @@
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-module.exports = function(config) {
+module.exports = function (config) {
   // Use your own ESLint file
   let eslintLoader = config.module.rules[0];
   eslintLoader.use[0].options.useEslintrc = true;
@@ -34,5 +34,5 @@ module.exports = function(config) {
   config.resolve.modules.push('src');
 
   // Adds the bundle analyzer to inspect the production build
-  config.plugins.push(new BundleAnalyzerPlugin());
+  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
 }

src/components/contact/Contact.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { translate, Interpolate } from 'react-i18next';
+import config from 'config/constants';
 
 import 'i18n/i18n';
 import styles from './assets/contact.scss';
@@ -8,12 +9,12 @@ import SocialMedia from './SocialMedia';
 
 const Contact = ({ t }) => {
   const emailLink = (
-    <a target="_blank" href={`mailto:${process.env.REACT_APP_EMAIL}`} className={styles.email}>
-      {process.env.REACT_APP_EMAIL}
+    <a target="_blank" href={`mailto:${config.contact.EMAIL}`} className={styles.email}>
+      {config.contact.EMAIL}
     </a>
   );
   const slackOrg = (
-    <a href={process.env.REACT_APP_SLACK_URL} className={styles.slackOrg}>
+    <a href={config.contact.SLACK_URL} className={styles.slackOrg}>
       {t('slack-org')}
     </a>
   );

src/components/contact/SocialMedia.js

@@ -2,23 +2,24 @@ import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
 
+import config from 'config/constants';
 import styles from './assets/socialmedia.scss';
 
 const SocialMedia = () => {
   return (
     <div className={styles.socialMedia}>
       <div className={styles.iconWrapper}>
-        <a target="_blank" href={process.env.REACT_APP_FB_URL} rel="noreferrer noopener">
+        <a target="_blank" href={config.social.FB_URL} rel="noreferrer noopener">
           <FontAwesomeIcon icon={faFacebook} size="2x" className={styles.greenIcons} />
         </a>
       </div>
       <div className={styles.iconWrapper}>
-        <a target="_blank" href={process.env.REACT_APP_INSTA_URL} rel="noreferrer noopener">
+        <a target="_blank" href={config.social.INSTA_URL} rel="noreferrer noopener">
           <FontAwesomeIcon icon={faInstagram} size="2x" className={styles.greenIcons} />
         </a>
       </div>
       <div className={styles.iconWrapper}>
-        <a target="_blank" href={process.env.REACT_APP_TWITTER_URL} rel="noreferrer noopener">
+        <a target="_blank" href={config.social.TWITTER_URL} rel="noreferrer noopener">
           <FontAwesomeIcon icon={faTwitter} size="2x" className={styles.greenIcons} />
         </a>
       </div>

src/components/contact/__tests__/Contact.test.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { render } from 'react-testing-library';
 import Contact from '../Contact';
+import config from 'config/constants';
 
 test('renders the contact component', () => {
+  const altText = 'Person using a magnifying glass to see the details of another guy';
   const { getByText, getByAltText } = render(<Contact />);
 
   expect(getByText('Contact')).toBeInTheDocument();
-  expect(getByAltText('people search logo')).toBeInTheDocument();
-  expect(getByText(process.env.REACT_APP_EMAIL)).toBeInTheDocument();
+  expect(getByAltText(altText, { exact: false })).toBeInTheDocument();
+  expect(getByText(config.contact.EMAIL)).toBeInTheDocument();
 });

src/components/contact/__tests__/SocialMedia.test.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { render } from 'react-testing-library';
 import SocialMedia from '../SocialMedia';
+import config from 'config/constants';
 
 test('renders the contact page', () => {
   const { container } = render(<SocialMedia />);
 
   expect(container.firstChild).toMatchSnapshot();
 
   const href = container.querySelectorAll('a');
-  expect(href[0].getAttribute('href')).toEqual(process.env.REACT_APP_FB_URL);
-  expect(href[1].getAttribute('href')).toEqual(process.env.REACT_APP_INSTA_URL);
-  expect(href[2].getAttribute('href')).toEqual(process.env.REACT_APP_TWITTER_URL);
+  expect(href[0].getAttribute('href')).toEqual(config.social.FB_URL);
+  expect(href[1].getAttribute('href')).toEqual(config.social.INSTA_URL);
+  expect(href[2].getAttribute('href')).toEqual(config.social.TWITTER_URL);
 });

src/components/contact/__tests__/__snapshots__/SocialMedia.test.js.snap

@@ -27,7 +27,7 @@ exports[`renders the contact page 1`] = `
   <div>
     <a
       target="_blank"
-      href="#"
+      href="https://www.instagram.com/"
       rel="noreferrer noopener"
     >
       <svg

src/config/constants.js

@@ -0,0 +1,13 @@
+export default {
+  contact: {
+    EMAIL: process.env.REACT_APP_EMAIL || '[email protected]',
+    SLACK_URL:
+      process.env.REACT_APP_SLACK_URL ||
+      'https://join.slack.com/t/coding-coach/shared_invite/enQtNDMyMzUzNjAxODQyLTUwYTFkMzZmNGFhMzZjYTQwOWE2YWFjOGJhNzYyOGIxNDM5Zjc1YWQ4NjMwN2U5YzBlNjkwMTI2ZDNiOWQyMzM',
+  },
+  social: {
+    FB_URL: process.env.REACT_APP_FACEBOOK_URL || 'https://www.facebook.com/codingcoachio/',
+    INSTA_URL: process.env.REACT_APP_INSTA_URL || 'https://www.instagram.com/',
+    TWITTER_URL: process.env.REACT_APP_TWITTER_URL || 'https://twitter.com/codingcoach_io',
+  },
+};

src/i18n/en.js

@@ -18,7 +18,7 @@ export default function loadEn() {
       'contact-page-msg':
         'We want to hear your thoughts! Feel free to join our {{slackOrg}} or send us an email at {{email}}',
       'contact-page-media-alt':
-        'Person using a magnifying glass to see the details of another guy.      ',
+        'Person using a magnifying glass to see the details of another guy.',
       'slack-org': 'Slack Organization',
     },
   };

yarn.lock

@@ -2557,6 +2557,13 @@ create-react-context@^0.2.1:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
+cross-env@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.2.0.tgz#6ecd4c015d5773e614039ee529076669b9d126f2"
+  dependencies:
+    cross-spawn "^6.0.5"
+    is-windows "^1.0.0"
+
 [email protected], cross-spawn@^5.0.1, cross-spawn@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
@@ -5201,7 +5208,7 @@ is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
 
-is-windows@^1.0.1, is-windows@^1.0.2:
+is-windows@^1.0.0, is-windows@^1.0.1, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"