104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
|
import { describe, it, expect } from 'vitest';
|
||
|
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||
|
|
import { FormField } from '@app/shared/ui/form-field/form-field';
|
||
|
|
|
||
|
|
describe('FormField', () => {
|
||
|
|
let component: FormField;
|
||
|
|
let fixture: ComponentFixture<FormField>;
|
||
|
|
|
||
|
|
beforeEach(async () => {
|
||
|
|
await TestBed.configureTestingModule({
|
||
|
|
imports: [FormField],
|
||
|
|
}).compileComponents();
|
||
|
|
|
||
|
|
fixture = TestBed.createComponent(FormField);
|
||
|
|
component = fixture.componentInstance;
|
||
|
|
fixture.componentRef.setInput('inputId', 'test-input');
|
||
|
|
fixture.componentRef.setInput('label', 'Test Label');
|
||
|
|
fixture.detectChanges();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should create', () => {
|
||
|
|
expect(component).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should render label with text', () => {
|
||
|
|
const label = fixture.nativeElement.querySelector('.form-field__label');
|
||
|
|
|
||
|
|
expect(label?.textContent).toContain('Test Label');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should set for attribute on label', () => {
|
||
|
|
const label = fixture.nativeElement.querySelector('.form-field__label');
|
||
|
|
|
||
|
|
expect(label.getAttribute('for')).toBe('test-input');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not show required marker by default', () => {
|
||
|
|
const required = fixture.nativeElement.querySelector('.form-field__required');
|
||
|
|
|
||
|
|
expect(required).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show required marker when required is true', () => {
|
||
|
|
fixture.componentRef.setInput('required', true);
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const required = fixture.nativeElement.querySelector('.form-field__required');
|
||
|
|
|
||
|
|
expect(required).toBeTruthy();
|
||
|
|
expect(required.textContent).toContain('*');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not show error message by default', () => {
|
||
|
|
const error = fixture.nativeElement.querySelector('.form-field__error');
|
||
|
|
|
||
|
|
expect(error).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show error message when hasError and errorMessage are set', () => {
|
||
|
|
fixture.componentRef.setInput('hasError', true);
|
||
|
|
fixture.componentRef.setInput('errorMessage', 'This field is required');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const error = fixture.nativeElement.querySelector('.form-field__error');
|
||
|
|
|
||
|
|
expect(error).toBeTruthy();
|
||
|
|
expect(error.textContent).toContain('This field is required');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not show error when hasError is true but no errorMessage', () => {
|
||
|
|
fixture.componentRef.setInput('hasError', true);
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const error = fixture.nativeElement.querySelector('.form-field__error');
|
||
|
|
|
||
|
|
expect(error).toBeNull();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should apply error class when hasError is true', () => {
|
||
|
|
fixture.componentRef.setInput('hasError', true);
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const div = fixture.nativeElement.querySelector('.form-field');
|
||
|
|
|
||
|
|
expect(div.classList.contains('form-field--error')).toBe(true);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should show helper text when set', () => {
|
||
|
|
fixture.componentRef.setInput('helperText', 'Some helper text');
|
||
|
|
fixture.detectChanges();
|
||
|
|
|
||
|
|
const helper = fixture.nativeElement.querySelector('.form-field__helper');
|
||
|
|
|
||
|
|
expect(helper).toBeTruthy();
|
||
|
|
expect(helper.textContent).toContain('Some helper text');
|
||
|
|
});
|
||
|
|
|
||
|
|
it('should not show helper text by default', () => {
|
||
|
|
const helper = fixture.nativeElement.querySelector('.form-field__helper');
|
||
|
|
|
||
|
|
expect(helper).toBeNull();
|
||
|
|
});
|
||
|
|
});
|