Revert tests

MarkBind · Jan 25, 2021 · a26f606 · a26f606
1 parent 7164878
commit a26f606
Show file tree

Hide file tree

Showing 5 changed files with 324 additions and 28 deletions.
diff --git a/docs/userGuide/syntax/dropdowns.mbdf b/docs/userGuide/syntax/dropdowns.mbdf
@@ -56,6 +56,23 @@
 </variable>
 </include>
 
+**You can also use create multi-level submenu by nesting Dropdowns.**
+
+<include src="codeAndOutput.md" boilerplate >
+<variable name="highlightStyle">html</variable>
+<variable name="code">
+<!-- Can simply nest the dropdown syntax -->
+<dropdown header="*Multi-Level Dropdown*" type="primary">
+  <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+  <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  <dropdown header="*Submenu*">
+    <li><a href="#dropdown" class="dropdown-item">Item</a></li>
+    <li><a href="#dropdown" class="dropdown-item">Another item</a></li>
+  </dropdown>
+</dropdown>
+</variable>
+</include>
+
 ****Options****
 
 Name | Type | Default | Description

diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue
@@ -1,7 +1,11 @@
 <template>
   <li ref="submenu" :class="classes">
-    <slot name=button>
-      <a class="submenu-toggle" role="button" :class="{disabled: disabled}">
+    <slot name="button">
+      <a
+        class="submenu-toggle"
+        role="button"
+        :class="{disabled: disabled}"
+      >
         <slot name="_header">
           <slot name="header"></slot>
         </slot>
@@ -36,12 +40,14 @@ export default {
     return {
       dropright: true,
       dropleft: false,
-    }
+    };
   },
   computed: {
     classes() {
-      return [this.class, this.addClass, 'dropdown-submenu', 
-        { 'dropright': this.dropright, 'dropleft': this.dropleft }];
+      return [
+        this.class, this.addClass, 'dropdown-submenu',
+        { 'dropright': this.dropright, 'dropleft': this.dropleft },
+      ];
     },
     disabledBool() {
       return toBoolean(this.disabled);
@@ -61,7 +67,7 @@ export default {
     },
     showSubmenu() {
       this.show = true;
-      $(this.$refs.submenu).findChildren('ul').each(ul => {
+      $(this.$refs.submenu).findChildren('ul').each((ul) => {
         ul.classList.toggle('show', true);
         if (positionSubmenu.isRightAlign(ul)) {
           this.alignMenuRight();
@@ -78,7 +84,7 @@ export default {
     alignMenuLeft() {
       this.dropright = false;
       this.dropleft = true;
-    }
+    },
   },
   created() {
     this._submenu = true;

diff --git a/packages/vue-components/src/__tests__/Dropdown.spec.js b/packages/vue-components/src/__tests__/Dropdown.spec.js
@@ -0,0 +1,70 @@
+import { mount } from '@vue/test-utils';
+import Dropdown from '../Dropdown.vue';
+import Submenu from '../Submenu.vue';
+
+const DEFAULT_STUBS = {
+  'dropdown': Dropdown,
+  'submenu': Submenu,
+};
+
+const DROPDOWN = `
+<li><a href="#" class="dropdown-item">Dropdown Item 1</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 2</a></li>
+<li><a href="#" class="dropdown-item">Dropdown Item 3</a></li>
+`;
+
+const FIRST_LEVEL_NESTED_DROPDOWN = `
+${DROPDOWN}
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+</dropdown>
+`;
+
+const SECOND_LEVEL_NESTED_DROPDOWN = `
+<dropdown haeder="Submenu Level 1">
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 1</a></li>
+  <li><a href="#" class="dropdown-item">Nested Dropdown Item 2</a></li>
+  <dropdown haeder="Submenu Level 2">
+    <li><a href="#" class="dropdown-item">Nested Submenu Item</a></li>
+  </dropdown>
+</dropdown>
+`;
+
+describe('Dropdown with submenu', () => {
+  test('dropdown', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with one level of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: FIRST_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  test('dropdown with two levels of submenu', async () => {
+    const wrapper = mount(Dropdown, {
+      slots: {
+        header: 'Test Dropdown',
+        default: SECOND_LEVEL_NESTED_DROPDOWN,
+      },
+      stubs: DEFAULT_STUBS,
+    });
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Dropdown.spec.js.snap
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dropdown with submenu dropdown 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 1
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 2
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 3
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown with submenu dropdown with one level of submenu 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 1
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 2
+      </a>
+    </li>
+     
+    <li>
+      <a
+        class="dropdown-item"
+        href="#"
+      >
+        Dropdown Item 3
+      </a>
+    </li>
+     
+    <li
+      class="dropdown-submenu dropright"
+      haeder="Submenu Level 1"
+    >
+      <a
+        class="submenu-toggle"
+        role="button"
+      />
+       
+      <ul
+        class="dropdown-menu"
+      >
+            
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 1
+          </a>
+        </li>
+         
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 2
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Dropdown with submenu dropdown with two levels of submenu 1`] = `
+<div
+  class="btn-group"
+>
+   
+  <button
+    class="btn dropdown-toggle btn-light"
+    type="button"
+  >
+    Test Dropdown
+  </button>
+   
+  <ul
+    class="dropdown-menu"
+  >
+    <li
+      class="dropdown-submenu dropright"
+      haeder="Submenu Level 1"
+    >
+      <a
+        class="submenu-toggle"
+        role="button"
+      />
+       
+      <ul
+        class="dropdown-menu"
+      >
+            
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 1
+          </a>
+        </li>
+         
+        <li>
+          <a
+            class="dropdown-item"
+            href="#"
+          >
+            Nested Dropdown Item 2
+          </a>
+        </li>
+         
+        <li
+          class="dropdown-submenu dropright"
+          haeder="Submenu Level 2"
+        >
+          <a
+            class="submenu-toggle"
+            role="button"
+          />
+           
+          <ul
+            class="dropdown-menu"
+          >
+                
+            <li>
+              <a
+                class="dropdown-item"
+                href="#"
+              >
+                Nested Submenu Item
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+`;