fix(Dropdown): Propagate class to the menu dom element. Thanks to @of…

…firgolan

* fix(bs-dropdown/menu): Propogate classnames to the menu dom element

* Convert classNames to a string

* fix(bs-dropdown): Support for `class` instead of `classNames`

* test: Consolidate to a single test case

addon/components/base/bs-dropdown/menu.js

@@ -76,15 +76,19 @@ export default Component.extend({
    * @private
    */
   _renderInPlace: computed('renderInPlace', function() {
-    return this.get('renderInPlace') || typeof document === 'undefined' || !document.getElementById('ember-bootstrap-wormhole');
+    return (
+      this.get('renderInPlace') ||
+      typeof document === 'undefined' ||
+      !document.getElementById('ember-bootstrap-wormhole')
+    );
   }),
 
   alignClass: computed('align', function() {
     if (this.get('align') !== 'left') {
       return `dropdown-menu-${this.get('align')}`;
     }
   }),
-  
+
   isOpen: computed({
     get() {
       return false;
@@ -96,7 +100,7 @@ export default Component.extend({
         if (this.get('isDestroying') || this.get('isDestroyed')) {
           return;
         }
-        this.set('_isOpen', value)
+        this.set('_isOpen', value);
       });
       return value;
     }

addon/templates/components/bs3/bs-dropdown/menu.hbs

@@ -8,7 +8,7 @@
     popperContainer="#ember-bootstrap-wormhole"
     modifiers=popperModifiers
   }}
-    <ul class={{concat "dropdown-menu " alignClass (if isOpen " show")}} role={{ariaRole}}>
+    <ul class={{concat "dropdown-menu " alignClass (if isOpen " show") " " class}} role={{ariaRole}}>
       {{yield
         (hash
           item=(component "bs-dropdown/menu/item")

addon/templates/components/bs4/bs-dropdown/menu.hbs

@@ -1,6 +1,6 @@
 {{#if _isOpen}}
   {{#ember-popper
-    class=(concat "dropdown-menu " alignClass (if isOpen " show"))
+    class=(concat "dropdown-menu " alignClass (if isOpen " show") " " class)
     ariaRole=ariaRole
     placement=popperPlacement
     popperTarget=toggleElement

tests/integration/components/bs-dropdown/menu-test.js

@@ -1,4 +1,4 @@
-import { module } from 'qunit';
+import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render } from '@ember/test-helpers';
 import { testBS3, testBS4 } from '../../../helpers/bootstrap-test';
@@ -8,34 +8,69 @@ module('Integration | Component | bs-dropdown/menu', function(hooks) {
   setupRenderingTest(hooks);
 
   testBS3('dropdown menu has correct markup', async function(assert) {
-    await render(hbs`{{#bs-dropdown/menu align="right" isOpen=true toggleElement=this.element}}Something{{/bs-dropdown/menu}}`);
+    await render(
+      hbs`{{#bs-dropdown/menu align="right" isOpen=true toggleElement=this.element}}Something{{/bs-dropdown/menu}}`
+    );
 
-    assert.equal(this.element.querySelector('.dropdown-menu').tagName, 'UL', 'menu is an unordered list (<ul>) by default');
+    assert.equal(
+      this.element.querySelector('.dropdown-menu').tagName,
+      'UL',
+      'menu is an unordered list (<ul>) by default'
+    );
     assert.dom('.dropdown-menu').exists('menu has dropdown-menu class');
     assert.dom('.dropdown-menu').exists('menu has dropdown-menu class');
-    assert.dom('.dropdown-menu').hasClass('dropdown-menu-right', 'menu has dropdown-menu-right class');
+    assert
+      .dom('.dropdown-menu')
+      .hasClass('dropdown-menu-right', 'menu has dropdown-menu-right class');
     assert.dom('.dropdown-menu').hasText('Something');
   });
 
   testBS4('dropdown menu has correct markup', async function(assert) {
-    await render(hbs`{{#bs-dropdown/menu align="right" isOpen=true toggleElement=this.element}}Something{{/bs-dropdown/menu}}`);
+    await render(
+      hbs`{{#bs-dropdown/menu align="right" isOpen=true toggleElement=this.element}}Something{{/bs-dropdown/menu}}`
+    );
 
-    assert.equal(this.element.querySelector('.dropdown-menu').tagName, 'DIV', 'menu is a div (<div>) by default');
+    assert.equal(
+      this.element.querySelector('.dropdown-menu').tagName,
+      'DIV',
+      'menu is a div (<div>) by default'
+    );
     assert.dom('.dropdown-menu').exists('menu has dropdown-menu class');
-    assert.dom('.dropdown-menu').hasClass('dropdown-menu-right', 'menu has dropdown-menu-right class');
+    assert
+      .dom('.dropdown-menu')
+      .hasClass('dropdown-menu-right', 'menu has dropdown-menu-right class');
     assert.dom('.dropdown-menu').hasText('Something');
   });
 
   testBS3('dropdown menu yields item component', async function(assert) {
-    await render(hbs`{{#bs-dropdown/menu toggleElement=this.element isOpen=true as |ddm|}}{{#ddm.item}}Dummy{{/ddm.item}}{{/bs-dropdown/menu}}`);
+    await render(
+      hbs`{{#bs-dropdown/menu toggleElement=this.element isOpen=true as |ddm|}}{{#ddm.item}}Dummy{{/ddm.item}}{{/bs-dropdown/menu}}`
+    );
 
     assert.dom('li').exists({ count: 1 }, 'has item component');
   });
 
   testBS4('dropdown menu yields item component', async function(assert) {
-    await render(hbs`{{#bs-dropdown/menu toggleElement=this.element isOpen=true as |ddm|}}{{#ddm.item}}Dummy{{/ddm.item}}{{/bs-dropdown/menu}}`
+    await render(
+      hbs`{{#bs-dropdown/menu toggleElement=this.element isOpen=true as |ddm|}}{{#ddm.item}}Dummy{{/ddm.item}}{{/bs-dropdown/menu}}`
     );
 
-    assert.dom('.dropdown-item').doesNotExist('has item component with no markup');
+    assert
+      .dom('.dropdown-item')
+      .doesNotExist('has item component with no markup');
+  });
+
+  test('dropdown menu propagates class names', async function(assert) {
+    await render(
+      hbs`{{#bs-dropdown/menu align="right" isOpen=true toggleElement=this.element class="custom-class-1 custom-class-2"}}Something{{/bs-dropdown/menu}}`
+    );
+
+    assert.dom('.dropdown-menu').exists('menu has dropdown-menu class');
+    assert
+      .dom('.dropdown-menu')
+      .hasClass('custom-class-1', 'menu has custom-class-1 class');
+    assert
+      .dom('.dropdown-menu')
+      .hasClass('custom-class-2', 'menu has custom-class-2 class');
   });
 });