| <!DOCTYPE html> |
| <title>userInput</title> |
| <meta charset="utf-8"> |
| <link rel="import" href="../chops-user-input.html"> |
| <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| <script src="../../web-component-tester/browser.js"></script> |
| <script src="../../iron-test-helpers/mock-interactions.js"></script> |
| |
| <test-fixture id="chops-user-input-test"> |
| <template> |
| <chops-user-input></chops-user-input> |
| </template> |
| </test-fixture> |
| |
| <script> |
| 'use strict'; |
| |
| suite('chops-user-input', function() { |
| let element; |
| setup(function() { |
| element = fixture('chops-user-input-test'); |
| element.suggestions = ['user1', 'user2', 'user3', 'user4']; |
| }); |
| |
| test('methods', function(done) { |
| flush(function() { |
| // Test _toggleDropdown after focus. |
| MockInteractions.focus(element); |
| element._toggleDropdown(); |
| let dropdownDiv = element.$.dropdown.$.dropdown; |
| assert.isFalse(dropdownDiv.classList.contains('hidden')); |
| |
| // Test _toggleDropdown after blur. |
| MockInteractions.blur(element); |
| element._toggleDropdown(); |
| dropdownDiv = element.$.dropdown.$.dropdown; |
| assert.isTrue(dropdownDiv.classList.contains('hidden')); |
| |
| // Test _saveUser |
| element._saveUser({detail: {selectedUser: 'user1'}}); |
| assert.deepEqual(element.selectedUsers, ['user1']); |
| |
| element._saveUser({detail: {selectedUser: 'user2'}}); |
| assert.deepEqual(element.selectedUsers, ['user1', 'user2']); |
| |
| // Test _removeUser |
| element._removeUser({detail: {removedUser: 'user2'}}); |
| assert.deepEqual(element.selectedUsers, ['user1']); |
| |
| // Test _updateInputDisabled |
| element.multiple = false; |
| element._inputDisabled = false; |
| element._updateInputDisabled(1); |
| assert.isTrue(element._inputDisabled); |
| |
| element.multiple = false; |
| element._inputDisabled = false; |
| element._updateInputDisabled(0); |
| assert.isFalse(element._inputDisabled) |
| |
| element.multiple = true; |
| element._inputDisabled = false; |
| element._updateInputDisabled(1); |
| assert.isFalse(element._inputDisabled); |
| |
| done(); |
| }); |
| }); |
| |
| test('_toggleDropdown-called', function(done) { |
| let toggleStub = sinon.stub(element, '_toggleDropdown'); |
| |
| flush(function() { |
| MockInteractions.focus(element); |
| sinon.assert.calledOnce(toggleStub); |
| |
| MockInteractions.blur(element); |
| sinon.assert.calledTwice(toggleStub); |
| |
| done(); |
| }); |
| }); |
| |
| test('_updateInputDisabled-called', function(done) { |
| let updateStub = sinon.stub(element, '_updateInputDisabled'); |
| |
| flush(function() { |
| element.selectedUsers = [{userId: 'newlySelectedUser'}] |
| sinon.assert.calledOnce(updateStub); |
| |
| done(); |
| }); |
| }); |
| |
| test('_saveUser-called', function(done) { |
| let saveStub = sinon.stub(element, '_saveUser'); |
| |
| flush(function() { |
| element.$.dropdown.dispatchEvent( |
| new CustomEvent('user-selected', {detail: {selectedUser: 'user2'}})); |
| sinon.assert.calledOnce(saveStub); |
| |
| done(); |
| }); |
| }); |
| |
| test('_removeUser-called', function(done) { |
| let removeStub = sinon.stub(element, '_removeUser'); |
| element.selectedUsers = [{userId: 'user1'}] |
| |
| flush(function() { |
| element.shadowRoot.querySelector('chops-user-id').dispatchEvent( |
| new CustomEvent('remove-user', {detail: {removedUser: {userId:'user1'}}})); |
| sinon.assert.calledOnce(removeStub); |
| |
| done(); |
| }); |
| }); |
| |
| }); |
| </script> |
