Skip to content
Snippets Groups Projects
Commit 6df805dd authored by Jan Zickermann's avatar Jan Zickermann
Browse files

OZG-4948 Use data-test-id for text-field instead of selector

parent 698cd84a
Branches
Tags
No related merge requests found
<div class="grid grid-cols-2">
<label [for]="inputId">{{ label }}</label>
<input type="text" [id]="inputId" [name]="inputId" [formControl]="fieldControl" />
</div>
<label class="grid grid-cols-2">
<span [attr.data-test-id]="'text-field-span-' + label | convertForDataTest">{{ label }}</span>
<input
[attr.data-test-id]="'text-field-input-' + label | convertForDataTest"
type="text"
[formControl]="fieldControl"
/>
</label>
......@@ -2,22 +2,26 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TextFieldComponent } from './text-field.component';
import { getElementFromFixture } from '@alfa-client/test-utils';
import { ReactiveFormsModule } from '@angular/forms';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { ConvertForDataTestPipe } from '@alfa-client/tech-shared';
describe('TextFieldComponent', () => {
let component: TextFieldComponent;
let fixture: ComponentFixture<TextFieldComponent>;
const inputId = 'testInputId';
const label = 'custom';
const span = getDataTestIdOf('text-field-span-' + label);
const input = getDataTestIdOf('text-field-input-' + label);
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [TextFieldComponent],
declarations: [TextFieldComponent, ConvertForDataTestPipe],
imports: [ReactiveFormsModule],
}).compileComponents();
fixture = TestBed.createComponent(TextFieldComponent);
component = fixture.componentInstance;
component.inputId = inputId;
component.label = label;
fixture.detectChanges();
});
......@@ -26,12 +30,7 @@ describe('TextFieldComponent', () => {
});
it('should use label', () => {
const label = 'custom';
component.label = label;
fixture.detectChanges();
const labelElement = getElementFromFixture(fixture, `label[for=${inputId}]`);
const labelElement = getElementFromFixture(fixture, span);
expect(labelElement.textContent).toBe(label);
});
......@@ -41,7 +40,7 @@ describe('TextFieldComponent', () => {
fixture.detectChanges();
const inputElement = getElementFromFixture(fixture, `#${inputId}`);
const inputElement = getElementFromFixture(fixture, input);
expect(inputElement.value).toBe(fieldText);
});
});
......@@ -6,8 +6,6 @@ import { FormControlEditorAbstractComponent } from 'libs/ui/src/lib/ui/editor/fo
templateUrl: './text-field.component.html',
})
export class TextFieldComponent extends FormControlEditorAbstractComponent {
@Input()
inputId: string;
@Input()
label: string;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment