Skip to content
This repository has been archived by the owner on Jan 16, 2018. It is now read-only.

Commit

Permalink
Add tests for search feature in ClayManagementToolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
Carlos Lancha committed Dec 27, 2017
1 parent 35c0a47 commit 956cbf6
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 0 deletions.
31 changes: 31 additions & 0 deletions packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,24 @@ describe('ClayManagementToolbar', function() {
expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar without search', () => {
managementToolbar = new ClayManagementToolbar({
showSearch: false,
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with search action url', () => {
managementToolbar = new ClayManagementToolbar({
searchActionURL: 'mySearchURL',
spritemap: spritemap,
});

expect(managementToolbar).toMatchSnapshot();
});

it('should render a management toolbar with selection enabled', () => {
managementToolbar = new ClayManagementToolbar({
selectable: true,
Expand Down Expand Up @@ -338,4 +356,17 @@ describe('ClayManagementToolbar', function() {
expect.any(Object)
);
});

it('should render a management toolbar and emit an on search', () => {
managementToolbar = new ClayManagementToolbar({
spritemap: spritemap,
});

const spy = jest.spyOn(managementToolbar, 'emit');

managementToolbar.refs.searchButton.element.click();

expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledWith('search', expect.any(Object));
});
});
87 changes: 87 additions & 0 deletions packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -625,6 +625,66 @@ exports[`ClayManagementToolbar should render a management toolbar with id in act
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with search action url 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
<title>order-arrow</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow"></use>
</svg>
</button>
</li>
</ul>
<div class="navbar-form navbar-form-autofit navbar-overlay navbar-overlay-sm-down">
<div class="container">
<form action="mySearchURL" role="search">
<div class="input-group input-group-inset">
<div class="input-group-input">
<input class="form-control" placeholder="Search for..." ref="search" type="text">
</div>
<span class="input-group-inset-item">
<button class="btn navbar-breakpoint-d-none btn-unstyled" aria-label="times" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<title>times</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#times"></use>
</svg>
</button>
<button class="btn navbar-breakpoint-d-block btn-unstyled" aria-label="search" type="submit">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<title>search</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
</form>
</div>
</div>
<ul class="navbar-nav">
<li class="nav-item navbar-breakpoint-d-none">
<button class="btn nav-link nav-link-monospaced btn-unstyled" aria-label="search" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-search">
<title>search</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#search"></use>
</svg>
</button>
</li>
<li class="nav-item">
<button class="btn nav-btn nav-btn-monospaced btn-primary" aria-label="plus" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
<title>plus</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#plus"></use>
</svg>
</button>
</li>
</ul>
</div>
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar with selection enabled 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
Expand Down Expand Up @@ -821,6 +881,33 @@ exports[`ClayManagementToolbar should render a management toolbar with view type
</nav>
`;

exports[`ClayManagementToolbar should render a management toolbar without search 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn nav-link nav-link-monospaced order-arrow-up-active btn-unstyled" aria-label="order-arrow" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-order-arrow">
<title>order-arrow</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#order-arrow"></use>
</svg>
</button>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<button class="btn nav-btn nav-btn-monospaced btn-primary" aria-label="plus" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-plus">
<title>plus</title>
<use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#plus"></use>
</svg>
</button>
</li>
</ul>
</div>
</nav>
`;

exports[`ClayManagementToolbar should render the default markup 1`] = `
<nav class="management-bar management-bar-light navbar navbar-expand-md">
<div class="container">
Expand Down

0 comments on commit 956cbf6

Please sign in to comment.