flex: fix test

A-l-y-l-e · Jun 18, 2018 · e8bb25b · e8bb25b
1 parent b8d61fa
commit e8bb25b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/lib/flex/flex.directive.spec.ts b/src/lib/flex/flex.directive.spec.ts
@@ -4,6 +4,7 @@ import { Renderer2, ElementRef, Component, ViewChild, ViewChildren, QueryList }
 import { LY_THEME_CONFIG } from '@alyle/ui';
 import { MinimaTheme } from '@alyle/ui/themes/minima';
 import { By } from '@angular/platform-browser';
+import { LY_MEDIA_QUERIES, Breakpoints } from '@alyle/ui/responsive';
 
 describe('LyFlex', () => {
   beforeEach(async(() => {
@@ -17,7 +18,7 @@ describe('LyFlex', () => {
         FlexWrap,
         FlexAlignDefault
       ],
-      providers: [{ provide: LY_THEME_CONFIG, useClass: MinimaTheme }]
+      providers: [{ provide: LY_THEME_CONFIG, useClass: MinimaTheme }, { provide: LY_MEDIA_QUERIES, useValue: Breakpoints }],
     });
 
     TestBed.compileComponents();

diff --git a/src/lib/flex/flex.directive.ts b/src/lib/flex/flex.directive.ts
@@ -60,7 +60,7 @@ export class LyFlex implements OnChanges {
   set fxDisplay(val: 'flex' | 'inline') {
     if (this._fxDisplay !== val) {
       this._fxDisplay = val || 'flex';
-      const newClass = this._createDisplay(this._fxDisplay);
+      const newClass = this._createDisplayClass(this._fxDisplay);
       this.coreTheme.updateClassName(this.elementRef.nativeElement, this.renderer, newClass, this.fxDisplayClass);
       this.fxDisplayClass = newClass;
     }
@@ -170,15 +170,12 @@ export class LyFlex implements OnChanges {
     }
   }
 
-  private _createDisplay(val: 'flex' | 'inline') {
-    const displayStyle = val === 'flex' ? `display:flex;` : `display:inline-flex;`;
-    const key = val === 'flex' ? `k-fx-display-flex` : `k-fx-display-inline;`;
+  private _createDisplayClass(val: 'flex' | 'inline' = 'flex') {
     return this.coreTheme.setUpStyle(
-      key, {
-        '': () => (
-          displayStyle
-        )
-      }
+      `k-fx-display-${val}`,
+        () => {
+          return val === 'inline' ? `display:inline-flex;` : `display:flex;`;
+        }
     );
   }