feat(plex-options): cambia button por plex-button

Author: palita1991

cypress/integration/template-listado.js

@@ -7,19 +7,13 @@ context('template listado', () => {
     });
 
     it('test accordion', () => {
-        cy.eyesCheckWindow('main');
-
-        // SE SACO PORQUE PISARON TODA UNA COMPONENTE
-        // cy.get('plex-title').plexButtonIcon('chevron-down').click();
-        // cy.eyesCheckWindow('modal');
-
-        // cy.plexButton('CANCELAR').click();
+        cy.eyesCheckWindow('main');;
 
         cy.get('plex-list plex-item').eq(0).plexButtonIcon('eye').click();
 
         cy.eyesCheckWindow('item list selected');
 
-        cy.get('plex-options button').eq(0).click();
+        cy.get('plex-options').plexButton('opcion 1').eq(0).click();
 
         cy.eyesCheckWindow('plex-options');
 

src/lib/css/plex-options.scss

@@ -1,9 +1,18 @@
 plex-options {
-    .options-container {
-        display: flex;        
-    }
-
-    .option-grow {
+    plex-button {
         flex-grow: 1;
+
+        &.active {
+            button {
+                color: #fff;
+                background-color: #0082ad;
+                background-image: none;
+                border-color: #007aa3;
+            }
+        }
+
+        button {
+            width: 100%;
+        }
     }
 }

src/lib/options/options.component.spec.ts

@@ -6,6 +6,7 @@ import { Component, DebugElement, Type, ViewChild, ViewEncapsulation } from '@an
 import { PlexOptionsComponent, IPlexOptionsItems } from './options.component';
 import { PlexModule } from '../module';
 import { FormsModule } from '@angular/forms';
+import { Plex } from '../core/service';
 
 describe('PlexOptionsComponent', () => {
     let fixture: ComponentFixture<PlexOptionsTestComponent>;
@@ -22,7 +23,7 @@ describe('PlexOptionsComponent', () => {
 
 
     it('have 3 buttons', fakeAsync(() => {
-        const elements = getElementAll(fixture, 'plex-options button');
+        const elements = getElementAll(fixture, 'plex-options plex-button');
         expect(elements.length).toBe(fixture.componentInstance.items.length);
     }));
 
@@ -31,7 +32,7 @@ describe('PlexOptionsComponent', () => {
     }));
 
     it('display label', fakeAsync(() => {
-        const elements = getElementAll(fixture, 'plex-options button');
+        const elements = getElementAll(fixture, 'plex-options plex-button');
 
         elements.forEach((elem, index) => {
             const elementRef = elem.nativeElement;
@@ -44,7 +45,7 @@ describe('PlexOptionsComponent', () => {
 
         spyOn(fixture.componentInstance, 'onChange');
 
-        const elements = getElementAll(fixture, 'plex-options button');
+        const elements = getElementAll(fixture, 'plex-options plex-button');
         const secondButton = elements[1].nativeElement;
         secondButton.dispatchEvent(new Event('click'));
 
@@ -66,7 +67,7 @@ describe('PlexOptionsComponent', () => {
 
         tickAndDetectChanges(fixture);
 
-        const elements = getElementAll(fixture, 'plex-options button');
+        const elements = getElementAll(fixture, 'plex-options plex-button');
 
         expect(options.active).toBe('d');
 
@@ -134,7 +135,8 @@ function createTestingModule<T>(cmp: Type<T>, template: string): ComponentFixtur
 
     TestBed.configureTestingModule({
         imports: [BrowserModule, PlexModule, FormsModule],
-        declarations: [cmp]
+        declarations: [cmp],
+        providers: [Plex]
     })
         .overrideComponent(cmp, {
             set: {

src/lib/options/options.component.ts

@@ -9,15 +9,13 @@ export interface IPlexOptionsItems {
 @Component({
     selector: 'plex-options',
     template: `
-        <div class="row">
-            <div class="d-flex col flex-wrap">
-                <ng-container *ngFor="let item of items">
-                    <button class="btn btn-primary btn-sm option-grow m-0" (click)="onOptionsClick(item)" [class.active]="active === item.key">
-                        {{ item.label }}
-                    </button>
-                </ng-container>
+            <div class="row">
+                <div class="d-flex col flex-wrap">
+                    <ng-container *ngFor="let item of items">
+                        <plex-button [type]="info" [size]="sm" [label]="item.label" (click)="onOptionsClick(item)" class="active === item.key"></plex-button>
+                    </ng-container>
+                </div>
             </div>
-        </div>
     `
 })
 export class PlexOptionsComponent implements OnInit, OnChanges {