💚 Fix failed tests for autocomplete and carousel

Author: KRRISH96

lib/autocomplete/index.js

@@ -270,7 +270,7 @@ class AutoComplete extends Component {
             ref={(ref) => {
               this.listRef = ref;
             }}
-            className={cx(theme['autocomplete-list'], showSuggestions ? theme.enabled : '')}
+            className={cx(theme['autocomplete-list'], showSuggestions ? `${theme.enabled} enabled` : '')}
             onMouseEnter={() => this.blockOnBlur(true)}
             onMouseLeave={() => this.blockOnBlur(false)}
           >

lib/autocomplete/tests/render.test.js

@@ -66,21 +66,21 @@ describe('AutoComplete Render tests', () => {
 
   it('Successfully removes dropdown on remove focus', () => {
     // Expected value on focus / before blur event on input component.
-    const expectedValueBeforeBlur = 'enabled';
+    const expectedValueBeforeBlur = true;
     // Expected value after blur event on input component.
-    const expectedValueAfterBlur = '';
+    const expectedValueAfterBlur = false;
     // Length of the component before / after blur.
     const simulatedValue =
       () => wrappedComponent.find(AUTOCOMPLETE_LIST_SELECTOR).props().className;
 
     // Simulate focus on input element.
     focusOnInput();
     // Check if component is rendered.
-    expect(simulatedValue()).equal(expectedValueBeforeBlur);
+    expect(simulatedValue().includes('enabled')).equal(expectedValueBeforeBlur);
     // Simulate blur event on input component.
     wrappedComponent.find('input').simulate('blur');
     // Check if component is removed from view.
-    expect(simulatedValue()).equal(expectedValueAfterBlur);
+    expect(simulatedValue().includes('enabled')).equal(expectedValueAfterBlur);
   });
 
   it('Successfully filters dropdown items according to input', () => {

lib/button/index.js

@@ -30,7 +30,7 @@ class Button extends Component {
       theme[!iconButton && size], // size will not take effect on ICON ONLY BUTTON type
       theme[`icon-${iconAlignment}`],
       className,
-      (flat || bordered || borderless) && theme.flat,
+      (flat || bordered || borderless) && `${theme.flat} flat`,
       {
         [theme[`${type}Bordered`]]: bordered,
         [theme[`${type}Borderless`]]: borderless,

lib/card/index.js

@@ -129,7 +129,12 @@ class Card extends React.Component {
         { this.renderHeader() }
         { this.renderContent() }
         { this.renderFooter() }
-        <div className={classnames(theme.expandedContent, theme[`${expanded ? 'expanded' : 'collapsed'}`])}>
+        <div
+          className={classnames(
+            theme.expandedContent, 'expandedContent',
+            expanded ? `${theme.expanded} expanded` : `${theme.collapsed} collapsed`,
+          )}
+        >
           {(expandedContent !== null) && <HiddenContent />}
         </div>
       </div>

lib/carousel/carouselItem.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 const CarouselItem = ({ theme, active, imageUrl }) => (
-  <div className={cx(theme['carousel-item'], theme.active, { [theme.current]: active })}>
+  <div className={cx(theme['carousel-item'], theme.active, 'active', (active ? `${theme.current} current` : ''))}>
     {imageUrl ? <img src={imageUrl} alt="carousel-item" /> : this.props.children}
   </div>
 );

lib/carousel/index.js

@@ -43,7 +43,7 @@ class Carousel extends React.Component {
         {/* eslint-disable jsx-a11y/no-static-element-interactions */}
         {
           controls &&
-          <FaAngleLeft className={cx(theme['left-control'], theme['carousel-left-icon'])} onClick={() => this.setActiveItem(active - 1)} />
+          <FaAngleLeft className={cx(theme['left-control'], 'carousel-left-icon')} onClick={() => this.setActiveItem(active - 1)} />
         }
         {data.map((item, index) => (
           <CarouselItem
@@ -60,13 +60,13 @@ class Carousel extends React.Component {
             <span
               key={`carousel-indicator-${index + 1}`}
               onClick={() => this.setActiveItem(index)}
-              className={cx({ [theme.active]: active === index })}
+              className={cx((active === index) ? `${theme.active} active` : '')}
             />
           ))}
         </div>
         {
           controls &&
-          <FaAngleRight className={cx(theme['right-control'], theme['carousel-right-icon'])} onClick={() => this.setActiveItem(active + 1)} />
+          <FaAngleRight className={cx(theme['right-control'], 'carousel-right-icon')} onClick={() => this.setActiveItem(active + 1)} />
         }
       </div>
     );