Testing with auth0

.eslintrc

@@ -4,5 +4,11 @@
   "rules": {
     "no-underscore-dangle": "off",
     "react/jsx-props-no-spreading": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.stories.js"],
+      "rules": { "import/no-extraneous-dependencies": "off" }
+    }
+  ]
 }

package.json

@@ -66,7 +66,7 @@
     "@storybook/node-logger": "^6.1.16",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^6.1.16",
-    "husky": "^4.3.8",
+    "husky": "3.1.0",
     "plop": "^2.7.4"
   },
   "husky": {

plop-templates/component.js.hbs

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 /**
-* Describe your component
-*/
+ * Describe your component
+ */
 const {{pascalCase name}} = () => {
   return <>{{pascalCase name}}</>
 }
 
 {{pascalCase name}}.propTypes = {}
 
-export default {{ pascalCase name }}
+export default {{ pascalCase name }}

plop-templates/componentSpec.js.hbs

@@ -1,13 +1,11 @@
 import '@testing-library/jest-dom/extend-expect'
 import React from 'react'
-import { render } from '@testing-library/react'
-
+import { renderAuthenticated } from '../../testUtilities/testingLibraryWithHelpers'
 
 import {{pascalCase name}} from './{{pascalCase name}}'
 
 test('{{pascalCase name}} component renders with the expected UI elements', () => {
-const utilities = render(
-<{{pascalCase name}} />)
+  const utilities = renderAuthenticated(<{{pascalCase name}} />)
 
-expect(utilities.getByText('I should fail'))
-})
+  expect(utilities.getByText('I should fail'))
+})

src/App.test.js

@@ -1,9 +1,21 @@
-// import React from 'react'
-// import { render, screen } from '@testing-library/react'
-// import App from './App'
-
-test('renders learn react link', () => {
-  //   render(<App />)
-  //   const linkElement = screen.getByText(/learn react/i)
-  //   expect(linkElement).toBeInTheDocument()
+import React from 'react'
+import {
+  renderAuthenticated,
+  renderUnauthenticated,
+  screen,
+} from './testUtilities/testingLibraryWithHelpers'
+import App from './App'
+
+test('App renders the initial screen as expected for a authenticated user', () => {
+  renderAuthenticated(<App />)
+
+  // this assertion is for demo purposes only and will be deleted as the landing pages are built
+  expect(screen.getByText('All projects page placeholder'))
+})
+
+test('App renders the initial screen as expected for a not authenticated user', () => {
+  renderUnauthenticated(<App />)
+
+  // this assertion is for demo purposes only and will be deleted as the landing pages are built
+  expect(screen.queryByText('All projects page placeholder')).toBeNull()
 })

src/components/generic/ButtonMenu/ButtonMenu.stories.js

@@ -1,8 +1,8 @@
-import React from 'react'
 import { action } from '@storybook/addon-actions'
+import React from 'react'
+import styled from 'styled-components'
 
 import ButtonMenu from '.'
-import styled from 'styled-components'
 
 export default {
   title: 'ButtonMenu',

src/testUtilities/testingLibraryWithHelpers.js

@@ -0,0 +1,43 @@
+import { Auth0Context } from '@auth0/auth0-react'
+import { render } from '@testing-library/react'
+import { ThemeProvider } from 'styled-components/macro'
+import PropTypes from 'prop-types'
+import React from 'react'
+import theme from '../theme'
+
+const AuthenticatedProviders = ({ children }) => (
+  <Auth0Context.Provider
+    value={{ isAuthenticated: true, user: { name: 'Fake User' } }}
+  >
+    <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  </Auth0Context.Provider>
+)
+
+const UnauthenticatedProviders = ({ children }) => (
+  <Auth0Context.Provider
+    value={{ isAuthenticated: false, loginWithRedirect: () => {} }}
+  >
+    <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  </Auth0Context.Provider>
+)
+
+AuthenticatedProviders.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+UnauthenticatedProviders.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+const renderAuthenticated = (ui, options) =>
+  render(ui, { wrapper: AuthenticatedProviders, ...options })
+const renderUnauthenticated = (ui, options) =>
+  render(ui, { wrapper: UnauthenticatedProviders, ...options })
+
+const renderOverride = () => {
+  throw new Error(
+    'Please use renderAuthenticated or renderUnauthenticated instead of render.',
+  )
+}
+
+export * from '@testing-library/react'
+export { renderOverride as render, renderAuthenticated, renderUnauthenticated }