fabric-docs Documentation

Transcription

1 fabric-docs Documentation Release Brian Garland Mar 19, 2018

2

3 Getting Started: 1 Configuring Your Environment Verify your environment works Create a Simple App Prerequisites Step 1: Create react app Step 2: Install office-ui-fabric-react package Step 3: Add DocumentCardBasic component Step 4: Preview document card Next steps The Fabric Component Focus rectangle notes Using Icons Alternative CDN options What does initializeicons do? Disabling generated warnings Using componentref Instead of ref Consuming a component s public API In Fabric, extend BaseComponent to abstract resolving the componentref Styling Component anatomy Moving styles from scss to ts Footnotes Testing Running tests Running tests in watch mode Debugging Writing tests Test Utilities & Helpers FAQ i

4 ii

5 CHAPTER 1 Configuring Your Environment To get started, we highly recommend having the following tools installed: Visual Studio Code Node.js (NOTE: please install the LTS version as we can t validate current will always work) git 1.1 Verify your environment works Open a command line and run these: Run node -v to check your node version! It should probably be 6.x.x. Run npm -v to check your npm version. If your version is below 5.x.x, run npm install -g npm to update it. Go to a folder and run code. to open VSCode in a folder. If you don t have VSCode in your path, you can open VSCode and press f1, type path, and select the Install 'code' command in PATH option. Run git --version to make sure you have git. 1

6 2 Chapter 1. Configuring Your Environment

7 CHAPTER 2 Create a Simple App In this tutorial, let s build a simple React app with an Office UI Fabric React DocumentCard. 2.1 Prerequisites Node.js and npm Install Node.js and npm if you haven t already installed in your machine. It is recommended you at least install node version 4.x.x and npm version 3.x.x. You can check your node and npm version by running node -v and npm -v respectively create-react-app package We will use Create React App to quickly create a React app for this tutorial. Once node and npm is installed, type the following command in a console to install the create-react-app npm package. npm install -g create-react-app Visual Studio Code Download and install Visual Studio Code. We will use Visual Studio Code as our code editor for this tutorial. Feel free to use your favorite code editor of choice if you do not want to use Visual Studio Code. 3

8 2.2 Step 1: Create react app In a console, type the following command to create a simple React app. create-react-app documentcardbasic-demo This will install the required depedencies and scaffold a simple React app. Once its complete, navigate to the documentcardbasic-demo folder. cd documentcardbasic-demo Type the following command to launch the React app in your browser. npm start 4 Chapter 2. Create a Simple App

9 2.3 Step 2: Install office-ui-fabric-react package To use Fabric React in your project, you will need to first install the office-ui-fabric-react npm package. Type the following in the console to install the package: npm install office-ui-fabric-react --save If you have npm start command still running, terminate the command by pressing Ctrl+C. 2.4 Step 3: Add DocumentCardBasic component Open the documentcardbasic-demo project folder in Visual Studio Code. Open the file src\app.js and replace the existing code inside render method to only return the DocumentCard component: <DocumentCard onclickhref=' <DocumentCardPreview previewimages={ [ 2.3. Step 2: Install office-ui-fabric-react package 5

10 { previewimagesrc: require('./documentpreview.png'), iconsrc: require('./iconppt.png'), width: 318, height: 196, accentcolor: '#ce4b1f' ] /> <DocumentCardTitle title='revenue stream proposal fiscal year 2016 version02.pptx'/> <DocumentCardActivity activity='created Feb 23, 2016' people={ [ { name: 'Kat Larrson', profileimagesrc: require('./avatarkat.png') ] /> </DocumentCard> DocumentCard component contains the DocumentCardPreview, DocumentCardTitle and DocumentCardActivity components that help you describe the document card. Since office-ui-fabric-react is a npm module, we will need to import the document card component in the App component. Add the following import statement at the top of the src\app.js file just below import './App.css': import { DocumentCard, DocumentCardPreview, DocumentCardTitle, DocumentCardActivity from 'office-ui-fabric-react/lib/documentcard'; Notice how we import only the specific component module from lib folder instead of importing the entire office-ui-fabric-react module. Save the src\app.js file. Below is an example of how you can similarly import other components: import { DefaultButton, PrimaryButton from 'office-ui-fabric-react/lib/button'; Open index.html file. Fabric React components provide support for Left-to-Right (LTR) and Right-to-Left (RTL) rendering out of the box. You can specify the default direction in your index.html. Add the dir attribute with the value ltr to the <html> element: <html lang="en" dir="ltr"> Load Office UI Fabric styles by linking to the Office UI Fabric CDN. Add the following to the <head> element: <link rel="stylesheet" href=" ui-fabric-core/9.0.0/css/fabric.min.css"> Save the file. 6 Chapter 2. Create a Simple App

11 Copy the following images from GitHub to src folder. avatarkat.png iconppt.png documentpreview.png 2.5 Step 4: Preview document card Switch to the console and type the following to preview your app in the browser: npm start You should see the document card component in your app. 2.6 Next steps Congratulations! You have successfully built a simple React app with an Office UI Fabric React DocumentCard. As next steps, try using other components like DetailsLists, Callout etc., 2.5. Step 4: Preview document card 7

12 8 Chapter 2. Create a Simple App

13 CHAPTER 3 The Fabric Component Consumers using Fabric components should be wrapping their content within the Fabric component. import { Fabric from 'office-ui-fabric-react/lib/fabric'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; ReactDOM.render( <Fabric> <App/> </Fabric>, element); Note: The Fabric component will render a div, and will mix in div properties. You may use it as a replacement for a root div. The Fabric component is a root wrapper component which solves 2 problems: 1. The default fontfamily css style is defined at this layer, allowing components within to inherit the default fontfamily. The class ms-fabric defines this. 2. The focus rectangle visibility is managed through the is-focusvisible css class. 3.1 Focus rectangle notes Focus rectangles around components should only be shown when the user presses tab or directional keys. When they press mouse buttons, focus rectangles should not be shown. The Fabric component that will conditionally add/remove an is-focusvisible class, and components rendering focus rectangles should conditionalize their visibility based on the.ms-fabric.is-focusvisible parent selector. This is abstracted in the scss include focus-border(). 9

14 10 Chapter 3. The Fabric Component

15 CHAPTER 4 Using Icons By default, the Fabric icons are not added to your bundle, in order to save bytes for scenarios where you don t care about icons, or you only care about a subset. To make them available, you may initialize them as such: import { initializeicons from 'office-ui-fabric-react/lib/icons'; initializeicons(/* optional base url */); 4.1 Alternative CDN options By default, the icon font will be pulled from the SharePoint CDN. If you would like the icons to be served from your cdn, simply copy the files from the package s fonts folder to your cdn, and in initializeicons, provide the base url to access those fonts (Note that it will require a trailing slash.) 4.2 What does initializeicons do? It registers a map of icon names, which define how to render icons. Icons can be rendered either through JSX components, or as a font character. The icon code will register the font-face definition only when a given icon from a subset is referenced. What we re trying to optimize here is download size. We define a map of icon codes which map to a font-face. When the Icon component renders the Upload icon, we determine if the font-face has yet been registered, an if not, we add it to the page, causing the subset containing the Upload icon to be downloaded. packages can resolve over 1000 different icons, and will download from the 10+ font partitions, minimizing download overhead. We also include the most common icons in the first partition, optimizing for the basic scenarios. If there are commonly used icons missing in there, please file an issue so that we can evaluate adjusting the primary partition. 11

16 4.3 Disabling generated warnings When icons are rendered using the Icon component, but have not yet been registered, you will see console errors indicating so. In most cases, this can be addressed by registering the icons. But there are 2 cases, where this isn t desirable: Test scenarios In test scenarios, you may want to simply disable the warnings and avoid registering icons. To do this: import { seticonoptions from 'office-ui-fabric-react/lib/styling'; // Suppress icon warnings. seticonoptions({ disablewarnings: true ); Library icon registration If your code is running in an environment where icons may have already been registered, you may need to disable the warnings. (By default, registering the same icon twice will ignore subsequent registrations.) To initialize icons and avoid duplication warnings, pass options into initializeicons: import { initializeicons from '@uifabric/icons'; initializeicons(undefined, { disablewarnings: true ); 12 Chapter 4. Using Icons

17 CHAPTER 5 Using componentref Instead of ref React exposes a special ref prop for components. If you use ref on an intrinsic elements such as divs or spans, React will give you a reference to the element, allowing you access to the public API for the elements. Using ref to access component public methods is more error prone: 1. If the component wraps itself in a higher order component or decorator, the ref will return the wrapper component rather than what you intended to access. 2. Accessing the full component s public methods is probably not desirable. It isn t exactly intended to access public render or to allow the consumer to call componentwillunmount, despite these being publicly exposed to React. 5.1 Consuming a component s public API There ARE limited cases where a component should expose a public API contract. Usually, things can be more declarative in React, but some scenarios which are perhaps easier to do imperatively are: 1. Exposing a focus method. 2. Accessing current values of uncontrolled prop values (such as the current value of a TextField.) In Fabric, we do the following for components which expose an imperative API surface: 1. Define an I{ComponentName interface which only exposes the methods intended to be supported. 2. Every component supports a componentref prop, which will return the I{ComponentName interface if provided. So, use componentref as a drop-in replacement for ref. Example usage of componentref to access the IButton interface: private _primarybutton: IButton = React.createRef<IButton>(); public render() { return <PrimaryButton componentref={ this._primarybutton... />; 13

18 public componentdidmount() { this._primarybutton.value.focus(); 5.2 In Fabric, extend BaseComponent to abstract resolving the componentref If your component extends BaseComponent, the componentref will be auto-resolved for you and you just need to focus on exposing it in the prop typings. If you were to write a component which extended vanilla React.Component, you would need to resolve it manually. For example, on mount: public componentdidmount() { const { componentref = this.props; componentref && componentref(this);...and clear it on unmount: public componentwillunmount() { const { componentref = this.props; componentref && componentref(undefined); 14 Chapter 5. Using componentref Instead of ref

19 CHAPTER 6 Styling When a consumer uses a component, providing style overrides for the component should not be a fragile guessing game. We should be able to easily tweak component styling and also create variants for subcomponents without a lot of complex effort that s bound to break later on. A component consists of dom elements, or "areas". Each of the areas should be targetable for styling. The styling applied to each area may depend on the state of the component as well as the contextual theme settings. So, styling should be defined as a function of these inputs: // Take in styling input, spit out styles for each area. function getstyles(props: IComponentStyleProps): IComponentStyles { return { root: { /* styles */, child1: { /* styles */, child2: { /* styles */ ; With this in mind, let s make getstyles an optional prop to the component. Now style overrides can be applied in a functional way and even be conditionalized depending on the component state: const getstyles = props => ({ root: [ { background: props.theme.palette.themeprimary, selectors: { ':hover': { background: props.theme.palette.themesecondary,, props.isexpanded? { display: 'block' : { display: 'none' ] ); 15

20 <MyComponent getstyles={ mystyleoverrides /> Quite often, variants of a component which use the style must be created to abstract some customizations. A styled HOC is provided which can make creating variants simple: import { styled from 'office-ui-fabric-react/lib/styling'; import { getstyles from './MyComponentVariant.styles'; const MyComponentVariant = styled( MyComponent, getstyles ) ); Within the component implementation, when we need to convert these styles into class names, we will use a helper called classnamefunction to create a memoized function which can translate the style objects into strings: const getclassnames = classnamefunction<icompstyleprops, ICompStyles>(); class Comp extends React.Component { public render() { const { getstyles, theme = this.props; const classnames = getclassnames(getstyles, { /* style props */ ); return ( <div classname={ classnames.root >...</div> ); 6.1 Component anatomy A component should consist of these files: ComponentName.props.ts - The interfaces for the component. We separate these out for documentation reasons. ComponentName.base.tsx - The unstyled component. This renders DOM structure and conrtains logic, MINUS styling opinions. ComponentName.styles.ts - Exports a getstyles function for the component which takes in IComponentNameStyleProps and returns IComponentNameStyles. Once these are defined, you can export the component which ties it all together: ComponentName.tsx - Using the styled helper, exports a new component tying the base component to 1 or more style helpers. Additionally, each component should have these: ComponentName.checklist.ts - A checklist status export which allows the documentation to render notes on what validation has been done on the component. ComponentName.test.tsx - Unit tests for the component. The idea is that components, especially reusable atomic components, should by default be exported unstyled. This gives us the flexibility to create variants. 16 Chapter 6. Styling

21 6.1.1 ComponentName.props.ts changes The props file should contain these 4 interfaces, in addition to any enums or consts externally required: 1. IComponentName - The public method accessible through componentref. This should include the focus method, as well as getters for important values like checked in the case the component will be referenced and the value may be read manually. Example: export IComponentName { focus: () => void; 1. IComponentNameProps - The props for the component. This should include the componentref prop for accessing the public interface, the theme prop (which will be injected by decorator), as well as the getstyles function. Example: export IComponentNameProps extends React.Props<ComponentNameBase> { componentref?: (componentref: IComponentName) => void; theme?: ITheme; getstyles?: IStyleFunction<IComponentNameStyleProps, IComponentNameStyles>; 1. IComponentNameStyleProps - The props needed to construct styles. This represents the simplified set of immutable things which control the class names. Note that things which were optional may be set to be required here, to simplify the style definitions: export interface IComponentNameStyleProps { theme: ITheme; disabled: boolean; checked: boolean; 1. IComponentNameStyles The styles which apply to each area of the component. Each area should be listed here required, as an IStyle, with root always representing the root element of the component: export interface IComponentNameStyles { root: IStyle; child1: IStyle; // etc. In the style interface, always refer to the root element using the name root, for predictability in styling ComponentName.base.tsx contents 1. The component shoud be named {ComponentNameBase. 2. It should be decorated with the customizable decorator using {ComponentNameBase as the target name. 3. It should use the classnamefunction helper to create a classname generation function Component anatomy 17

22 Example: import { IComponentNameProps from ='./ComponentName.props'; const getclassnames = classnamefunction<icomponentnamestyleprops, IComponentNameStyles>(); export class ComponentName extends React.Component<...> { public render() { const { getstyles, theme = this.props; const classnames = getclassnames(getstyles, { theme: theme! ); return ( <div classname={ classnames.root >Hello</div>; ); ComponentName.styles.ts The styles file should export the getstyles function which takes in IComponentNameStyleProps and returns IComponentNameStyles (the default styling for the component.) Note that the root element for styles should al export function getstyles(props: IComponentNameStyleProps): IComponentNameStyles { return { root: {, child: {, etc. ; Component.tsx Tying the component to the style is made easy using the styled HOC wrapper, whch as input takes the base component and an object of 1 or more style function props. import { styled from 'office-ui-fabric-react/lb/styling'; import { CompoenentNameBase from './ComponentName.base'; import { getstyles from './ComponentName.styles'; // Create a Breadcrumb variant which uses these default styles. export const ComponentName = styled( ComponentNameBase, { getstyles ); Support for customizable sub-component styling The component may also intend to provide customized styling for nested components. For example, a Breadcrumb component may want to render Crumb components, which may take in their own styles. 18 Chapter 6. Styling

23 The recommended approach is to avoid exposing the individual Crumb props at the Breadcrumb layer. Instead, expose a way to provide an alternative component for the Crumb using the as prop convention. This lets the caller create their own Crumb variant and use it within the Breadcrumb. It also opens up other scenarios such as providing additional default props on the sub-component, or replacing it completely. In the Breadcrumb case, we would expose an optional crumbas prop. This would allow the consumer to make a Breadcrumb variant which renders red Crumb components: const RedCrumb = styled(crumb, props => ({ root: background: 'red' )); render() { return <Breadcrumb crumbas={ RedCrumb... /> Additionally this "breadcrumb with red crumbs" scenario could be abstracted as its own component, by passing in the 3rd optional param to styled, which lets the caller provide new default prop values: const RedBreadcrumb = styled(breadcrumb, undefined, { crumbas: RedCrumb ); render() { return <RedBreadcrumb... /> ComponentName.test.tsx The test file should include: 1. A snapshot test locking the component DOM structure down for the important states. 2. Tests which simulate clicking on things, changing the state of the compoent, and validating things still work. 6.2 Moving styles from scss to ts Basic conversion just means copying styles from scss into ts, making prop names camelcased instead of kebab-cased, and stringifying everything except for pixel values. In addition, all static classnames embedded within the tsx file inside of the css helper function calls can now move into the styles file. Styles in scss:.list { white-space: nowrap; padding: 0; margin: 0; display: flex; align-items: stretch; Converted to ts: list: [ 'ms-breadcrumb-list', { whitespace: 'nowrap', padding: 0, margin: 0, 6.2. Moving styles from scss to ts 19

24 ], display: 'flex', alignitems: 'stretch' Some scss special cases: Mixins and Includes Sass mixins are simply an informal way of using functions. Translating them into actual javascript, where you can reuse and import/export them, is really easy. If you find some fabric-core mixins are missing, consider adding them to package if they are highly reusable. However keep in mind that the PLT1 bundle size WILL be affected, so do this sparingly only for very common things font-size-x Variables Use typesafe enums instead of the sass variables: import { FontSizes from 'office-ui-fabric-react/lib/styling'; fontsize: FontSizes.small Focus Rectangles The styling package has a helper to provide consistent focus rectangles. 6.3 Footnotes Motivations for Moving Away from SCSS SCSS a build time process of expanding a high level css-like language into raw css. Our pipeline to load the raw css goes through a javascript conversion process and gets loaded on the page via a javascript library called load-themed-styles. Effectively, we have a complex build process which takes rules, converts them into JavaScript, and loads them dynamically. This process is complicated and adds a number of limitations We Can t Register Classes Dynamically Scenarios like "make this area of the screen use a different theme" become really complicated if build time is the only time for evaluations. 20 Chapter 6. Styling

25 6.3.3 Bundle size and css loading heft with scss If a button has 20 different possible states, using scss you must load the css for all 20 of the states pre-emptively, so you end up loading way more rules than you will ever actually use. There is no "plt1 styles vs delay loaded styles". The best you can do is to partition your css to specific modules, and delay load the modules. But in this model, you will still preempt loading a lot of rules that aren t used. Sass also encourages "mixins" as a way to have one definition of styles that can be used in multiple places. This completely fights against bundle size, since mixins simply stamp duplicates copies of the same rules whereever they re used, resulting in bloated (but highly compressable) style definitions. The compression helps but all of this could be avoided by using a different approach to defining our styling Constant battle with specificity Perhaps the most difficult thing to resolve is css specificity. Countless hacks have been implemented to "slightly tweak" styling of a thing in a particular context. If your rule is equally specific as an existing rule, you have a race condition; last one to register wins, resulting in hacks that only work sometimes. And even if your rule is more specific than an existing rule, there are no gates that can catch an existing rule being changed to be more specific later, resulting in breaking the workarounds. We want a system which allows users to pass in their overrides, which can create new permutations of classes which are only 1 level of specificity deep, providing a consistent safe way to override the defaults Footnotes 21

26 22 Chapter 6. Styling

27 CHAPTER 7 Testing Our tests are built using Jest. This allows us to run tests in a node environment, and simulates the browser using jsdom. For snapshot testing, we use react-test-renderer and Jest apis. For creating React functional tests, we use Enzyme to automate rendering. This gives us helpers for mounting a component, accessing elements rendered by it, and simulating clicks and keypresses. Visual regression testing uses Storybook to document various UI states of components. 7.1 Running tests In command prompt navigate to the appropriate package, for example packages/office-ui-fabric-react To just validate everything works, run npm run build, which will build the project including running tslint and jest for tests. If you only want to run jest, you can also run only the jest task by running npm run build jest. 7.2 Running tests in watch mode When you are developing tests, use the watch mode to run the tests as you write them! 1. Go to the package folder where you want to run the tests. 2. Type npm run start-test. 3. Edit and saving tests should now cause the console to re-run the tests you have added/modified. 23

28 7.3 Debugging To debug tests, you can use Visual Studio Code. Inside of a *.test.ts file, add a debugger statement where you want to break, and hit F5 to start debugging. Note: Because of limitations with the current Node LTS version, breakpoints in VSCode will not hit until you re actively in the debugger using debugger statement. The latest Node version however has fixes that will enable breakpoints to resolve, so this workaround is temporary. 7.4 Writing tests Simple unit testing Tests in Jest are written similar to mocha tests, though Jest includes a number of assertions that work similar to chai. A basic test example: describe('thing', () => { it('does something', () => { expect(thing.something()).toequal(avalue); ); ); Note that you do not need to import the assertions or the Jest APIs; they should be available automatically through the included typings Snapshot testing Jest enables you to create snapshot tests. Snapshots simply compare a JSON object with an expected output. The assertion tomatchsnapshot api will abstract loading a.snap file for the test to compare, or will create one if none exists. import * as React from 'react'; import { CommandBar from './CommandBar'; import * as renderer from 'react-test-renderer'; describe('commandbar', () => { it('renders commands correctly', () => { expect(renderer.create( <CommandBar items={ [ { key: '1', name: 'name 1', { key: '2', name: 'name 2' ] /> ).tojson()).tomatchsnapshot(); ); ); If you ever break a snapshot, you can update all baselines either manually, or using the npm run update-snapshots command within a given package folder. Currently the office-ui-fabric-react and experiments packages both have snapshot testing enabled. 24 Chapter 7. Testing

29 7.4.3 Functional testing In cases where you need to automate a component and validate it performs correctly, you can use Enzyme apis to mount components, evaluate dom structure, and simulate events. it('opens a menu with IContextualMenuItem.subMenuProps.items property', () => { const commandbar = mount<commandbar>( <CommandBar items={ [ { name: 'TestText 1', key: 'TestKey1', classname: 'MenuItem', submenuprops: { items: [ { name: 'SubmenuText 1', key: 'SubmenuKey1', classname: 'SubMenuClass' ], ] /> ); const menuitem = commandbar.find('.menuitem button'); expect(menuitem.length).toequal(1); menuitem.simulate('click'); expect(document.queryselector('.submenuclass')).tobedefined(); ); Visual regression testing Storybook is a dev environment for UI components. We write stories to capture different states of components. With every pull request, the stories are rendered by Screener to check for any visual changes. Screener posts a status to Github PRs where you can view the visual test report. If changes are found, the status will fail on Github until the regressions are fixed or an admin approves the changes. Stories are found at./apps/vr-tests/src/stories. Most stories are written with a FabricDecorator that wraps the components with consistent padding. Screener steps are added to crop to a specific CSS class (most stories should crop to the.testwrapper class of the FabricDecorator) and to simulate different events, such as hover and click. import * as React from 'react'; import Screener, { Steps from 'screener-storybook/src/screener'; import { storiesof from '@storybook/react'; import { FabricDecorator from '../utilities'; import { Link, ILinkProps from 'office-ui-fabric-react'; storiesof('link', module).adddecorator(fabricdecorator).adddecorator(story => ( <Screener steps={ new Steps() 7.4. Writing tests 25

30 .snapshot('default', { cropto: '.testwrapper' ).hover('.ms-link').snapshot('hover', { cropto: '.testwrapper' ).click('.ms-link').hover('.ms-link') // Always add a 'hover' step after 'click'.snapshot('click', { cropto: '.testwrapper' ).end() // Every set of Screener steps should finish with 'end()' > { story() </Screener> )).add('root', () => (<Link href='#'>i'm a link</link>)).add('disabled', () => (<Link href='#' disabled>i'm a disabled link</link>)).add('no Href', () => (<Link>I'm rendered as a button because I have no href</link> )); Certain components may be written with a custom decorator/wrapper, and you may crop to a different CSS class or omit the cropto option altogether. Components that render outside its container, require specific styles on its parent, or render on a different layer, such as Callout, are cases where you would customize the decorators. storiesof('slider', module).adddecorator(story => ( // Vertical slider requires its parent to have a height specified <div style={ { width: '300px', height: '200px', display: 'flex' > { story() // Render story (component) inside this container </div> )).adddecorator(fabricdecorator).adddecorator(story => ( <Screener steps={ new Screener.Steps().snapshot('default', { cropto: '.testwrapper' ).hover('.ms-slider-line').snapshot('hover', { cropto: '.testwrapper' ).end() > { story() </Screener> )).add('vertical', () => ( <Slider label='basic example:' min={ 1 max={ 3 step={ 1 defaultvalue={ 2 showvalue={ true vertical={ true /> )); 26 Chapter 7. Testing

31 7.5 Test Utilities & Helpers shallowuntiltarget Function Enzyme has a method called Shallow Rendering that allows you to constrain yourself to testing a component as a unit, and to ensure that your tests aren t indirectly asserting on behavior of child components. If you would like to know more about Shallow Rendering in general then you can view the main Enzyme documentation here. The shallowuntiltarget() function is a work around due to a conflict with decorated components, and considering at the time of writing this we are planning to use decorater on all Fabric components it is likely that the built into Enzyme shallow() function will not yield the correct results because it s being applied to the customized component. it('renders the result of onrenderdata', () => { const initialdata = { content: 5 ; const rendereddataid = 'onrenderdataid'; const onrenderdata = (data: any) => <div id={ rendereddataid > Rendered data: { data.content </div >; const wrapper = shallow<iresizegroupprops, IResizeGroupState>( <ResizeGroup data={ initialdata onreducedata={ onreducescalingdata onrenderdata={ onrenderdata /> ); expect(wrapper.containsmatchingelement(onrenderdata(initialdata))).toequal(true); ); For example above you expect shallow to return a ShallowWrapper of ResizeGroup but actually it will return a ShallowWrapper of ComponentWithInjectedProps - the customized component returned from decorator function. ResizeGroup is a child of the customized component. shallowuntiltarget() will allow you so specify which component you want to target for your test using a string - in this case we want ResizeGroupBase because the same effect happens to components using the styled function. We just need to import the function from the common folder. import { shallowuntiltarget from '../../common/shallowuntiltarget'; Usage is exactly the same as shallow with an added argument containing a string name of target component. it('renders the result of onrenderdata', () => { const initialdata = { content: 5 ; const rendereddataid = 'onrenderdataid'; const onrenderdata = (data: any) => <div id={ rendereddataid > Rendered data: { data.content </div >; const wrapper = shallowuntiltarget<iresizegroupprops, IResizeGroupState>( <ResizeGroup data={ initialdata onreducedata={ onreducescalingdata onrenderdata={ onrenderdata />, 'ResizeGroupBase'); 7.5. Test Utilities & Helpers 27

32 expect(wrapper.containsmatchingelement(onrenderdata(initialdata))).toequal(true); ); 7.6 FAQ Q. Browser methods aren t working. A. Using browser methods like getboundingclientrect won t work when using enzyme to render a document fragment. It s possible to mock this method out if you need, see the FocusZone unit tests as an example. Q. My event isn t being triggered. A. Make sure to use Enzyme simulate api to simulate React events. For example: menuitem. simulate('click'); 28 Chapter 7. Testing