feat(test): add tests for the electricity cost input

src/modules/common/FormControlValidator.tsx

@@ -134,7 +134,7 @@ export const FormControlValidator = ({
       />
       {error && (
         <FormHelperText
-          data-testid={`error-${label.toLowerCase()}-${error.toLowerCase()}`}
+          data-testid={`error-${label.toLowerCase().replace(/ /g, '-')}-${error.toLowerCase()}`}
           error
         >
           {t(error as FormErrorKeys, {

tests/player/HousePage.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from '@playwright/test';
+import { Locator, Page, expect } from '@playwright/test';
 
 import { MaterialEditorPage } from './MaterialEditorPage';
 import { WindowEditorPage } from './WindowEditorPage';
@@ -7,8 +7,13 @@ import { WindowEditorPage } from './WindowEditorPage';
 export class HousePage {
   readonly page: Page;
 
+  readonly electricityCost: Locator;
+
   constructor(page: Page) {
     this.page = page;
+    this.electricityCost = this.page.getByRole('spinbutton', {
+      name: 'Electricity Cost',
+    });
   }
 
   async goto(): Promise<void> {
@@ -44,4 +49,18 @@ export class HousePage {
 
     return new WindowEditorPage(this.page);
   }
+
+  async setElectricityCost(newElectricityCost: string): Promise<void> {
+    await this.electricityCost.click();
+    await this.electricityCost.fill(newElectricityCost);
+    await expect(this.electricityCost).toHaveValue(newElectricityCost);
+  }
+
+  async checkErrorIsVisible(
+    label: string,
+    type: 'Required' | 'Min' | 'Max',
+  ): Promise<void> {
+    const errorId = `error-${label.toLowerCase()}-${type.toLowerCase()}`;
+    await expect(this.page.getByTestId(errorId)).toBeVisible();
+  }
 }

tests/test-1.spec.ts

@@ -0,0 +1,43 @@
+import { expect, test } from '@playwright/test';
+
+import { HousePage } from './player/HousePage';
+
+test('should change electricity cost successfully', async ({ page }) => {
+  const housePage = new HousePage(page);
+  await housePage.goto();
+  await housePage.setElectricityCost('0.33');
+});
+
+test('should not accept text', async ({ page }) => {
+  const housePage = new HousePage(page);
+  await housePage.goto();
+  await housePage.electricityCost.click();
+  await housePage.electricityCost.pressSequentially('Not a number');
+  await expect(housePage.electricityCost).toHaveValue('');
+});
+
+test('should be required', async ({ page }) => {
+  const housePage = new HousePage(page);
+  await housePage.goto();
+  await housePage.electricityCost.click();
+  await housePage.electricityCost.clear();
+  await expect(housePage.electricityCost).toHaveValue('');
+
+  await housePage.checkErrorIsVisible('electricity-cost', 'Required');
+});
+
+test('should not be negative', async ({ page }) => {
+  const housePage = new HousePage(page);
+  await housePage.goto();
+  await housePage.setElectricityCost('-1');
+
+  await housePage.checkErrorIsVisible('electricity-cost', 'Min');
+});
+
+test('should not exceed max', async ({ page }) => {
+  const housePage = new HousePage(page);
+  await housePage.goto();
+  await housePage.setElectricityCost('5');
+
+  await housePage.checkErrorIsVisible('electricity-cost', 'Max');
+});