Skip to content

feat(testing): add renderWithTheme #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 4, 2018
Merged

feat(testing): add renderWithTheme #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
713ddf6
feat(testing): add renderWithTheme
ssidorchik Oct 2, 2018
a53e9cc
Pass childContextTypes option into render
ssidorchik Oct 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/testing/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@
*/

export { default as mountWithTheme } from './utils/mountWithTheme.js';
export { default as renderWithTheme } from './utils/renderWithTheme.js';
Copy link
Contributor

@ryanseddon ryanseddon Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this any different to the above mountWithTheme?

Copy link
Contributor

@austingreendev austingreendev Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a little lost as well. The only difference I can see is that mountWithTheme is passing the childContext types through the context with { context, childContextTypes: StyledThemeProvider.childContextTypes },

Without that you are probably seeing some Styled-Components console.warns in the console?

Copy link
Contributor Author

@ssidorchik ssidorchik Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ryanseddon the only difference from the mountWithTheme is that it calls render instead of mount for the passed component. And this is the main purpose of this helper.

@Austin94 good catch! Added childContextTypes to the options.

Copy link
Contributor

@austingreendev austingreendev Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What use-case would this have for testing? The react-testing packages are mostly around utilities for enzyme & jest testing.

Copy link
Contributor Author

@ssidorchik ssidorchik Oct 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is exactly for snapshots testing with enzyme. Useful when a component composites smaller none exportable components and mounting to DOM is not needed. shallow doesn't render subcomponents and render is doing this down to html elements.

Copy link
Contributor

@ryanseddon ryanseddon Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the clarification @ssidorchik. Is this change intended to clean up some of our tests or are you depending on this in your own codebase for testing?

Copy link
Contributor Author

@ssidorchik ssidorchik Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already using the enzyme's render on a separate project. And would like to add the theme support.

export { default as shallowWithTheme } from './utils/shallowWithTheme.js';
21 changes: 21 additions & 0 deletions packages/testing/src/utils/renderWithTheme.example.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
Signature:

- `renderWithTheme(reactNode, { rtl: boolean, theme: object, enzymeOptions: object })`

```jsx static
import { Tabs, TabPanel } from '@zendeskgarden/react-tabs';
import { renderWithTheme } from '@zendeskgarden/react-testing';

const TabsExample = (
<Tabs>
<TabPanel label="Tab 1" key="tab-1">
Tab 1 content
</TabPanel>
<TabPanel label="Tab 2" key="tab-2">
Tab 2 content
</TabPanel>
</Tabs>
);

const RtlTabs = renderWithTheme(TabsExample, { rtl: true });
```
31 changes: 31 additions & 0 deletions packages/testing/src/utils/renderWithTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/

import React from 'react';
import { mount, render } from 'enzyme';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';
import { ThemeProvider } from '@zendeskgarden/react-theming';

/**
* Render a component with provided RTL and Theme
* @param {EnzymeWrapper} tree
* @param {Object} ThemeProperties { rtl: boolean, theme: object, enzymeOptions: object }
*/
const renderWithTheme = (tree, { rtl, theme, enzymeOptions } = {}) => {
const context = mount(<ThemeProvider theme={theme} rtl={rtl} />)
.childAt(0)
.instance()
.getChildContext();

return render(
tree,
{ context, childContextTypes: StyledThemeProvider.childContextTypes },
enzymeOptions
);
};

export default renderWithTheme;