Rudimentary test for container

src/lib/components/__snapshots__/container.test.jsx.snap

@@ -0,0 +1,52 @@
+// Vitest Snapshot v1
+
+exports[`Container > Component renders correctly 1`] = `
+<div
+  className="query-container-class"
+  style={
+    {
+      "position": "relative",
+    }
+  }
+>
+  <input
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="query-class"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onInput={[Function]}
+    onKeyDown={[Function]}
+    placeholder="Type something fruity"
+    spellCheck="false"
+    style={
+      {
+        "backgroundColor": "transparent",
+        "position": "relative",
+        "zIndex": 1,
+      }
+    }
+    tabIndex="1"
+    type="text"
+  />
+  <input
+    autoCapitalize="off"
+    autoComplete="off"
+    autoCorrect="off"
+    className="typeahead-class"
+    readOnly="readonly"
+    spellCheck="false"
+    style={
+      {
+        "left": 0,
+        "position": "absolute",
+        "top": 0,
+        "zIndex": 0,
+      }
+    }
+    tabIndex="-1"
+    type="text"
+  />
+</div>
+`;

src/lib/components/container.test.jsx

@@ -1,38 +1,51 @@
-// import React from 'react'
-// import renderer from 'react-test-renderer'
+import React from 'react'
+import renderer from 'react-test-renderer'
 
-// import { vi, describe, expect, test } from 'vitest'
-// import { StateContextProvider } from '../context/turnstone'
-// import Container from './container'
-// import fruits from '../../data'
+import { vi, describe, expect, test } from 'vitest'
+import { StateContextProvider } from '../context/state'
+import Container from './container'
+import fruits from '../../data'
 
-// vi.mock('./items', () => ({ default: () => 'Items' }))
+vi.mock('./items', () => ({ default: () => 'Items' }))
+vi.mock('./hooks/containerEffects', () => ({
+  useItemsState: vi.fn(),
+  useAutoFocus: vi.fn(),
+  useQueryChange: vi.fn(),
+  useHighlight: vi.fn(),
+  useSelected: vi.fn()
+}))
+vi.mock('./hooks/useData', () => ({ default: vi.fn().mockImplementation(() => [1,2,3,4,5]) }))
+vi.mock('use-debounce', vi.fn().mockImplementation(() => ({
+  useDebounce: (query) => [query]
+})))
 
-// describe('Container', () => {
-//   test('Component renders correctly', () => {
-//     const customStyles = {
-//       queryContainer: 'query-container-class',
-//       query: 'query-class',
-//       typeahead: 'typeahead-class',
-//       x: 'x-class'
-//     }
+describe('Container', () => {
+  test('Component renders correctly', () => {
+    const customStyles = {
+      queryContainer: 'query-container-class',
+      query: 'query-class',
+      typeahead: 'typeahead-class',
+      x: 'x-class'
+    }
+    const props = {
+      autoFocus: true,
+      data: fruits,
+      dataSearchType: 'startswith',
+      debounceWait: 0,
+      maxItems: 10,
+      noItemsMessage: 'No matching fruit found',
+      placeholder: 'Type something fruity',
+      styles: customStyles
+    }
 
-//     const component = renderer.create(
-//       <StateContextProvider styles={customStyles}>
-//        <Container
-//          autoFocus={true}
-//          data={fruits}
-//          dataSearchType={'startswith'}
-//          debounceWait={0}
-//          maxItems={10}
-//          noItemsMessage={'No matching fruit found'}
-//          placeholder={'Type something fruity'}
-//         />
-//       </StateContextProvider>
-//     )
+    const component = renderer.create(
+      <StateContextProvider {...props}>
+       <Container {...props} />
+      </StateContextProvider>
+    )
 
-//     const tree = component.toJSON()
+    const tree = component.toJSON()
 
-//     expect(tree).toMatchSnapshot()
-//   })
-// })
+    expect(tree).toMatchSnapshot()
+  })
+})