From 6df805dd373fab074003afcb01e4b76e7f0783b3 Mon Sep 17 00:00:00 2001
From: "Zickermann, Jan" <jan.zickermann@dataport.de>
Date: Wed, 28 Feb 2024 16:38:07 +0100
Subject: [PATCH] OZG-4948 Use data-test-id for text-field instead of selector
---
.../text-field/text-field.component.html | 12 ++++++++----
.../text-field/text-field.component.spec.ts | 19 +++++++++----------
.../shared/text-field/text-field.component.ts | 2 --
3 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
index d2a3e2db4b..c11e2cfdb7 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.html
@@ -1,4 +1,8 @@
-<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>
diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
index a625d9aa24..27baea4a38 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.spec.ts
@@ -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);
});
});
diff --git a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
index 8cb8bebe63..92abc83d94 100644
--- a/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
+++ b/alfa-client/libs/admin-settings/src/lib/shared/text-field/text-field.component.ts
@@ -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;
}
--
GitLab