fix(provider): fix for rendering components outside provider

CHANGELOG.md

@@ -17,17 +17,16 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
-### Features
-- Add Focus Trap Zone @sophieH29 ([#239](https://github.com/stardust-ui/react/pull/239))
-
 ### BREAKING
 - Export all typings at the top-level API @levithomason ([#382](https://github.com/stardust-ui/react/pull/382))
 
 ### Fixes
 - Fix build on Windows @jurokapsiar ([#383](https://github.com/stardust-ui/react/pull/383))
+- Add warning for rendering components outside provider @Bugaa92 ([#378](https://github.com/stardust-ui/react/pull/378))
 
 ### Features
 - Export `mergeThemes` @levithomason ([#285](https://github.com/stardust-ui/react/pull/285))
+- Add Focus Trap Zone @sophieH29 ([#239](https://github.com/stardust-ui/react/pull/239))
 - Add compose icons to Teams theme @joheredi ([#396](https://github.com/stardust-ui/react/pull/396))
 
 ### Documentation

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -7,7 +7,6 @@ import { Grid, Header, Icon } from 'semantic-ui-react'
 
 import componentInfoShape from 'docs/src/utils/componentInfoShape'
 import { scrollToAnchor, examplePathToHash, getFormattedHash } from 'docs/src/utils'
-import { accessibilityErrorMessage } from 'docs/src/constants'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
 import ComponentExamples from './ComponentExamples'
@@ -88,7 +87,8 @@ class ComponentDoc extends React.Component<any, any> {
               <ComponentDocTag
                 title="Accessibility"
                 tag="accessibility"
-                errorMessage={accessibilityErrorMessage}
+                errorMessage="No accessibility description found for this component. Please explain the
+                  accessibility concerns of the component by adding the @accessibility tag to the component's docblock."
                 info={info}
               />
               <ComponentDocSee displayName={info.displayName} />

docs/src/components/ComponentDoc/ComponentDocLinks.tsx

@@ -1,8 +1,7 @@
 import PropTypes from 'prop-types'
 import * as React from 'react'
 import { List } from 'semantic-ui-react'
-
-import { repoURL } from '../../utils'
+import { constants } from 'src/lib'
 
 const linkListStyle = {
   background: '#f7f7f7',
@@ -28,7 +27,7 @@ export default class ComponentDocLinks extends React.PureComponent<any, any> {
           content={
             <code>
               <a
-                href={`${repoURL}/blob/master/${repoPath}`}
+                href={`${constants.repoURL}/blob/master/${repoPath}`}
                 target="_blank"
                 rel="noopener noreferrer"
               >

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -8,15 +8,9 @@ import * as copyToClipboard from 'copy-to-clipboard'
 import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
 
-import {
-  examplePathToHash,
-  getFormattedHash,
-  knobsContext,
-  repoURL,
-  scrollToAnchor,
-} from 'docs/src/utils'
+import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } from 'docs/src/utils'
 import evalTypeScript from 'docs/src/utils/evalTypeScript'
-import { callable, doesNodeContainClick, pxToRem } from 'src/lib'
+import { callable, doesNodeContainClick, pxToRem, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
 import ComponentControls from '../ComponentControls'
 import ComponentExampleTitle from './ComponentExampleTitle'
@@ -437,7 +431,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
     const filename = pathParts[pathParts.length - 1]
 
     const ghEditHref = [
-      `${repoURL}/edit/master/docs/src/examples/${currentPath}.tsx`,
+      `${constants.repoURL}/edit/master/docs/src/examples/${currentPath}.tsx`,
       `?message=docs(${filename}): your description`,
     ].join('')
 

docs/src/components/ComponentDoc/ContributionPrompt.tsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { repoURL } from 'docs/src/utils'
 import { Message, Icon } from 'semantic-ui-react'
+import { constants } from 'src/lib'
 
 const wrapStyle = { wordBreak: 'break-word' }
 
@@ -13,11 +13,11 @@ const ContributionPrompt: any = ({ children }) => (
       {children && <div>{children}</div>}
       <p>
         If there's no{' '}
-        <a href={`${repoURL}/pulls`}>
+        <a href={`${constants.repoURL}/pulls`}>
           pull request <Icon fitted size="small" name="external" />
         </a>{' '}
         open for this, you should{' '}
-        <a href={`${repoURL}/blob/master/.github/CONTRIBUTING.md`}>
+        <a href={`${constants.repoURL}/blob/master/.github/CONTRIBUTING.md`}>
           contribute <Icon fitted size="small" name="external" />
         </a>{' '}
         one!

docs/src/components/Sidebar/Sidebar.tsx

@@ -8,9 +8,10 @@ import { withRouter } from 'react-router'
 import { Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
 
 import Logo from 'docs/src/components/Logo/Logo'
-import { getComponentPathname, repoURL, typeOrder } from 'docs/src/utils'
+import { getComponentPathname } from 'docs/src/utils'
 import { themes } from '@stardust-ui/react'
 import { ThemeContext } from '../../context/theme-context'
+import { constants } from 'src/lib'
 
 const pkg = require('../../../../package.json')
 const componentMenu = require('docs/src/componentMenu')
@@ -121,7 +122,7 @@ class Sidebar extends React.Component<any, any> {
         <Menu.Menu>{items}</Menu.Menu>
       </Menu.Item>
     )
-  }, typeOrder)
+  }, constants.typeOrder)
 
   renderSearchItems = () => {
     const { selectedItemIndex, query } = this.state
@@ -181,12 +182,17 @@ class Sidebar extends React.Component<any, any> {
                 </small>
               </strong>
               <Menu.Menu>
-                <Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
+                <Menu.Item
+                  as="a"
+                  href={constants.repoURL}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <Icon name="github" /> GitHub
                 </Menu.Item>
                 <Menu.Item
                   as="a"
-                  href={`${repoURL}/blob/master/CHANGELOG.md`}
+                  href={`${constants.repoURL}/blob/master/CHANGELOG.md`}
                   target="_blank"
                   rel="noopener noreferrer"
                 >

docs/src/utils/index.tsx

@@ -1,4 +1,3 @@
-export * from './constants'
 export { default as componentInfoContext } from './componentInfoContext'
 export { default as componentInfoShape } from './componentInfoShape'
 export { default as exampleContext } from './exampleContext'

src/lib/constants.ts

@@ -0,0 +1,10 @@
+const docSiteUrl = 'https://stardust-ui.github.io/react'
+
+const constants = {
+  docSiteUrl,
+  quickStartUrl: `${docSiteUrl}/quick-start`,
+  repoURL: 'https://github.com/stardust-ui/react',
+  typeOrder: ['component', 'behavior'],
+}
+
+export default constants

src/lib/index.ts

@@ -9,6 +9,7 @@ export { default as toCompactArray } from './toCompactArray'
 
 export * from './factories'
 export { default as callable } from './callable'
+export { default as constants } from './constants'
 export { default as getClasses } from './getClasses'
 export { default as getElementType } from './getElementType'
 export { default as getUnhandledProps } from './getUnhandledProps'

src/lib/providerMissingHandler.ts

@@ -0,0 +1,17 @@
+import constants from './constants'
+
+const warning = {
+  message: `You probably forgot to use a 'Provider'. Check ${
+    constants.quickStartUrl
+  } for correct usage.`,
+  wasLogged: false,
+}
+
+const logProviderMissingWarning = (): void => {
+  if (!warning.wasLogged) {
+    console.error(warning.message)
+    warning.wasLogged = true
+  }
+}
+
+export default logProviderMissingWarning

src/lib/renderComponent.tsx

@@ -1,12 +1,14 @@
 import * as cx from 'classnames'
 import * as React from 'react'
+import * as _ from 'lodash'
 import { FelaTheme } from 'react-fela'
 
 import callable from './callable'
 import felaRenderer from './felaRenderer'
 import getClasses from './getClasses'
 import getElementType from './getElementType'
 import getUnhandledProps from './getUnhandledProps'
+import logProviderMissingWarning from './providerMissingHandler'
 import {
   ComponentStyleFunctionParam,
   ComponentVariablesObject,
@@ -132,6 +134,10 @@ const renderComponent = <P extends {}>(
   return (
     <FelaTheme
       render={(theme: ThemePrepared) => {
+        if (_.isEmpty(theme)) {
+          logProviderMissingWarning()
+        }
+
         const {
           siteVariables = { fontSizes: {} },
           componentVariables = {},

test/specs/commonTests/handlesAccessibility.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { getTestingRenderedComponent } from 'test/utils'
+import { mountWithProviderAndGetComponent } from 'test/utils'
 import { defaultBehavior } from 'src/lib/accessibility'
 import { Accessibility, AriaRole, FocusZoneMode } from 'src/lib/accessibility/types'
 import { FocusZone } from 'src/lib/accessibility/FocusZone'
@@ -46,13 +46,13 @@ export default (Component, options: any = {}) => {
   } = options
 
   test('gets default accessibility when no override used', () => {
-    const rendered = getTestingRenderedComponent(Component, <Component {...requiredProps} />)
+    const rendered = mountWithProviderAndGetComponent(Component, <Component {...requiredProps} />)
     const role = getRenderedAttribute(rendered, 'role', partSelector)
     expect(role).toBe(defaultRootRole)
   })
 
   test('does not get role when overrides to default', () => {
-    const rendered = getTestingRenderedComponent(
+    const rendered = mountWithProviderAndGetComponent(
       Component,
       <Component {...requiredProps} accessibility={defaultBehavior} />,
     )
@@ -63,7 +63,7 @@ export default (Component, options: any = {}) => {
   if (!partSelector) {
     // temporarily disabled as we do not support overriding of attributes applied to parts
     test('gets correct role when overrides accessibility', () => {
-      const rendered = getTestingRenderedComponent(
+      const rendered = mountWithProviderAndGetComponent(
         Component,
         <Component {...requiredProps} accessibility={TestBehavior} />,
       )
@@ -73,7 +73,7 @@ export default (Component, options: any = {}) => {
 
     test('gets correct role when overrides role', () => {
       const testRole = 'test-role'
-      const rendered = getTestingRenderedComponent(
+      const rendered = mountWithProviderAndGetComponent(
         Component,
         <Component {...requiredProps} role={testRole} />,
       )
@@ -83,7 +83,7 @@ export default (Component, options: any = {}) => {
 
     test('gets correct role when overrides both accessibility and role', () => {
       const testRole = 'test-role'
-      const rendered = getTestingRenderedComponent(
+      const rendered = mountWithProviderAndGetComponent(
         Component,
         <Component {...requiredProps} accessibility={TestBehavior} role={testRole} />,
       )
@@ -95,7 +95,10 @@ export default (Component, options: any = {}) => {
   if (focusZoneDefinition) {
     if (focusZoneDefinition.mode === FocusZoneMode.Wrap) {
       test('gets wrapped in FocusZone', () => {
-        const rendered = getTestingRenderedComponent(Component, <Component {...requiredProps} />)
+        const rendered = mountWithProviderAndGetComponent(
+          Component,
+          <Component {...requiredProps} />,
+        )
 
         const focusZone = rendered.childAt(0).childAt(0) // skip thru FelaTheme
         expect(focusZone.type()).toEqual(FocusZone)
@@ -106,7 +109,10 @@ export default (Component, options: any = {}) => {
       })
     } else if (focusZoneDefinition.mode === FocusZoneMode.Embed) {
       test('gets embedded with FocusZone', () => {
-        const rendered = getTestingRenderedComponent(Component, <Component {...requiredProps} />)
+        const rendered = mountWithProviderAndGetComponent(
+          Component,
+          <Component {...requiredProps} />,
+        )
 
         const focusZone = rendered.childAt(0).childAt(0) // skip thru FelaTheme
         expect(focusZone.type()).toEqual(FocusZone)

test/specs/commonTests/htmlIsAccessibilityCompliant.ts

@@ -1,7 +1,6 @@
-const ReactDOMServer = require('react-dom/server')
-const { axe } = require('jest-axe')
-
-const { toHaveNoViolations } = require('jest-axe')
+import * as ReactDOMServer from 'react-dom/server'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { withProvider } from 'test/utils'
 
 type AxeMatcher<R> = jest.Matchers<R> & {
   toHaveNoViolations: () => R
@@ -14,8 +13,8 @@ interface AxeExpect extends jest.Expect {
 const expectAxe = expect as AxeExpect
 expect.extend(toHaveNoViolations)
 
-export default async (jsx: React.ReactNode) => {
-  const html = ReactDOMServer.renderToString(jsx)
+export default async (jsx: React.ReactElement<any>) => {
+  const html = ReactDOMServer.renderToString(withProvider(jsx))
   const results = await axe(html)
   expectAxe(results).toHaveNoViolations()
 }

test/specs/commonTests/implementsCollectionShorthandProp.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { mount } from './isConformant'
+import { mountWithProvider as mount } from 'test/utils'
 import * as _ from 'lodash'
 
 export type CollectionShorthandTestOptions = {

test/specs/commonTests/implementsShorthandProp.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { mount, ReactWrapper } from 'enzyme'
+import { ReactWrapper } from 'enzyme'
+import { mountWithProvider } from 'test/utils'
 import { Props } from '../../../types/utils'
 
 export type ShorthandTestOptions = {
@@ -34,7 +35,10 @@ export default Component => {
       const matchedProps =
         typeof withProps === 'string' ? { [mapsValueToProp]: withProps } : withProps
 
-      expectContainsSingleShorthandElement(mount(<Component {...props} />), matchedProps)
+      expectContainsSingleShorthandElement(
+        mountWithProvider(<Component {...props} />),
+        matchedProps,
+      )
     }
 
     describe(`shorthand property '${shorthandProp}' with default value of '${displayName}' component`, () => {

test/specs/commonTests/implementsWrapperProp.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
-import { mount, ReactWrapper } from 'enzyme'
+import { ReactWrapper } from 'enzyme'
+import { mountWithProvider as mount } from 'test/utils'
 
 import Slot from 'src/components/Slot/Slot'
 import { ShorthandValue } from 'utils'

test/specs/commonTests/isConformant.tsx

@@ -1,15 +1,19 @@
 import * as _ from 'lodash'
 import * as React from 'react'
-import { mount as enzymeMount, ReactWrapper } from 'enzyme'
+import { ReactWrapper } from 'enzyme'
 import * as ReactDOMServer from 'react-dom/server'
-import { ThemeProvider } from 'react-fela'
 
 import isExportedAtTopLevel from './isExportedAtTopLevel'
-import { assertBodyContains, consoleUtil, syntheticEvent } from 'test/utils'
+import {
+  assertBodyContains,
+  consoleUtil,
+  mountWithProvider as mount,
+  syntheticEvent,
+} from 'test/utils'
 import helpers from './commonHelpers'
 
 import * as stardust from 'src/'
-import { felaRenderer } from 'src/lib'
+
 import { FocusZone } from 'src/lib/accessibility/FocusZone'
 import { FOCUSZONE_WRAP_ATTRIBUTE } from 'src/lib/accessibility/FocusZone/focusUtilities'
 
@@ -20,13 +24,6 @@ export interface Conformant {
   rendersPortal?: boolean
 }
 
-export const mount = (node, options?) => {
-  return enzymeMount(
-    <ThemeProvider theme={{ renderer: felaRenderer }}>{node}</ThemeProvider>,
-    options,
-  )
-}
-
 /**
  * Assert Component conforms to guidelines that are applicable to all components.
  * @param {React.Component|Function} Component A component that should conform.