Skip to content

Commit

Permalink
NAS-125135 / 24.04 / Network gateway config popup offers skip, but is…
Browse files Browse the repository at this point in the history 
… blocked by required (#9200)

* NAS-125135: Network gateway config popup offers skip, but is blocked by required

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update

* NAS-125135: PR update
  • Loading branch information
@AlexKarpov98
AlexKarpov98 authored Dec 2, 2023
1 parent 8d5f444 commit eae1a21
Show file tree
Hide file tree
Showing 5 changed files with 192 additions and 151 deletions.
294 changes: 159 additions & 135 deletions src/app/modules/ix-forms/components/ix-input/ix-input.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { IxInputComponent } from './ix-input.component';
describe('IxInputComponent', () => {
let spectator: Spectator<IxInputComponent>;
const formControl = new FormControl<unknown>();
const blurFormControl = new FormControl('', { updateOn: 'blur' });
let loader: HarnessLoader;

const createHost = createHostFactory({
Expand All @@ -30,194 +31,217 @@ describe('IxInputComponent', () => {
],
});

beforeEach(() => {
spectator = createHost('<ix-input [formControl]="formControl"></ix-input>', {
hostProps: { formControl },
describe('default `updateOn: change` strategy', () => {
beforeEach(() => {
spectator = createHost('<ix-input [formControl]="formControl"></ix-input>', {
hostProps: { formControl },
});
loader = TestbedHarnessEnvironment.loader(spectator.fixture);
});
loader = TestbedHarnessEnvironment.loader(spectator.fixture);
});

describe('rendering', () => {
it('renders a label and passes properties to it', () => {
spectator.setInput('label', 'New Password');
spectator.setInput('required', true);
spectator.setInput('tooltip', 'Minimum length is 8 characters.');

const label = spectator.query(IxLabelComponent);
expect(label).toExist();
expect(label.label).toBe('New Password');
expect(label.required).toBe(true);
expect(label.tooltip).toBe('Minimum length is 8 characters.');
});
describe('rendering', () => {
it('renders a label and passes properties to it', () => {
spectator.setInput('label', 'New Password');
spectator.setInput('required', true);
spectator.setInput('tooltip', 'Minimum length is 8 characters.');

it('renders a hint when it is provided', () => {
spectator.setInput('hint', 'Capital letters only');
const label = spectator.query(IxLabelComponent);
expect(label).toExist();
expect(label.label).toBe('New Password');
expect(label.required).toBe(true);
expect(label.tooltip).toBe('Minimum length is 8 characters.');
});

expect(spectator.query('mat-hint')).toHaveText('Capital letters only');
});
it('renders a hint when it is provided', () => {
spectator.setInput('hint', 'Capital letters only');

it('renders a prefix icon when it is provided', () => {
spectator.setInput('prefixIcon', 'person');
expect(spectator.query('mat-hint')).toHaveText('Capital letters only');
});

expect(spectator.query('.prefix-icon ix-icon')).toHaveLength(1);
expect(spectator.query('input')).toHaveClass('prefix-padding');
});
it('renders a prefix icon when it is provided', () => {
spectator.setInput('prefixIcon', 'person');

it('marks input element as readonly when readonly input is true', () => {
spectator.setInput('readonly', true);
expect(spectator.query('.prefix-icon ix-icon')).toHaveLength(1);
expect(spectator.query('input')).toHaveClass('prefix-padding');
});

expect(spectator.query('input')).toHaveAttribute('readonly');
});
it('marks input element as readonly when readonly input is true', () => {
spectator.setInput('readonly', true);

it('passes autocomplete attribute to the input element', () => {
spectator.setInput('autocomplete', 'on');
expect(spectator.query('input')).toHaveAttribute('readonly');
});

expect(spectator.query('input')).toHaveAttribute('autocomplete', 'on');
});
it('passes autocomplete attribute to the input element', () => {
spectator.setInput('autocomplete', 'on');

it('shows button that resets input when input is not empty', () => {
formControl.setValue('test');
spectator.detectComponentChanges();
expect(spectator.query('input')).toHaveAttribute('autocomplete', 'on');
});

spectator.click('.reset-input ix-icon');
it('shows button that resets input when input is not empty', () => {
formControl.setValue('test');
spectator.detectComponentChanges();

expect(formControl.value).toBe('');
});
spectator.click('.reset-input ix-icon');

it('shows button that resets input when input type is number and value is 0', () => {
formControl.setValue('0');
spectator.detectComponentChanges();
expect(formControl.value).toBe('');
});

it('shows button that resets input when input type is number and value is 0', () => {
formControl.setValue('0');
spectator.detectComponentChanges();

spectator.click('.reset-input ix-icon');
spectator.click('.reset-input ix-icon');

expect(formControl.value).toBe('');
expect(formControl.value).toBe('');
});
});
});

describe('form control', () => {
it('shows value provided in form control', () => {
formControl.setValue('test');
spectator.detectComponentChanges();
describe('form control', () => {
it('shows value provided in form control', () => {
formControl.setValue('test');
spectator.detectComponentChanges();

expect(spectator.query('input')).toHaveValue('test');
});
expect(spectator.query('input')).toHaveValue('test');
});

it('updates form control value when user types in value in input element', () => {
spectator.typeInElement('new value', 'input');
it('updates form control value when user types in value in input element', () => {
spectator.typeInElement('new value', 'input');

expect(formControl.value).toBe('new value');
});
expect(formControl.value).toBe('new value');
});

it('shows autocomplete values when value typed', async () => {
spectator.setInput('autocompleteOptions', [{
label: 'autocomplete test',
value: 1,
}]);
it('shows autocomplete values when value typed', async () => {
spectator.setInput('autocompleteOptions', [{
label: 'autocomplete test',
value: 1,
}]);

spectator.typeInElement('test', 'input');
spectator.focus();
spectator.typeInElement('test', 'input');
spectator.focus();

const select = await loader.getHarness(MatAutocompleteHarness);
const options = await select.getOptions();
const optionLabels = await parallel(() => options.map((option) => option.getText()));
expect(optionLabels).toEqual(['autocomplete test']);
});
const select = await loader.getHarness(MatAutocompleteHarness);
const options = await select.getOptions();
const optionLabels = await parallel(() => options.map((option) => option.getText()));
expect(optionLabels).toEqual(['autocomplete test']);
});

it('resets form control value when autocomplete values provided and custom value typed', () => {
spectator.setInput('autocompleteOptions', [{
label: 'bingo',
value: 1,
}]);
spectator.typeInElement('new value', 'input');
spectator.component.blurred();
it('resets form control value when autocomplete values provided and custom value typed', () => {
spectator.setInput('autocompleteOptions', [{
label: 'bingo',
value: 1,
}]);
spectator.typeInElement('new value', 'input');
spectator.component.blurred();

expect(formControl.value).toBe('');
});
expect(formControl.value).toBe('');
});

it('disables input when form control is disabled', () => {
formControl.disable();
spectator.detectComponentChanges();
it('disables input when form control is disabled', () => {
formControl.disable();
spectator.detectComponentChanges();

expect(spectator.query('input')).toBeDisabled();
expect(spectator.query('input')).toBeDisabled();
});
});
});

describe('types', () => {
it('passes type to input when it is not password', () => {
spectator.setInput('type', 'email');
describe('types', () => {
it('passes type to input when it is not password', () => {
spectator.setInput('type', 'email');

expect(spectator.query('input')).toHaveAttribute('type', 'email');
});
expect(spectator.query('input')).toHaveAttribute('type', 'email');
});

it('converts user input to a number when type is number', () => {
spectator.setInput('type', 'number');
it('converts user input to a number when type is number', () => {
spectator.setInput('type', 'number');

spectator.typeInElement('123', 'input');
spectator.typeInElement('123', 'input');

expect(formControl.value).toBe(123);
});
expect(formControl.value).toBe(123);
});

it('counts 0 as valid when type is number', () => {
spectator.setInput('type', 'number');
it('counts 0 as valid when type is number', () => {
spectator.setInput('type', 'number');

spectator.typeInElement('0', 'input');
spectator.typeInElement('0', 'input');

expect(formControl.value).toBe(0);
expect(spectator.query('.mat-mdc-form-field-error')).toBeNull();
});
expect(formControl.value).toBe(0);
expect(spectator.query('.mat-mdc-form-field-error')).toBeNull();
});

it('renders input element as pseudo-password field (via search input type) to disable password managers', () => {
formControl.setValue('test');
spectator.setInput('type', 'password');
it('renders input element as pseudo-password field (via search input type) to disable password managers', () => {
formControl.setValue('test');
spectator.setInput('type', 'password');

expect(spectator.query('input')).toHaveAttribute('type', 'text');
});
expect(spectator.query('input')).toHaveAttribute('type', 'text');
});

it('shows button that toggles password visibility when type is password', () => {
formControl.setValue('test');
spectator.setInput('type', 'password');
it('shows button that toggles password visibility when type is password', () => {
formControl.setValue('test');
spectator.setInput('type', 'password');

expect(spectator.query('input')).toHaveClass('password-field');
expect(spectator.query(IxIconComponent).name).toBe('visibility_off');
expect(spectator.query('input')).toHaveClass('password-field');
expect(spectator.query(IxIconComponent).name).toBe('visibility_off');

spectator.click('.toggle_pw');
spectator.click('.toggle_pw');

expect(spectator.query('input')).not.toHaveClass('password-field');
expect(spectator.query(IxIconComponent).name).toBe('visibility');
expect(spectator.query('input')).not.toHaveClass('password-field');
expect(spectator.query(IxIconComponent).name).toBe('visibility');
});
});
});

describe('validation', () => {
it('shows a validation message when native input type validation does not pass', () => {
spectator.setInput('type', 'email');

// jest doesn't support native validators
spectator.component.input({
validity: {
badInput: true,
},
value: 'invalid',
} as HTMLInputElement);
spectator.detectComponentChanges();
describe('validation', () => {
it('shows a validation message when native input type validation does not pass', () => {
spectator.setInput('type', 'email');

// jest doesn't support native validators
spectator.component.input({
validity: {
badInput: true,
},
value: 'invalid',
} as HTMLInputElement);
spectator.detectComponentChanges();

expect(spectator.query('.mat-mdc-form-field-error')).toHaveText('Value must be a email');
expect(spectator.query('.mat-mdc-form-field-error')).toHaveText('Value must be a email');
});
});
});

describe('parsing and formatting', () => {
it('uses parse function to transform user input when parse function is provided', () => {
spectator.setInput('parse', (value: string) => value.toUpperCase());
describe('parsing and formatting', () => {
it('uses parse function to transform user input when parse function is provided', () => {
spectator.setInput('parse', (value: string) => value.toUpperCase());

spectator.typeInElement('test', 'input');

spectator.typeInElement('test', 'input');
expect(formControl.value).toBe('TEST');
});

expect(formControl.value).toBe('TEST');
it('uses format function to transform form control value when format function is provided', () => {
spectator.setInput('format', (value: string) => value.toUpperCase());
formControl.setValue('test');

expect(spectator.query('input')).toHaveValue('TEST');
});
});
});

it('uses format function to transform form control value when format function is provided', () => {
spectator.setInput('format', (value: string) => value.toUpperCase());
formControl.setValue('test');
describe('non-default but `updateOn: blur` strategy', () => {
beforeEach(() => {
spectator = createHost('<ix-input [formControl]="blurFormControl"></ix-input>', {
hostProps: { blurFormControl },
});
loader = TestbedHarnessEnvironment.loader(spectator.fixture);
});

it('updates form control value only on blur', () => {
spectator.typeInElement('new value', 'input');
spectator.detectComponentChanges();

expect(blurFormControl.value).toBe('');

spectator.blur('input');
spectator.detectComponentChanges();

expect(spectator.query('input')).toHaveValue('TEST');
expect(blurFormControl.value).toBe('new value');
});
});
});
Loading

0 comments on commit eae1a21

Please sign in to comment.