Revert functional changes and use buttons instead

Author: ddrosario

client/src/Components/Counter.js

@@ -28,22 +28,24 @@ function Counter({ label, min, max, name, onChange, value, isEditing }) {
       <label className="counter__label" htmlFor={name}>
         {label}
       </label>
-      <div className="counter__control">
-        <button type="button" className="usa-button counter__button counter__button--decrement" onClick={handleDecrement}>
+      <div className="counter__control" data-testid={`counter_${name}`}>
+        <button
+          data-testid="decrement"
+          type="button"
+          className="usa-button counter__button counter__button--decrement"
+          onClick={handleDecrement}
+        >
           &minus;
         </button>
         {!Number.isNaN(value) && (
-          <input
-            className="usa-input usa-input--small counter__input"
-            type="text"
-            readOnly={!isEditing}
-            id={name}
-            name={name}
-            value={value}
-            onChange={onChange}
-          />
+          <input className="usa-input usa-input--small counter__input" type="text" readOnly id={name} name={name} value={value} />
         )}
-        <button type="button" className="usa-button counter__button counter__button--increment" onClick={handleIncrement}>
+        <button
+          data-testid="increment"
+          type="button"
+          className="usa-button counter__button counter__button--increment"
+          onClick={handleIncrement}
+        >
           +
         </button>
       </div>

client/src/ER/Beds.js

@@ -17,7 +17,7 @@ function Beds({ statusUpdate, onStatusUpdate, incomingRingdownsCount }) {
 
   function handleChange(event) {
     const newStatusUpdate = new HospitalStatus(statusUpdate);
-    newStatusUpdate[event.target.name] = parseInt(event.target.value, 10) || 0;
+    newStatusUpdate[event.target.name] = parseInt(event.target.value, 10);
     onStatusUpdate(newStatusUpdate);
   }
 

e2e/tests/erStatus.spec.js

@@ -2,6 +2,9 @@ const { test, expect } = require('@playwright/test');
 
 test.describe('ER status', () => {
   test.describe.configure({ mode: 'serial' });
+  let erBeds = 0;
+  let behaviorBeds = 0;
+
   test('Update ER status', async ({ context }) => {
     const appPage = await context.newPage();
     await appPage.goto('/');
@@ -15,8 +18,20 @@ test.describe('ER status', () => {
     await expect(appPage.getByText(/available beds/i)).toBeVisible();
     await expect(appPage.getByText(/er conditions/i)).toBeVisible();
     await appPage.getByRole('button', { name: /update hospital/i }).click();
-    await appPage.getByRole('textbox', { name: /er beds/i }).fill('5');
-    await appPage.getByRole('textbox', { name: /behavioral beds/i }).fill('8');
+    const erBedsRow = appPage.getByTestId('counter_openEdBedCount');
+    erBeds = parseInt(await erBedsRow.getByRole('textbox').inputValue(), 10);
+    for (let i = 0; i < 5; i++) {
+      await erBedsRow.getByRole('button', { name: '+' }).click();
+      erBeds += 1;
+    }
+
+    const behaviorNode = appPage.getByLabel(/behavioral beds/i);
+    const behaviorBedsRow = appPage.getByTestId('counter_openPsychBedCount');
+    behaviorBeds = parseInt(await behaviorNode.inputValue(), 10);
+    for (let i = 0; i < 8; i++) {
+      await behaviorBedsRow.getByRole('button', { name: '+' }).click();
+      behaviorBeds += 1;
+    }
     await appPage.locator('#additionalNotes').fill('scanner broke');
     await appPage.getByRole('button', { name: /confirm/i }).click();
   });
@@ -31,8 +46,8 @@ test.describe('ER status', () => {
     await expect(appPage).toHaveURL('/ems');
     await appPage.getByRole('button', { name: /hospital info/i }).click();
     const ucsfRow = appPage.locator('.hospitalstatusrow_container').filter({ hasText: /ucsf parnassus/i });
-    await expect(ucsfRow.locator('.hospitalstatusrow__data').filter({ hasText: '5' })).toBeVisible();
-    await expect(ucsfRow.locator('.hospitalstatusrow__data').filter({ hasText: '8' })).toBeVisible();
+    await expect(ucsfRow.locator('.hospitalstatusrow__data').filter({ hasText: `${erBeds}` })).toBeVisible();
+    await expect(ucsfRow.locator('.hospitalstatusrow__data').filter({ hasText: `${behaviorBeds}` })).toBeVisible();
     await expect(ucsfRow.getByText('scanner broke')).toBeVisible();
     await context.close();
   });
@@ -50,8 +65,22 @@ test.describe('ER status', () => {
     await expect(appPage.getByText(/available beds/i)).toBeVisible();
     await expect(appPage.getByText(/er conditions/i)).toBeVisible();
     await appPage.getByRole('button', { name: /update hospital/i }).click();
-    await appPage.getByRole('textbox', { name: /er beds/i }).fill('0');
-    await appPage.getByRole('textbox', { name: /behavioral beds/i }).fill('0');
+    const erBedsRow = appPage.getByTestId('counter_openEdBedCount');
+    erBeds = parseInt(await erBedsRow.getByRole('textbox').inputValue(), 10);
+    while (erBeds >= 0) {
+      await erBedsRow.getByTestId('decrement').click();
+      erBeds--;
+    }
+    const erBedValue = await appPage.getByRole('textbox', { name: /er beds/i }).inputValue();
+    expect(erBedValue).toBe('0');
+
+    const behaviorBedsRow = appPage.getByTestId('counter_openPsychBedCount');
+    behaviorBeds = parseInt(await behaviorBedsRow.getByRole('textbox').inputValue(), 10);
+    while (behaviorBeds >= 0) {
+      await behaviorBedsRow.getByTestId('decrement').click();
+      behaviorBeds--;
+    }
+    expect(await appPage.getByRole('textbox', { name: /behavioral beds/i }).inputValue()).toBe('0');
     await appPage.locator('#additionalNotes').fill('');
     await appPage.getByRole('button', { name: /confirm/i }).click();
   });