fix: button size on input button (#900) ✨

* fix: button size on input button * feat: default id for button case on input to remove undefined value in test id * feat: adjustmants at test * feat: adjust at test * feat: renamed function --------- Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Oct 31, 2023 · bafafe8 · bafafe8
1 parent 03bc03c
commit bafafe8
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/projects/ion/src/lib/input/input.component.spec.ts b/projects/ion/src/lib/input/input.component.spec.ts
@@ -1,11 +1,11 @@
-import { SafeAny } from './../utils/safe-any';
 import { CommonModule } from '@angular/common';
-import { render, screen, fireEvent, within } from '@testing-library/angular';
-import userEvent from '@testing-library/user-event';
-import { IonInputComponent } from './input.component';
 import { FormsModule } from '@angular/forms';
+import { fireEvent, render, screen, within } from '@testing-library/angular';
+import userEvent from '@testing-library/user-event';
+import { InputType, IonInputProps } from '../core/types/input';
 import { IonSharedModule } from '../shared.module';
-import { IonInputProps, InputType } from '../core/types/input';
+import { SafeAny } from './../utils/safe-any';
+import { IonInputComponent } from './input.component';
 
 const sut = async (customProps?: IonInputProps): Promise<void> => {
   await render(IonInputComponent, {
@@ -87,6 +87,21 @@ describe('IonInputComponent', () => {
     expect(button).toBeInTheDocument();
   });
 
+  it('should render button with md size when size is not setted', async () => {
+    await sut({
+      inputButton: true,
+      inputButtonConfig: {
+        iconType: 'pencil',
+        type: 'primary',
+        id: 'Button',
+      },
+    });
+    const buttonContainer = screen.getByTestId('input-button');
+    expect(within(buttonContainer).getByTestId('btn-Button')).toHaveClass(
+      'ion-btn-md'
+    );
+  });
+
   it('should emit an event when clicked input button', async () => {
     const clickEvent = jest.fn();
     await sut({

diff --git a/projects/ion/src/lib/input/input.component.ts b/projects/ion/src/lib/input/input.component.ts
@@ -1,14 +1,14 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { IonButtonProps } from '../core/types';
 import { IconDirection, IconType } from '../core/types/icon';
 import { InputType } from '../core/types/input';
-import { IonButtonProps } from '../core/types';
 
 @Component({
   selector: 'ion-input',
   templateUrl: './input.component.html',
   styleUrls: ['./input.component.scss'],
 })
-export class IonInputComponent {
+export class IonInputComponent implements OnInit {
   @Input() placeholder?: string;
   @Input() button = 'Button';
   @Input() iconInput: IconType;
@@ -27,6 +27,10 @@ export class IonInputComponent {
   @Output() valueChange = new EventEmitter<string>();
   @Output() clickButton = new EventEmitter();
 
+  ngOnInit(): void {
+    this.checkAndSetButtonSize();
+  }
+
   onChange(value: string): void {
     this.valueChange.emit(value);
   }
@@ -43,4 +47,10 @@ export class IonInputComponent {
   public isClearButtonVisible(): boolean {
     return this.clearButton && this.value.length > 0;
   }
+
+  private checkAndSetButtonSize(): void {
+    if (this.inputButtonConfig && !this.inputButtonConfig.size) {
+      this.inputButtonConfig.size = 'md';
+    }
+  }
 }