Add tests for support to hide filters done button in ClayManagementTo…

…olbar
deprecate · Dec 27, 2017 · abddb2b · abddb2b
1 parent 6a19f48
commit abddb2b
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 0 deletions.
diff --git a/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js b/packages/clay-management-toolbar/src/__tests__/ClayManagementToolbar.js
@@ -155,6 +155,27 @@ describe('ClayManagementToolbar', function() {
 		expect(managementToolbar).toMatchSnapshot();
 	});
 
+	it('should render a management toolbar with filters dropdown with items and no done button', () => {
+		managementToolbar = new ClayManagementToolbar({
+			filterItems: [
+				{
+					href: '#myItem1',
+					label: 'Item 1',
+					type: 'item',
+				},
+				{
+					href: '#myItem2',
+					label: 'Item 2',
+					type: 'item',
+				},
+			],
+			hideFiltersDoneButton: true,
+			spritemap: spritemap,
+		});
+
+		expect(managementToolbar).toMatchSnapshot();
+	});
+
 	it('should render a management toolbar with view types', () => {
 		managementToolbar = new ClayManagementToolbar({
 			spritemap: spritemap,

diff --git a/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap b/packages/clay-management-toolbar/src/__tests__/__snapshots__/ClayManagementToolbar.js.snap
@@ -254,6 +254,86 @@ exports[`ClayManagementToolbar should render a management toolbar with descendin
 </nav>
 `;
 
+exports[`ClayManagementToolbar should render a management toolbar with filters dropdown with items and no done button 1`] = `
+<nav class="management-bar management-bar-light navbar navbar-expand-md">
+  <div class="container">
+    <ul class="navbar-nav">
+      <li class="dropdown nav-item">
+        <div class="dropdown">
+          <button aria-expanded="false" aria-haspopup="true" aria-label="toggle" class="dropdown-toggle btn nav-link navbar-breakpoint-down-d-none btn-unstyled">Filter and Order
+            <svg aria-hidden="true" class="lexicon-icon lexicon-icon-caret-bottom">
+              <title>caret-bottom</title>
+              <use xlink:href="../node_modules/lexicon-ux/build/images/icons/icons.svg#caret-bottom"></use>
+            </svg>
+          </button>
+          <form>
+            <div class="dropdown-menu">
+              <li>
+                <a class=" dropdown-item" href="#myItem1">Item 1</a>
+              </li>
+              <li>
+                <a class=" dropdown-item" href="#myItem2">Item 2</a>
+              </li>
+            </div>
+          </form>
+        </div>
+      </li>
+      <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 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 filters dropdown with items of type checkbox 1`] = `
 <nav class="management-bar management-bar-light navbar navbar-expand-md">
   <div class="container">