feat(examples): Add context examples

Author: alexkrolick

examples/__tests__/react-context.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import {render} from '../../src'
+import {NameContext, NameProvider, NameConsumer} from '../react-context'
+
+/**
+ * Test default values by rendering a context consumer without a
+ * matching provider
+ */
+test('NameConsumer shows default value', () => {
+  const {getByText} = render(<NameConsumer />)
+  expect(getByText('My Name Is:').textContent).toBe('My Name Is: Unknown')
+})
+
+/**
+ * To test a component tree that uses a context consumer but not the provider,
+ * wrap the tree with a matching provider
+ */
+test('NameConsumer shows value from provider', () => {
+  const tree = (
+    <NameContext.Provider value={'C3P0'}>
+      <NameConsumer />
+    </NameContext.Provider>
+  )
+  const {getByText} = render(tree)
+  expect(getByText('My Name Is:').textContent).toBe('My Name Is: C3P0')
+})
+
+/**
+ * To test a component that provides a context value, render a matching
+ * consumer as the child
+ */
+test('NameProvider composes full name from first, last', () => {
+  const tree = (
+    <NameProvider first="Boba" last="Fett">
+      <NameContext.Consumer>
+        {value => <span>Received: {value}</span>}
+      </NameContext.Consumer>
+    </NameProvider>
+  )
+  const {getByText} = render(tree)
+  expect(getByText('Received: ').textContent).toBe('Received: Boba Fett')
+})
+
+/**
+ * A tree containing both a providers and consumer can be rendered normally
+ */
+test('NameProvider/Consumer shows name of character', () => {
+  const tree = (
+    <NameProvider first="Leia" last="Organa">
+      <NameConsumer />
+    </NameProvider>
+  )
+  const {getByText} = render(tree)
+  expect(getByText('My Name Is: ').textContent).toBe('My Name Is: Leia Organa')
+})

examples/jest.config.js

@@ -0,0 +1,6 @@
+const jestConfig = require('kcd-scripts/jest')
+
+module.exports = Object.assign(jestConfig, {
+  testEnvironment: 'jest-environment-jsdom',
+  roots: ['./'],
+})

examples/react-context.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const NameContext = React.createContext('Unknown')
+
+const NameProvider = ({children, first, last}) => {
+  const fullName = `${first} ${last}`
+  return (
+    <NameContext.Provider value={fullName}>{children}</NameContext.Provider>
+  )
+}
+
+const NameConsumer = () => (
+  <NameContext.Consumer>
+    {value => <div>My Name Is: {value}</div>}
+  </NameContext.Consumer>
+)
+
+export {NameContext, NameConsumer, NameProvider}

jest.config.js

@@ -0,0 +1,6 @@
+const jestConfig = require('kcd-scripts/jest')
+
+module.exports = Object.assign(jestConfig, {
+  testEnvironment: 'jest-environment-jsdom',
+  projects: ['./examples', './src'],
+})

package.json

@@ -11,8 +11,9 @@
     "add-contributor": "kcd-scripts contributors add",
     "build": "kcd-scripts build",
     "lint": "kcd-scripts lint",
-    "test": "kcd-scripts test",
-    "test:update": "npm test -- --updateSnapshot --coverage",
+    "test": "kcd-scripts test --projects=src",
+    "test:update": "npm test -- --updateSnapshot --coverage --projects=src",
+    "test:examples": "kcd-scripts test --projects=examples",
     "validate": "kcd-scripts validate",
     "setup": "npm install && npm run validate -s",
     "precommit": "kcd-scripts precommit"