fix(Input): prevent placeholder clipping, update tests

__tests__/Input.test.tsx

@@ -15,6 +15,7 @@ const testInputWithContext = (
     </div>
   </SearchContext.Provider>
 );
+
 describe(`Input`, () => {
   it(`should render correctly`, () => {
     const { container } = render(<Input />);
@@ -44,13 +45,56 @@ describe(`Input`, () => {
     expect(input.placeholder).toBe(``);
   });
 
+  it('should show the full placeholder when it is a sufficient width', async () => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 250, // Set this to a value greater than 230
+    });
+
+    const { container } = render(testInputWithContext(``, mockSetSearchVal));
+
+    const input = container.querySelector(`input`);
+    if (!input) {
+      throw new Error(`No input found`);
+    }
+
+    await act(async () => {
+      // Trigger the event
+      window.dispatchEvent(new Event(`resize`));
+    })
+
+    expect(input.placeholder).toBe(`type here to search`);
+  });
+
+  it('should show the partial placeholder when it is a insufficient width', async () => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      value: 200, // Set this to a value greater than 230
+    });
+
+    const { container } = render(testInputWithContext(``, mockSetSearchVal));
+
+    const input = container.querySelector(`input`);
+    if (!input) {
+      throw new Error(`No input found`);
+    }
+
+    await act(async () => {
+      // Trigger the event
+      window.dispatchEvent(new Event(`resize`));
+    })
+
+    expect(input.placeholder).toBe(`search tiles`);
+  });
+
   it(`should shrink on blur`, () => {
     const { container } = render(testInputWithContext(``, mockSetSearchVal));
 
     const input = container.querySelector(`input`);
     if (!input) {
       throw new Error(`No input found`);
     }
+
     act(() => {
       fireEvent.focus(input);
     });
@@ -59,7 +103,7 @@ describe(`Input`, () => {
       input.value = ``;
       fireEvent.blur(input);
     });
-    expect(input.placeholder).toBe(`type here to search`);
+    expect(input.placeholder).toBe(`search tiles`);
   });
 
   it(`should update the search value on change`, () => {

__tests__/__snapshots__/Input.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Input should render correctly 1`] = `
 <div>
   <input
     class="input "
-    placeholder="type here to search"
+    placeholder="search tiles"
     type="text"
     value=""
   />

__tests__/__snapshots__/ListOperations.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`ListOperations should render correctly with the grid format 1`] = `
     >
       <input
         class="input "
-        placeholder="type here to search"
+        placeholder="search tiles"
         type="text"
         value=""
       />
@@ -71,7 +71,7 @@ exports[`ListOperations should render correctly with the list format 1`] = `
     >
       <input
         class="input "
-        placeholder="type here to search"
+        placeholder="search tiles"
         type="text"
         value=""
       />

__tests__/__snapshots__/index.test.tsx.snap

@@ -52,7 +52,7 @@ exports[`Home should search correctly 1`] = `
           >
             <input
               class="input "
-              placeholder="type here to search"
+              placeholder="search tiles"
               type="text"
               value="abyssal sire"
             />

__tests__/index.test.tsx

@@ -9,7 +9,7 @@ describe(`Home`, () => {
     const { container, getByPlaceholderText } = render(
       <Home tileData={data} />,
     );
-    const input = getByPlaceholderText(`type here to search`);
+    const input = getByPlaceholderText(`search tiles`);
     act(() => {
       fireEvent.change(input, { target: { value: `abyssal sire` } });
     });