revert: textinput changes (#477)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.37
+
+- Revert `<TextInput />` changes
+
 ## v2.0.36
 
 - Fix `<TextInput />` ref

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.36",
+  "version": "2.0.37",
   "engines": {
     "node": ">=20.2.0",
     "npm": ">=10.2.0"

src/components/DateInput/__tests__/DateInput.spec.ts → src/components/DateInput/__tests__/DateInput.spec.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom';
-import { RenderResult, render } from '@testing-library/vue';
+import { render } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { translate } from '@/mixins';
 import DateInput from '../DateInput.vue';
@@ -57,24 +57,21 @@ describe('DateInput', () => {
 
     expect(emittedEvent).toHaveProperty('update:open');
     const length = emittedEvent['update:open'].length;
-    // @ts-expect-error No types.
     expect(emittedEvent['update:open'][length - 1][0]).toEqual(true); // last event should be an open event
   });
 
   describe('selecting a date', () => {
     let props;
-    let component: RenderResult;
-    let dateToSelect: HTMLButtonElement | null;
+    let component;
+    let dateToSelect;
     const RealDate = global.Date;
 
     beforeEach(() => {
       props = { ...initialProps, open: true };
 
       const oldGlobalDate = global.Date;
-      // @ts-expect-error Improper way of mocking dates.
       global.Date = vi.fn((...args) => {
         if (args.length) {
-          // @ts-expect-error Improper way of mocking dates.
           return new RealDate(...args);
         }
         return new Date(2021, 5, 14);
@@ -88,30 +85,30 @@ describe('DateInput', () => {
       // which ensures the minDate and maxDate default values are set correctly
       vi.useRealTimers();
       component = renderComponent({ props });
-      const { getByText } = component;
-      dateToSelect = getByText(23).closest('button');
+      const { queryByText } = component;
+      dateToSelect = queryByText(23).closest('button');
     });
 
     it('emits an update:open event with value false', async () => {
       const { emitted } = component;
 
-      if (dateToSelect) {
-        await userEvent.click(dateToSelect);
-      }
+      await userEvent.click(dateToSelect);
       const emittedEvent = emitted();
-      expect(emittedEvent).toHaveProperty('update:open', [[false]]);
+      expect(emittedEvent).toHaveProperty('update:open');
+
+      expect(emittedEvent['update:open'][0][0]).toEqual(false);
     });
 
     it('emits an update:modelValue event', async () => {
       const { emitted } = component;
 
-      if (dateToSelect) {
-        await userEvent.click(dateToSelect);
-      }
+      await userEvent.click(dateToSelect);
       const emittedEvent = emitted();
-      expect(emittedEvent).toHaveProperty('update:modelValue', [
-        [new Date(2022, 5, 23)]
-      ]);
+      expect(emittedEvent).toHaveProperty('update:modelValue');
+
+      expect(emittedEvent['update:modelValue'][0][0]).toEqual(
+        new Date(2022, 5, 23)
+      );
     });
   });
 
@@ -125,7 +122,7 @@ describe('DateInput', () => {
       const { getByText, getByTestId } = renderComponent({ props });
 
       const textInput = getByTestId('input-container');
-      expect(textInput).toHaveClass('!border-error-dark');
+      expect(textInput).toHaveClass('!border-red-600');
       const errorMessage = getByText('Date no longer valid');
       expect(errorMessage).toBeVisible();
     });