test: begin adding tests to frontend

packages/@best/frontend/src/modules/component/dropdown/__tests__/__snapshots__/dropdown.test.js.snap

@@ -0,0 +1,119 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component-dropdown display correct text and data-index with one selected item 1`] = `
+<component-dropdown>
+  #shadow-root(open)
+    <div
+      class="control closed"
+    >
+      <div
+        class="selected"
+      >
+        <img
+          src="/resources/arrow.svg"
+        />
+        <div
+          class="selected-item"
+          data-index="0"
+        >
+          First Selected Item
+        </div>
+      </div>
+      <div
+        class="items"
+      >
+        <div
+          class="item"
+          data-index="0"
+        >
+          First Selected Item
+        </div>
+        <div
+          class="item"
+          data-index="1"
+        >
+          Second Item
+        </div>
+        <div
+          class="item"
+          data-index="2"
+        >
+          Third Item
+        </div>
+      </div>
+    </div>
+</component-dropdown>
+`;
+
+exports[`component-dropdown displays items in correct order 1`] = `
+<component-dropdown>
+  #shadow-root(open)
+    <div
+      class="control closed"
+    >
+      <div
+        class="items"
+      >
+        <div
+          class="item"
+          data-index="0"
+        >
+          First Selected Item
+        </div>
+        <div
+          class="item"
+          data-index="1"
+        >
+          Second Item
+        </div>
+        <div
+          class="item"
+          data-index="2"
+        >
+          Third Item
+        </div>
+      </div>
+    </div>
+</component-dropdown>
+`;
+
+exports[`component-dropdown displays no items when none are provided 1`] = `
+<component-dropdown>
+  #shadow-root(open)
+    <div
+      class="control closed"
+    />
+</component-dropdown>
+`;
+
+exports[`component-dropdown displays no selected items when none are provided 1`] = `
+<component-dropdown>
+  #shadow-root(open)
+    <div
+      class="control closed"
+    >
+      <div
+        class="items"
+      >
+        <div
+          class="item"
+          data-index="0"
+        >
+          First Selected Item
+        </div>
+        <div
+          class="item"
+          data-index="1"
+        >
+          Second Item
+        </div>
+        <div
+          class="item"
+          data-index="2"
+        >
+          Third Item
+        </div>
+      </div>
+    </div>
+</component-dropdown>
+`;

packages/@best/frontend/src/modules/component/dropdown/__tests__/dropdown.test.js

@@ -0,0 +1,165 @@
+import { createElement } from 'lwc';
+import Dropdown from 'component/dropdown';
+
+describe('component-dropdown', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('display correct text and data-index with one selected item', () => {
+        const selectedItem = {
+            title: 'First Selected Item',
+            id: 'item-one'
+        }
+
+        const items = [
+            selectedItem,
+            {
+                title: 'Second Item',
+                id: 'item-two'
+            }, {
+                title: 'Third Item',
+                id: 'item-three'
+            }
+        ]
+
+        const element = createElement('component-dropdown', { is: Dropdown })
+        element.options = {
+            multiple: false,
+            items,
+            selectedItems: [
+                selectedItem
+            ]
+        }
+
+        document.body.appendChild(element)
+
+        return Promise.resolve().then(() => {
+            expect(element).toMatchSnapshot();
+            const selectedItemElement = element.shadowRoot.querySelector('.selected-item');
+            expect(selectedItemElement.textContent).toBe(selectedItem.title);
+            expect(parseInt(selectedItemElement.dataset.index, 10)).toBe(0);
+        })
+    })
+
+    it('displays no selected items when none are provided', () => {
+        const items = [
+            {
+                title: 'First Selected Item',
+                id: 'item-one'
+            },
+            {
+                title: 'Second Item',
+                id: 'item-two'
+            }, {
+                title: 'Third Item',
+                id: 'item-three'
+            }
+        ]
+
+        const element = createElement('component-dropdown', { is: Dropdown })
+        element.options = {
+            multiple: false,
+            items,
+            selectedItems: []
+        }
+
+        document.body.appendChild(element)
+
+        return Promise.resolve().then(() => {
+            expect(element).toMatchSnapshot();
+            const allSelectedItemElements = element.shadowRoot.querySelectorAll('.selected-item');
+            expect(allSelectedItemElements).toHaveLength(0);
+        })
+    })
+
+    it('displays no items when none are provided', () => {
+        const element = createElement('component-dropdown', { is: Dropdown })
+        element.options = {
+            multiple: false,
+            items: [],
+            selectedItems: []
+        }
+
+        document.body.appendChild(element)
+
+        return Promise.resolve().then(() => {
+            expect(element).toMatchSnapshot();
+            const allItemElements = element.shadowRoot.querySelectorAll('.item');
+            expect(allItemElements).toHaveLength(0);
+        })
+    })
+
+    it('displays items in correct order', () => {
+        const items = [
+            {
+                title: 'First Selected Item',
+                id: 'item-one'
+            },
+            {
+                title: 'Second Item',
+                id: 'item-two'
+            }, {
+                title: 'Third Item',
+                id: 'item-three'
+            }
+        ]
+
+        const element = createElement('component-dropdown', { is: Dropdown })
+        element.options = {
+            multiple: false,
+            items,
+            selectedItems: []
+        }
+
+        document.body.appendChild(element)
+
+        return Promise.resolve().then(() => {
+            expect(element).toMatchSnapshot();
+            const allItemElements = element.shadowRoot.querySelectorAll('.item');
+            expect(allItemElements).toHaveLength(items.length);
+
+            items.forEach((item, index) => {
+                const itemElement = allItemElements[index];
+                expect(itemElement.textContent).toBe(item.title);
+                expect(parseInt(itemElement.dataset.index, 10)).toBe(index);
+            })
+        })
+    })
+
+    it('fires selection event when item is clicked', () => {
+        const items = [
+            {
+                title: 'First Selected Item',
+                id: 'item-one'
+            },
+            {
+                title: 'Second Item',
+                id: 'item-two'
+            }, {
+                title: 'Third Item',
+                id: 'item-three'
+            }
+        ]
+
+        const element = createElement('component-dropdown', { is: Dropdown })
+        element.options = {
+            multiple: false,
+            items,
+            selectedItems: []
+        }
+        const evtListenerMock = jest.fn()
+        element.addEventListener('selection', evtListenerMock)
+
+        document.body.appendChild(element)
+
+        return Promise.resolve().then(() => {
+            const itemElement = element.shadowRoot.querySelector('.item');
+            itemElement.click();
+            expect(evtListenerMock).toHaveBeenCalledTimes(1);
+        })
+    })
+})