@testgorilla/tgo-ui 2.10.1 → 2.10.2

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

@@ -1,268 +0,0 @@
-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

@@ -1,212 +0,0 @@
-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;