@testgorilla/tgo-ui 2.9.0 → 2.10.1

package/projects/tgo-canopy-ui/components/field/field.component.spec.ts

@@ -0,0 +1,268 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+
+import { FieldComponent } from './field.component';
+import { By } from '@angular/platform-browser';
+import { FieldMock } from '../../__mocks__/field.mock';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+describe('FieldComponent', () => {
+  let component: FieldComponent;
+  let fixture: ComponentFixture<FieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [FieldComponent],
+      imports: [UiTranslatePipe, HasValidationErrorPipe],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FieldComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+  it('should render correctly', () => {
+    fixture.detectChanges();
+    expect(fixture).toMatchSnapshot();
+  });
+
+  //Testing text input
+  describe('When type input is initialized', () => {
+    it('should render text value', () => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['type']).toBe(FieldMock.type.text);
+    });
+    describe('and it changes to password', () => {
+      it('should render password value', () => {
+        component.type = 'password';
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.attributes['type']).toBe(FieldMock.type.password);
+      });
+    });
+    describe('and it changes to search', () => {
+      it('should render search value', () => {
+        component.type = 'search';
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.attributes['type']).toBe(FieldMock.type.search);
+      });
+    });
+    describe('and it changes to email', () => {
+      it('should render email value', () => {
+        component.type = 'email';
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.attributes['type']).toBe(FieldMock.type.email);
+      });
+    });
+    describe('and it changes to number', () => {
+      it('should render number value', () => {
+        component.type = 'number';
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.attributes['type']).toBe(FieldMock.type.numberType);
+      });
+    });
+    describe('and it changes to tel', () => {
+      it('should render tel value', () => {
+        component.type = 'tel';
+        fixture.detectChanges();
+        const input = fixture.debugElement.query(By.css('input'));
+        expect(input.attributes['type']).toBe(FieldMock.type.tel);
+      });
+    })
+  });
+  //Testing placeholder input
+  describe('when placeholder input is initialized with value', () => {
+    it('should render password value', () => {
+      component.placeholder = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['placeholder']).toBe('testing');
+    });
+  });
+  //Testing label input
+  describe('when label input is initialized with value', () => {
+    it('should render label value', () => {
+      component.label = 'Test';
+      fixture.detectChanges();
+      const label = fixture.debugElement.nativeElement.querySelector('mat-label');
+      expect(label.textContent).toContain('Test');
+    });
+  });
+  //Testing disabled input
+  describe('when disabled input is initialized in true', () => {
+    it('should render disable attribute', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+      const input = fixture.debugElement.nativeElement.querySelector('input');
+      expect(input.disabled).toBeTruthy();
+    });
+  });
+  //Testing errors
+  describe('when errors input is initialized', () => {
+    beforeEach(() => {
+      component.errors = ['error1', 'error2'];
+    });
+    it('should render each error', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const input = fixture.debugElement.query(By.css('input'))?.nativeElement;
+      input.value = 'testing';
+      input.dispatchEvent(new Event('input'));
+      const errors = fixture.debugElement.queryAll(By.css('.errors'));
+      expect(errors.length).toBe(2);
+    }));
+    it('should add warn class to mat-form-field', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+      const inputElement = fixture.debugElement.query(By.css('input'))?.nativeElement;
+      inputElement.value = 'testing';
+      inputElement.dispatchEvent(new Event('input'));
+      const input = fixture.debugElement.query(By.css('mat-form-field'));
+      expect(input.properties['color']).toBe('warn');
+    }));
+  });
+  //Testing fieldName
+  describe('when fieldName input is initialized with value', () => {
+    it('should render name attribute', () => {
+      component.fieldName = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['name']).toBe('testing');
+    });
+  });
+  //Testing hintMessage
+  describe('when hintMessage input is initialized with value', () => {
+    it('should render matHint', () => {
+      component.hintMessage = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('mat-hint'));
+      expect(input.classes['info']).toBeTruthy();
+    });
+  });
+  //Testing id
+  describe('when id input is initialized with value', () => {
+    it('should render id attribute', () => {
+      component.id = 'testing';
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input'));
+      expect(input.attributes['id']).toBe('testing');
+    });
+  });
+  //Testing required input
+  describe('when required input is initialized with true', () => {
+    it('should render * with label', () => {
+      component.label = 'Test';
+      component.required = true;
+      fixture.detectChanges();
+      const label = fixture.debugElement.nativeElement.querySelector('mat-label');
+      expect(label.textContent).toContain('Test *');
+    });
+  });
+  //Testing value
+  describe('when value input is initialized with value', () => {
+    it('should render value attribute', fakeAsync(() => {
+      fixture.detectChanges();
+      const input = fixture.debugElement.query(By.css('input')).nativeElement;
+      input.value = 'testing';
+      tick();
+      input.dispatchEvent(new Event('input'));
+      fixture.detectChanges();
+      expect(input.value).toEqual('testing');
+    }));
+  });
+  //Testing password type methods
+  describe('when type input has password as value', () => {
+    beforeEach(() => {
+      component.type = 'password';
+    });
+    it('should set currentType to text', fakeAsync(() => {
+      component.showPassword = true;
+      fixture.detectChanges();
+      const button = fixture.debugElement.nativeElement.querySelector('.password');
+      component.showPasswordClick();
+      button.click();
+      tick();
+      expect(component.currentType).toBe('text');
+    }));
+    it('should set currentType to password', fakeAsync(() => {
+      component.showPassword = false;
+      fixture.detectChanges();
+      const button = fixture.debugElement.nativeElement.querySelector('.password');
+      button.click();
+      component.showPasswordClick();
+      tick();
+      expect(component.currentType).toBe('password');
+    }));
+    describe('showPasswordClick()', () => {
+      it('should set showPassword in false', () => {
+        component.showPassword = true;
+        component.showPasswordClick();
+        expect(component.showPassword).toBe(false);
+      })
+      it('should set current type in text', () => {
+        component.showPassword = false;
+        component.showPasswordClick();
+        expect(component.currentType).toBe('text');
+      });
+    });
+  });
+  //Testing search type methods
+  describe('when type input has search as value', () => {
+    beforeEach(() => {
+      component.type = 'search';
+    });
+    it('should clear the value', () => {
+      component.value = 'test';
+      component.clearValue();
+      expect(component.value).toBe('');
+    });
+    it('should set showClose in true', () => {
+      component.value = 'test';
+      component.onChangeInputSearch();
+      expect(component.showClose).toBe(true);
+    });
+  });
+  //Testing writeValue
+  describe('writeValue', () => {
+    it('should set value as value input', () => {
+      component.writeValue('testing');
+      expect(component.value).toBe('testing');
+    });
+    it('should set value as empty string', () => {
+      component.writeValue();
+      expect(component.value).toBe('');
+    });
+  });
+  //Testing registerOnChange
+  describe('registerOnChange', () => {
+    it('should set onChange', () => {
+      component.registerOnChange('test');
+      expect(component.onChange).toBe('test');
+    });
+  });
+  //Testing registerOnTouched
+  describe('registerOnTouched', () => {
+    it('should set onTouch', () => {
+      component.registerOnTouched('test');
+      expect(component.onTouch).toBe('test');
+    });
+  });
+  //Testing setDisabledState
+  describe('setDisabledState', () => {
+    it('should set disabled', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+    });
+  });
+});

package/projects/tgo-canopy-ui/components/field/field.component.stories.ts

@@ -0,0 +1,212 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { ButtonComponentModule } from '../button/button.component.module';
+import { IconComponentModule } from '../icon/icon.component.module';
+import { FieldComponent } from './field.component';
+import { DigitsOnlyDirective } from '../../directives/digits-only.directive';
+import { MatIconModule } from '@angular/material/icon';
+import { UiTranslatePipe } from '../../pipes/ui-translate.pipe';
+import { transformTheme } from "../../utils/transform-theme";
+import { HasValidationErrorPipe } from '../../pipes/has-validation-error.pipe';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  title: 'Forms/Field',
+  component: FieldComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        BrowserAnimationsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        ReactiveFormsModule,
+        IconComponentModule,
+        ButtonComponentModule,
+        MatIconModule,
+        UiTranslatePipe,
+        HasValidationErrorPipe,
+      ],
+      declarations: [FieldComponent, DigitsOnlyDirective],
+    }),
+  ],
+} as Meta;
+
+const excludeParameter = {
+  controls: {
+    exclude: [
+      'class',
+      'showClose',
+      'showPassword',
+      'clearValue',
+      'getType',
+      'ngOnInit',
+      'onChangeInputSearch',
+      'setSearchInput',
+      'showPasswordClick',
+      'inputChange',
+      'currentType',
+      'onInput',
+      'registerOnChange',
+      'registerOnTouched',
+      'setDisabledState',
+      'setErrorsLength',
+      'writeValue',
+      'errorsLength',
+      'fieldChangeEvent',
+    ],
+  },
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=2851-4193&mode=design&t=FgPRr7luKmLuBeL9-0',
+  },
+};
+
+const Template: Story = (args, { globals: { theme } }) => {
+  const _theme = transformTheme(theme);
+  return {
+    props: {
+      applicationTheme: _theme,
+      ...args,
+    },
+  };
+};
+
+export const Text = Template.bind({});
+Text.args = {
+  type: 'text',
+  placeholder: 'Placeholder',
+  label: 'Input text label',
+  hintMessage: 'Donec posuere ultrices feugiat. Suspendisse potenti.',
+};
+
+Text.parameters = excludeParameter;
+
+export const Password = Template.bind({});
+Password.args = {
+  type: 'password',
+  label: 'Password label',
+};
+
+Password.parameters = excludeParameter;
+
+export const Search = Template.bind({});
+Search.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12795-8680&mode=design&t=c2pEymTeiu5SHFCn-0',
+  },
+};
+Search.args = {
+  type: 'search',
+  placeholder: 'Search',
+};
+
+export const CollapsedSearch = Template.bind({});
+CollapsedSearch.parameters = {
+  design: {
+    name: 'Figma design',
+    type: 'figma',
+    url: 'https://www.figma.com/file/FHZJ7ViJv6msJA5lJvPRIG/Component-library?type=design&node-id=12795-8680&mode=design&t=c2pEymTeiu5SHFCn-0',
+  },
+};
+CollapsedSearch.args = {
+  type: 'collapsed-search',
+  placeholder: 'Collapsed search',
+  label: 'Search',
+};
+
+export const Email = Template.bind({});
+Email.args = {
+  type: 'email',
+  placeholder: 'Placeholder',
+  label: 'email label',
+};
+
+Email.parameters = excludeParameter;
+
+export const NumberType = Template.bind({});
+NumberType.args = {
+  type: 'number',
+  placeholder: 'Placeholder',
+  label: 'Number label',
+};
+
+NumberType.parameters = excludeParameter;
+
+export const Tel = Template.bind({});
+Tel.args = {
+  type: 'tel',
+  placeholder: 'Placeholder',
+  label: 'Tel label',
+};
+
+Tel.parameters = excludeParameter;
+
+export const WithoutLabel = Template.bind({});
+WithoutLabel.args = {
+  type: 'text',
+  placeholder: 'Placeholder',
+};
+
+WithoutLabel.parameters = excludeParameter;
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  type: 'text',
+  placeholder: 'Placeholder',
+  errors: ['Lorem ipsum dolor sit amet, consectetur adipiscing elit', 'Phasellus aliquam quam id tincidunt dapibus <a href="#">text</a>'],
+};
+
+WithErrors.parameters = excludeParameter;
+
+export const WithDisable = Template.bind({});
+WithDisable.args = {
+  type: 'text',
+  placeholder: 'Placeholder',
+  disabled: true,
+  label: 'Label'
+};
+
+WithDisable.parameters = excludeParameter;
+
+export const WithRequire = Template.bind({});
+WithRequire.args = {
+  type: 'text',
+  placeholder: 'Placeholder',
+  required: true,
+  label: 'Label require',
+};
+
+WithRequire.parameters = excludeParameter;
+
+export const ValitateText = Template.bind({});
+ValitateText.args = {
+  type: 'validation-text',
+  placeholder: 'Validation text',
+  label: 'Label',
+};
+
+
+export const Textarea = Template.bind({});
+Textarea.args = {
+  type: 'textarea',
+  placeholder: 'Textarea',
+  label: 'Label',
+};
+
+Textarea.parameters = excludeParameter;
+
+export const MultiLine = Template.bind({});
+MultiLine.args = {
+  type: 'multi-line',
+  placeholder: 'MultiLine',
+  label: 'Label',
+};
+
+MultiLine.parameters = excludeParameter;