From ff48c0cd45cdd6b7afeb5e853c4019a34edb0acc Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 28 Nov 2020 12:36:40 +0100
Subject: [PATCH] Added DomainSelector test

---
 src/domains/DomainSelector.tsx       |  2 +-
 test/domains/DomainSelector.test.tsx | 42 ++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 test/domains/DomainSelector.test.tsx

diff --git a/src/domains/DomainSelector.tsx b/src/domains/DomainSelector.tsx
index fe3c6780..ec53331e 100644
--- a/src/domains/DomainSelector.tsx
+++ b/src/domains/DomainSelector.tsx
@@ -21,7 +21,7 @@ import './DomainSelector.scss';
 
 export interface DomainSelectorProps extends Omit<InputProps, 'onChange'> {
   value?: string;
-  onChange: (domain?: string) => void;
+  onChange: (domain: string) => void;
 }
 
 interface DomainSelectorConnectProps extends DomainSelectorProps {
diff --git a/test/domains/DomainSelector.test.tsx b/test/domains/DomainSelector.test.tsx
new file mode 100644
index 00000000..2e7a3d2f
--- /dev/null
+++ b/test/domains/DomainSelector.test.tsx
@@ -0,0 +1,42 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Mock } from 'ts-mockery';
+import { DropdownItem, DropdownMenu, InputGroup } from 'reactstrap';
+import { DomainSelector } from '../../src/domains/DomainSelector';
+import { DomainsList } from '../../src/domains/reducers/domainsList';
+import { ShlinkDomain } from '../../src/utils/services/types';
+
+describe('<DomainSelector />', () => {
+  let wrapper: ShallowWrapper;
+  const domainsList = Mock.of<DomainsList>({
+    domains: [
+      Mock.of<ShlinkDomain>({ domain: 'foo.com' }),
+      Mock.of<ShlinkDomain>({ domain: 'bar.com' }),
+    ],
+  });
+
+  beforeEach(() => {
+    wrapper = shallow(<DomainSelector domainsList={domainsList} listDomains={jest.fn()} onChange={jest.fn()} />);
+  });
+
+  afterEach(jest.clearAllMocks);
+  afterEach(() => wrapper.unmount());
+
+  it('shows dropdown by default', () => {
+    const input = wrapper.find(InputGroup);
+    const dropdown = wrapper.find(DropdownMenu);
+
+    expect(input).toHaveLength(0);
+    expect(dropdown).toHaveLength(1);
+    expect(dropdown.find(DropdownItem)).toHaveLength(4);
+  });
+
+  it('allows to toggle between dropdown and input', () => {
+    wrapper.find(DropdownItem).last().simulate('click');
+    expect(wrapper.find(InputGroup)).toHaveLength(1);
+    expect(wrapper.find(DropdownMenu)).toHaveLength(0);
+
+    wrapper.find('.domains-dropdown__back-btn').simulate('click');
+    expect(wrapper.find(InputGroup)).toHaveLength(0);
+    expect(wrapper.find(DropdownMenu)).toHaveLength(1);
+  });
+});