Added LWC tests

.eslintignore

@@ -0,0 +1,6 @@
+**/lwc/**/*.css
+**/lwc/**/*.html
+**/lwc/**/*.json
+**/lwc/**/*.svg
+**/lwc/**/*.xml
+.sfdx

.gitignore

@@ -3,4 +3,5 @@
 **/.eslintrc.json
 **/jsconfig.json
 .sfdx
-.vscode
+.vscode
+node_modules

README.md

@@ -18,6 +18,7 @@ The lookup component provides the following features:
 - single or multiple selection mode
 - client-side caching & request throttling
 - built-in server request rate limit mechanism
+- project is unit tested
 
 <p align="center">
     <img src="screenshots/selection-types.png" alt="Multiple or single entry lookup"/>

package.json

@@ -0,0 +1,21 @@
+{
+    "name": "sfdc-ui-lookup-lwc",
+    "private": true,
+    "version": "1.0.1",
+    "description": "Salesforce Lookup Component (Lightning Web Components version)",
+    "scripts": {
+        "lint": "./node_modules/.bin/eslint **/lwc/**",
+        "test": "npm run lint && npm run test:unit",
+        "test:unit": "lwc-jest"
+    },
+    "author": "Philippe Ozil",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/pozil/sfdc-ui-lookup-lwc"
+    },
+    "devDependencies": {
+        "@salesforce/eslint-config-lwc": "^0.3.0",
+        "@salesforce/lwc-jest": "^0.4.12",
+        "eslint": "^5.15.3"
+    }
+}

src/main/default/lwc/lookup/__tests__/lookupEventFiring.test.js

@@ -0,0 +1,58 @@
+import { createElement } from 'lwc';
+import Lookup from 'c/lookup';
+
+const SAMPLE_SEARCH_RAW = 'Sample search* ';
+const SAMPLE_SEARCH_CLEAN = 'sample search';
+const SAMPLE_SEARCH_ITEMS = [
+    {
+        id: 'id1',
+        icon: 'standard:default',
+        title: 'Sample item 1',
+        subtitle: 'sub1'
+    },
+    {
+        id: 'id2',
+        icon: 'standard:default',
+        title: 'Sample item 2',
+        subtitle: 'sub2'
+    }
+];
+
+describe('c-lookup event fires', () => {
+    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('search event fires', () => {
+        jest.useFakeTimers();
+
+        // Create element with mock search handler
+        const mockSearchFn = jest.fn();
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.addEventListener('search', mockSearchFn);
+        element.isMultiEntry = true;
+        element.selection = SAMPLE_SEARCH_ITEMS;   
+        document.body.appendChild(element);
+
+        // Set search term and force input change
+        const searchInput = element.shadowRoot.querySelector('input');
+        searchInput.value = SAMPLE_SEARCH_RAW;
+        searchInput.dispatchEvent(new CustomEvent('input'));
+
+        // Disable search throttling
+        jest.runAllTimers();
+
+        // Check fired search event
+        expect(mockSearchFn).toHaveBeenCalledTimes(1);
+        const searchEvent = mockSearchFn.mock.calls[0][0];
+        expect(searchEvent.detail).toEqual({
+            searchTerm: SAMPLE_SEARCH_CLEAN,
+            selectedIds: ['id1', 'id2']
+        });
+    });
+});

src/main/default/lwc/lookup/__tests__/lookupEventHandling.test.js

@@ -0,0 +1,59 @@
+import { createElement } from 'lwc';
+import Lookup from 'c/lookup';
+
+const SAMPLE_SEARCH_ITEMS = [
+    {
+        id: 'id1',
+        icon: 'standard:default',
+        title: 'Sample item 1',
+        subtitle: 'sub1'
+    },
+    {
+        id: 'id2',
+        icon: 'standard:default',
+        title: 'Sample item 2',
+        subtitle: 'sub2'
+    }
+];
+
+
+describe('c-lookup event handling', () => {
+    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('handleClearSingleSelection works', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.isMultiEntry = false;
+        element.selection = [ SAMPLE_SEARCH_ITEMS[0] ];
+        document.body.appendChild(element);
+
+        // Clear selection
+        const clearSelButton = element.shadowRoot.querySelector('button');
+        clearSelButton.click();
+        // Check selection
+        expect(element.selection.length).toBe(0);
+    });
+
+    it('handleClearSelectedItem works', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.isMultiEntry = true;
+        element.selection = SAMPLE_SEARCH_ITEMS;
+        document.body.appendChild(element);
+
+        // Remove a selected item
+        const selPills = element.shadowRoot.querySelectorAll('lightning-pill');
+        selPills[0].dispatchEvent(new CustomEvent('remove'));
+        // Check selection
+        expect(element.selection.length).toBe(1);
+    });
+});

src/main/default/lwc/lookup/__tests__/lookupExposedFunctions.test.js

@@ -0,0 +1,53 @@
+import { createElement } from 'lwc';
+import Lookup from 'c/lookup';
+
+const SAMPLE_SEARCH_ITEMS = [
+    {
+        id: 'id1',
+        icon: 'standard:default',
+        title: 'Sample item 1',
+        subtitle: 'sub1'
+    },
+    {
+        id: 'id2',
+        icon: 'standard:default',
+        title: 'Sample item 2',
+        subtitle: 'sub2'
+    }
+];
+
+
+describe('c-lookup exposed functions', () => {
+    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('getSelection returns correct selection', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.selection = SAMPLE_SEARCH_ITEMS;
+
+        // Verify selection
+        const selection = element.getSelection();
+        expect(selection.length).toBe(2);
+    });
+
+    it('setSearchResults renders correct results', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.setSearchResults(SAMPLE_SEARCH_ITEMS);
+        document.body.appendChild(element);
+
+        // Query for rendered list items
+        const listItemEls = element.shadowRoot.querySelectorAll('li');
+        expect(listItemEls.length).toBe(2);
+        expect(listItemEls[0].textContent).toBe('Sample item 1sub1');
+    });
+});

src/main/default/lwc/lookup/__tests__/lookupRendering.test.js

@@ -0,0 +1,92 @@
+import { createElement } from 'lwc';
+import Lookup from 'c/lookup';
+
+
+describe('c-lookup rendering', () => {
+    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('renders without any list items as default', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        document.body.appendChild(element);
+
+        // Query for rendered list items
+        const listItemEls = element.shadowRoot.querySelectorAll('li');
+        expect(listItemEls.length).toBe(0);
+    });
+
+    it('renders label', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.label = 'Sample Lookup';
+        document.body.appendChild(element);
+
+        // Verify label
+        const detailEl = element.shadowRoot.querySelector('label');
+        expect(detailEl.textContent).toBe('Sample Lookup');
+    });
+
+    it('renders single entry (no selection)', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.isMultiEntry = false;
+        document.body.appendChild(element);
+
+        // Verify selected icon
+        const selIcon = element.shadowRoot.querySelector('lightning-icon');
+        expect(selIcon.alternativeText).toBe('Selected item icon');
+        // Verify clear selection button
+        const clearSelButton = element.shadowRoot.querySelector('button');
+        expect(clearSelButton.title).toBe('Remove selected option');
+        // Verify result list is NOT rendered
+        const selList = element.shadowRoot.querySelectorAll('ul.slds-listbox_inline');
+        expect(selList.length).toBe(0);
+    });
+
+    it('renders multi entry (no selection)', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.isMultiEntry = true;
+        document.body.appendChild(element);
+
+        // Verify selected icon is NOT rendered
+        const selIcon = element.shadowRoot.querySelectorAll('lightning-icon');
+        expect(selIcon.length).toBe(1);
+        // Verify clear selection button is NOT rendered
+        const clearSelButton = element.shadowRoot.querySelectorAll('button');
+        expect(clearSelButton.length).toBe(0);
+        // Verify result list is rendered
+        const selList = element.shadowRoot.querySelectorAll('ul.slds-listbox_inline');
+        expect(selList.length).toBe(1);
+    });
+
+    it('renders errors', () => {
+        // Create element
+        const element = createElement('c-lookup', {
+            is: Lookup
+        });
+        element.errors = [
+            {id: 'e1', message: 'Sample error 1'},
+            {id: 'e2', message: 'Sample error 2'}
+        ];
+        document.body.appendChild(element);
+
+        // Verify errors
+        const errors = element.shadowRoot.querySelectorAll('label.form-error');
+        expect(errors.length).toBe(2);
+        expect(errors[0].textContent).toBe('Sample error 1');
+    });
+});