test: add tests on autocompleteinput styleguide

vtex · Jul 31, 2024 · 484d49a · 484d49a
1 parent 8e6797c
commit 484d49a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/react/components/AutocompleteInput/__snapshots__/index.test.tsx.snap b/react/components/AutocompleteInput/__snapshots__/index.test.tsx.snap
@@ -47,6 +47,53 @@ exports[`AutocompleteInput should render a regular version of search bar if size
 </DocumentFragment>
 `;
 
+exports[`AutocompleteInput should render with a 300px max height 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <label
+        class="relative w-100"
+      >
+        <div
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-regular"
+        >
+          <input
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
+            placeholder=""
+            value=""
+          />
+        </div>
+      </label>
+      <button
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+    <div
+      class="relative"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`AutocompleteInput should render with a large size bar 1`] = `
 <DocumentFragment>
   <div

diff --git a/react/components/AutocompleteInput/index.test.tsx b/react/components/AutocompleteInput/index.test.tsx
@@ -29,6 +29,31 @@ describe('AutocompleteInput', () => {
     expect(result).toMatchSnapshot()
   })
 
+  it('should render with a 300px max height', () => {
+    const options = {
+      onSelect: () => `''`,
+      loading: false,
+      value: [],
+      maxHeight: 300,
+    }
+
+    const input = {
+      onChange: () => `''`,
+      onSearch: () => `''`,
+      onClear: () => `''`,
+      placeholder: '',
+      value: '',
+    }
+
+    const { asFragment } = render(
+      <AutocompleteInput input={input} options={options} />
+    )
+
+    const result = asFragment()
+
+    expect(result).toMatchSnapshot()
+  })
+
   it('should render with a regular size bar', () => {
     const options = {
       onSelect: () => `''`,
@@ -108,7 +133,7 @@ describe('AutocompleteInput', () => {
       onSelect: () => `''`,
       loading: false,
       value: [],
-      size: 'medium',
+      size: 'regular',
     }
 
     const input = {