Skip to content

Commit

Permalink
add test
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyledurand
kyledurand committed Jan 8, 2020
1 parent 5dee996 commit 5b51e61
Showing 1 changed file with 189 additions and 154 deletions.
343 changes: 189 additions & 154 deletions src/components/Frame/tests/Frame.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,196 +41,231 @@ describe('<Frame />', () => {
});
});

it('renders a TrapFocus with a `trapping` prop set to true around the navigation on small screens and showMobileNavigation is true', () => {
const navigation = <div />;
const frame = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
{mediaQuery: {isNavigationCollapsed: true}},
).find(Frame);
describe('skipToContentTarget', () => {
it('renders a skip to content link with the proper text', () => {
const skipToContentLinkText = mountWithAppProvider(<Frame />)
.find('a')
.at(0)
.text();

expect(skipToContentLinkText).toStrictEqual('Skip to content');
});

const trapFocus = frame.find(TrapFocus);
it('sets focus to the main content target anchor element when the skip to content link is clicked', () => {
const frame = mountWithAppProvider(<Frame />);
const mainAnchor = frame.find('main').find('a');
trigger(frame.find('a').at(0), 'onClick');
expect(mainAnchor.getDOMNode()).toBe(document.activeElement);
});

expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(true);
});
it('sets focus to target element when the skip to content link is clicked', () => {
const targetId = 'SkipToContentTarget';
const targetRef = React.createRef<HTMLAnchorElement>();

it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on small screens and showMobileNavigation is false', () => {
const navigation = <div />;
const frame = mountWithAppProvider(<Frame navigation={navigation} />, {
mediaQuery: {isNavigationCollapsed: true},
}).find(Frame);
const skipToContentTarget = (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<a id={targetId} ref={targetRef} tabIndex={-1} href="" />
);

const trapFocus = frame.find(TrapFocus);
expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(false);
});
const frame = mountWithAppProvider(
<Frame skipToContentTarget={targetRef}>{skipToContentTarget}</Frame>,
);

it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on large screens even if showMobileNavigation is true', () => {
const navigation = <div />;
const trapFocus = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
).find(TrapFocus);
const triggerAnchor = frame.find('a').at(0);
const targetAnchor = frame.find(`#${targetId}`);
trigger(triggerAnchor, 'onFocus');
trigger(triggerAnchor, 'onClick');

expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(false);
expect(triggerAnchor.getDOMNode().getAttribute('href')).toBe(
`#${targetId}`,
);
expect(targetAnchor.getDOMNode()).toBe(document.activeElement);
});
});

it('renders a CSSTransition around the navigation with `appear` and `exit` set to true on small screen', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
{mediaQuery: {isNavigationCollapsed: true}},
)
.find(TrapFocus)
.find(CSSTransition);

expect(cssTransition.prop('appear')).toBe(true);
expect(cssTransition.prop('exit')).toBe(true);
});
describe('topBar', () => {
it('renders with a top bar data attribute if a topBar is passed', () => {
const topbar = <div />;
const topBar = mountWithAppProvider(<Frame topBar={topbar} />);

expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(1);
});

it('renders a CSSTransition around the navigation with `appear` and `exit` set to false on large screen', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame navigation={navigation} />,
)
.find(TrapFocus)
.find(CSSTransition);
it('does not render with a top bar data attribute if none is passed', () => {
const topBar = mountWithAppProvider(<Frame />);

expect(cssTransition.prop('appear')).toBe(false);
expect(cssTransition.prop('exit')).toBe(false);
expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(0);
});
});

it('renders a CSSTransition around the navigation with an `in` prop set to false if showMobileNavigation is true', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation={false} navigation={navigation} />,
)
.find(Frame)
.find(TrapFocus)
.find(CSSTransition);
describe('navigation', () => {
it('renders a TrapFocus with a `trapping` prop set to true around the navigation on small screens and showMobileNavigation is true', () => {
const navigation = <div />;
const frame = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
{mediaQuery: {isNavigationCollapsed: true}},
).find(Frame);

expect(cssTransition.prop('in')).toBe(false);
});
const trapFocus = frame.find(TrapFocus);

it('renders a CSSTransition around the navigation with an `in` prop set to true if showMobileNavigation is true', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
)
.find(Frame)
.find(TrapFocus)
.find(CSSTransition);
expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(true);
});

expect(cssTransition.prop('in')).toBe(true);
});
it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on small screens and showMobileNavigation is false', () => {
const navigation = <div />;
const frame = mountWithAppProvider(<Frame navigation={navigation} />, {
mediaQuery: {isNavigationCollapsed: true},
}).find(Frame);

it('renders a skip to content link with the proper text', () => {
const skipToContentLinkText = mountWithAppProvider(<Frame />)
.find('a')
.at(0)
.text();
const trapFocus = frame.find(TrapFocus);
expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(false);
});

expect(skipToContentLinkText).toStrictEqual('Skip to content');
});
it('renders a TrapFocus with a `trapping` prop set to false prop around the navigation on large screens even if showMobileNavigation is true', () => {
const navigation = <div />;
const trapFocus = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
).find(TrapFocus);

it('sets focus to the main content target anchor element when the skip to content link is clicked', () => {
const frame = mountWithAppProvider(<Frame />);
const mainAnchor = frame.find('main').find('a');
trigger(frame.find('a').at(0), 'onClick');
expect(mainAnchor.getDOMNode()).toBe(document.activeElement);
});
expect(trapFocus.exists()).toBe(true);
expect(trapFocus.prop('trapping')).toBe(false);
});

it('sets focus to target element when the skip to content link is clicked', () => {
const targetId = 'SkipToContentTarget';
const targetRef = React.createRef<HTMLAnchorElement>();
it('renders a CSSTransition around the navigation with `appear` and `exit` set to true on small screen', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
{mediaQuery: {isNavigationCollapsed: true}},
)
.find(TrapFocus)
.find(CSSTransition);

expect(cssTransition.prop('appear')).toBe(true);
expect(cssTransition.prop('exit')).toBe(true);
});

const skipToContentTarget = (
// eslint-disable-next-line jsx-a11y/anchor-is-valid
<a id={targetId} ref={targetRef} tabIndex={-1} href="" />
);
it('renders a CSSTransition around the navigation with `appear` and `exit` set to false on large screen', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame navigation={navigation} />,
)
.find(TrapFocus)
.find(CSSTransition);

const frame = mountWithAppProvider(
<Frame skipToContentTarget={targetRef}>{skipToContentTarget}</Frame>,
);
expect(cssTransition.prop('appear')).toBe(false);
expect(cssTransition.prop('exit')).toBe(false);
});

const triggerAnchor = frame.find('a').at(0);
const targetAnchor = frame.find(`#${targetId}`);
trigger(triggerAnchor, 'onFocus');
trigger(triggerAnchor, 'onClick');
it('renders a CSSTransition around the navigation with an `in` prop set to false if showMobileNavigation is true', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation={false} navigation={navigation} />,
)
.find(Frame)
.find(TrapFocus)
.find(CSSTransition);

expect(triggerAnchor.getDOMNode().getAttribute('href')).toBe(
`#${targetId}`,
);
expect(targetAnchor.getDOMNode()).toBe(document.activeElement);
});
expect(cssTransition.prop('in')).toBe(false);
});

it('renders with a has nav data attribute when nav is passed', () => {
const navigation = <div />;
const frame = mountWithAppProvider(<Frame navigation={navigation} />);
expect(frame.find('[data-has-navigation]')).toHaveLength(1);
});
it('renders a CSSTransition around the navigation with an `in` prop set to true if showMobileNavigation is true', () => {
const navigation = <div />;
const cssTransition = mountWithAppProvider(
<Frame showMobileNavigation navigation={navigation} />,
)
.find(Frame)
.find(TrapFocus)
.find(CSSTransition);

it('does not render with a has nav data attribute when nav is not passed', () => {
const frame = mountWithAppProvider(<Frame />);
expect(frame.find('[data-has-navigation]')).toHaveLength(0);
});
expect(cssTransition.prop('in')).toBe(true);
});

it('renders with a top bar data attribute if a topBar is passed', () => {
const topbar = <div />;
const topBar = mountWithAppProvider(<Frame topBar={topbar} />);
it('renders with a has nav data attribute when nav is passed', () => {
const navigation = <div />;
const frame = mountWithAppProvider(<Frame navigation={navigation} />);
expect(frame.find('[data-has-navigation]')).toHaveLength(1);
});

expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(1);
});
it('does not render with a has nav data attribute when nav is not passed', () => {
const frame = mountWithAppProvider(<Frame />);
expect(frame.find('[data-has-navigation]')).toHaveLength(0);
});

it('does not render with a top bar data attribute if none is passed', () => {
const topBar = mountWithAppProvider(<Frame />);
it('does not call onNavigationDismiss when escape is pressed and screen size is large', () => {
const spy = jest.fn();
const frame = mountWithAppProvider(
<Frame navigation={<div />} onNavigationDismiss={spy} />,
);
trigger(frame.find('div').at(3), 'onKeyDown', {key: 'Escape'});
expect(frame.prop('onNavigationDismiss')).not.toHaveBeenCalled();
});

expect(topBar.find('[data-polaris-top-bar]')).toHaveLength(0);
it('calls onNavigationDismiss when escape is pressed and screen size is small', () => {
const spy = jest.fn();
const frame = mountWithAppProvider(
<Frame
navigation={<div />}
showMobileNavigation
onNavigationDismiss={spy}
/>,
{mediaQuery: {isNavigationCollapsed: true}},
);
trigger(frame.find('div').at(3), 'onKeyDown', {key: 'Escape'});
expect(frame.prop('onNavigationDismiss')).toHaveBeenCalledTimes(1);
});
});

// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height if passed', () => {
mountWithAppProvider(<Frame globalRibbon={<div />} />);
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
});
describe('globalRibbon', () => {
// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height if passed', () => {
mountWithAppProvider(<Frame globalRibbon={<div />} />);
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
});

// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height if new props are passed', () => {
const frame = mountWithAppProvider(<Frame />);
frame.setProps({globalRibbon: <div />});
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
});
// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height if new props are passed', () => {
const frame = mountWithAppProvider(<Frame />);
frame.setProps({globalRibbon: <div />});
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
});

// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height of 0 if there is no globalRibbon prop', () => {
mountWithAppProvider(<Frame />);
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
// JSDOM 11.12.0 does not support setting/reading custom properties so we are
// unable to assert that we set a custom property
// See https://github.com/jsdom/jsdom/issues/1895
// eslint-disable-next-line jest/no-disabled-tests
it.skip('sets a root property with global ribbon height of 0 if there is no globalRibbon prop', () => {
mountWithAppProvider(<Frame />);
expect(documentHasStyle('--global-ribbon-height', '0px')).toBe(true);
});
});

it('renders a Frame ContextualSavebar if Polaris ContextualSavebar is rendered', () => {
const frame = mountWithAppProvider(
<Frame>
<PolarisContextualSavebar />
</Frame>,
);
expect(frame.find(FrameContextualSavebar).exists()).toBe(true);
describe('ContextualSavebar', () => {
it('renders a Frame ContextualSavebar if Polaris ContextualSavebar is rendered', () => {
const frame = mountWithAppProvider(
<Frame>
<PolarisContextualSavebar />
</Frame>,
);
expect(frame.find(FrameContextualSavebar).exists()).toBe(true);
});
});

it('renders a Frame Loading if Polaris Loading is rendered', () => {
const frame = mountWithAppProvider(
<Frame>
<PolarisLoading />
</Frame>,
);
expect(frame.find(FrameLoading).exists()).toBe(true);
describe('loading', () => {
it('renders a Frame Loading if Polaris Loading is rendered', () => {
const frame = mountWithAppProvider(
<Frame>
<PolarisLoading />
</Frame>,
);
expect(frame.find(FrameLoading).exists()).toBe(true);
});
});
});

0 comments on commit 5b51e61

Please sign in to comment.