From 2ebd50a2563c331822297d0848af3aed9889d607 Mon Sep 17 00:00:00 2001
From: Serban Ghita <serbanghita@gmail.com>
Date: Sun, 17 Dec 2023 23:19:49 +0200
Subject: [PATCH] Moved input, radio and select tests.

---
 README.md                       |  20 +++-
 test/integration/input.test.ts  | 170 -----------------------------
 test/integration/radio.test.ts  |  29 -----
 test/integration/select.test.ts |  78 --------------
 test/manual/playground.html     |  88 +++++++--------
 test/unit/checkbox.test.ts      |   2 +-
 test/unit/input.test.ts         | 184 ++++++++++++++++++++++++++++++++
 test/unit/radio.test.ts         |  45 ++++++++
 test/unit/select.test.ts        | 111 +++++++++++++++++++
 9 files changed, 404 insertions(+), 323 deletions(-)
 delete mode 100644 test/integration/input.test.ts
 delete mode 100644 test/integration/radio.test.ts
 delete mode 100644 test/integration/select.test.ts
 create mode 100644 test/unit/input.test.ts
 create mode 100644 test/unit/radio.test.ts
 create mode 100644 test/unit/select.test.ts

diff --git a/README.md b/README.md
index f6ba66b..0ae52f0 100644
--- a/README.md
+++ b/README.md
@@ -53,10 +53,28 @@ Resulted value:
 In case of an error like non-existing form, invalid selector, or no elements `formToObject` will return `undefined` for every valid
 cases the method will return an object `{}`.
 
+## Options
+
+`includeEmptyValuedElements` (`boolean`, default `false`)
+
+Return field names as keys with empty value `""` instead of just ignoring them.
+
+`w3cSuccessfulControlsOnly` (`boolean`, default `false`)
+
+TBA
+
+`selectNameWithEmptyBracketsReturnsArray` (`boolean`, default `true`)
+
+`<select>` field names like `name="select[]"` always return an array `[a,b]` instead or array of arrays `[0: [a,b]]`.
+
+`checkBoxNameWithEmptyBracketsReturnsArray` (`boolean`, default `true`)
+
+`<input>` checkboxes with field names like `name=checkbox[]` always return an array `[a,b]` instead or array of arrays `[0: [a,b]]`.
+
 ## Browser support
 
 IE 8, Firefox 3.5, Chrome, Safari, Opera 10, every mobile browser.
 
 ## Example
 
-![](http://serbanghita.github.io/formToObject.js/formToObj-demo.png)
\ No newline at end of file
+![](http://serbanghita.github.io/form-to-object/formToObj-demo.png)
\ No newline at end of file
diff --git a/test/integration/input.test.ts b/test/integration/input.test.ts
deleted file mode 100644
index 7417211..0000000
--- a/test/integration/input.test.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import {screen} from '@testing-library/dom'
-import formToObject from "../../src";
-import {readIntegrationFixture} from "../helpers";
-
-describe('input', () => {
-  describe('An HTML form with a text field', () => {
-    test('searched by a valid element DOM element should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-text.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'name':'Serban'});
-    });
-  });
-
-  describe('An HTML form with a color field', () =>{
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-color.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'myColor':'#ff0000'});
-    });
-  });
-
-  describe('An HTML form with a date field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-date.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'bday':'2012-07-17'});
-    });
-  });
-
-  describe('An HTML form with a datetime field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-datetime.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'bdaytime':'2012-07-17 08:57:00'});
-    });
-  });
-
-  describe('An HTML form with a datetime-local field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-datetime-local.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'bdaytimeLocal':'2014-08-30T02:03'});
-    });
-  });
-
-  describe('An HTML form with an email field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-email.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'email':'serbanghita@gmail.com'});
-    });
-  });
-
-  describe('An HTML form with a month field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-month.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'bdaymonth':'2014-07'});
-    });
-  });
-
-  describe('An HTML form with a number field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-number.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'quantity':'4'});
-    });
-  });
-
-  describe('An HTML form with a range field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-range.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'points':'9'});
-    });
-  });
-
-  describe('An HTML form with a search field', () => {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-search.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'googlesearch':'javascript form to object'});
-    });
-  });
-
-  describe('An HTML form with a tel field', ()=> {
-    test('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-tel.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'yourPhoneNo':'+40.737.10.01.10'});
-    });
-  });
-
-  describe('An HTML form with a time field', () =>{
-    it('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-time.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'usrTime':'22:07'});
-    });
-  });
-
-  describe('An HTML form with an url field', () => {
-    it('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-url.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'homepage':'http://google.com.ro'});
-    });
-  });
-
-  describe('An HTML form with a week field', () => {
-    it('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-week.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'yearWeek':'2016-W02'});
-    });
-  });
-
-  describe('An HTML from with a hidden field', () => {
-    it('should return an object', () => {
-      document.body.innerHTML = readIntegrationFixture("input/input-hidden.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({'token':'123-456-789'});
-    });
-  });
-
-  /**
-   * Multiple input elements tests
-   *
-   */
-  describe('An HTML form with multiple input fields', function(){
-    it('should return an object containing all the fields names and respective values', function(){
-      document.body.innerHTML = readIntegrationFixture("input/input2.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({
-        'name':'Serban',
-        'myColor':'#ff0000',
-        'bday':'2012-07-17',
-        'bdaytime':'2012-07-17 08:57:00',
-        'bdaytimeLocal':'2014-08-30T02:03',
-        'email':'serbanghita@gmail.com',
-        'bdaymonth':'2014-07',
-        'quantity':'4',
-        'points':'9',
-        'googlesearch':'javascript form to object',
-        'yourPhoneNo':'+40.737.10.01.10',
-        'usrTime':'22:07',
-        'homepage':'http://google.com.ro',
-        'yearWeek':'2016-W02'
-      });
-    });
-
-  });
-
-});
diff --git a/test/integration/radio.test.ts b/test/integration/radio.test.ts
deleted file mode 100644
index ec0c01c..0000000
--- a/test/integration/radio.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {screen} from '@testing-library/dom'
-import formToObject from "../../src";
-import {readIntegrationFixture} from "../helpers";
-
-describe('radio', () => {
-  describe('A form with unchecked radios', () => {
-    test('searched by a valid element string should return false', () => {
-      document.body.innerHTML = readIntegrationFixture("radio/radio1.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toBe(false);
-    });
-  });
-
-  describe('A form with various radio elements checked', () => {
-    it('searched by a valid element string should return an object with checked elements', () =>{
-      document.body.innerHTML = readIntegrationFixture("radio/radio2.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-      expect(formToObject($form)).toEqual({
-        'first': 'First value from first',
-        'second': 'First value from second',
-        'third': 'Second value',
-        'fourth': '0'
-      });
-    });
-
-  });
-});
diff --git a/test/integration/select.test.ts b/test/integration/select.test.ts
deleted file mode 100644
index 242fa8e..0000000
--- a/test/integration/select.test.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import {readIntegrationFixture} from "../helpers";
-import {screen} from "@testing-library/dom";
-import userEvent from '@testing-library/user-event';
-import formToObject from "../../src";
-
-describe('select', () => {
-  test('A form with a select element and one valid selected option should return an object', () => {
-    document.body.innerHTML = readIntegrationFixture("select/select1.html");
-    const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-    expect(formToObject($form)).toEqual({'country':'MC'});
-  });
-
-  test('A form with a select element and no selected options should return the first option value', () => {
-    document.body.innerHTML = readIntegrationFixture("select/select2.html");
-    const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-    expect(formToObject($form)).toEqual({'country':'RO'});
-  });
-
-  describe('An form with a select element and no selected options', ()=> {
-    document.body.innerHTML = readIntegrationFixture("select/select3.html");
-    const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-    it('should return false if the first option is empty', () =>{
-      expect(formToObject($form)).toBe(false);
-    });
-
-    it('should return the first option if empty values option is set to true', () => {
-      expect(formToObject($form, {includeEmptyValuedElements: true})).toEqual({'country':''});
-    });
-  });
-
-  describe('An HTML form with a multiple select element', () => {
-    document.body.innerHTML = readIntegrationFixture("select/select4.html");
-    const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-    it('should return false when no options are selected', () =>{
-      expect(formToObject($form)).toBe(false);
-    });
-
-    it('should return an empty array when no options are selected and include empty values option is true', () => {
-      expect(formToObject($form, {includeEmptyValuedElements: true})).toEqual({'countries':[]});
-    });
-
-    it('should return an array with two elements when two options are selected', async () => {
-      document.body.innerHTML = readIntegrationFixture("select/select4.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-      const user = userEvent.setup();
-
-      const $countries = screen.queryByTestId('countries') as HTMLSelectElement;
-      await user.selectOptions($countries, ['Romania', 'Monaco']);
-
-      expect(formToObject($form)).toEqual({'countries':['RO', 'MC']});
-    });
-
-    it('and name contains empty brackets []', async () => {
-      document.body.innerHTML = readIntegrationFixture("select/select6.html");
-      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-      const user = userEvent.setup();
-
-      const $countries = screen.queryByTestId('select') as HTMLSelectElement;
-      await user.selectOptions($countries, ['a', 'b']);
-
-      expect(formToObject($form)).toEqual({'select':['a', 'b']});
-    });
-  });
-
-  describe('A form with a select element and options dont have value attribute', () =>{
-    document.body.innerHTML = readIntegrationFixture("select/select5.html");
-    const $form = screen.queryByTestId('testForm') as HTMLFormElement;
-
-    it('should return the label of the first option element', () => {
-      expect(formToObject($form)).toEqual({'countries': 'Romania'});
-    });
-  });
-
-});
diff --git a/test/manual/playground.html b/test/manual/playground.html
index 68272ad..2602761 100644
--- a/test/manual/playground.html
+++ b/test/manual/playground.html
@@ -1,69 +1,69 @@
 <form action="/submit" method="post" data-testid="testForm" id="testForm">
-<!--    <label for="text">Text:</label>-->
-<!--    <input type="text" id="text" name="text" value="text value"><br><br>-->
+    <label for="text">Text:</label>
+    <input type="text" id="text" name="text" value="text value"><br><br>
 
-<!--    <label for="password">Password:</label>-->
-<!--    <input type="password" id="password" name="password" value="password value"><br><br>-->
+    <label for="password">Password:</label>
+    <input type="password" id="password" name="password" value="password value"><br><br>
 
-<!--    <label for="email">Email:</label>-->
-<!--    <input type="email" id="email" name="email" value="email@test.com"><br><br>-->
+    <label for="email">Email:</label>
+    <input type="email" id="email" name="email" value="email@test.com"><br><br>
 
-<!--    <label for="number">Number:</label>-->
-<!--    <input type="number" id="number" name="number" value="12345"><br><br>-->
+    <label for="number">Number:</label>
+    <input type="number" id="number" name="number" value="12345"><br><br>
 
-<!--    <label for="date">Date:</label>-->
-<!--    <input type="date" id="date" name="date" value="2023-12-16"><br><br>-->
+    <label for="date">Date:</label>
+    <input type="date" id="date" name="date" value="2023-12-16"><br><br>
 
-<!--    <label for="time">Time:</label>-->
-<!--    <input type="time" id="time" name="time" value="10:30"><br><br>-->
+    <label for="time">Time:</label>
+    <input type="time" id="time" name="time" value="10:30"><br><br>
 
-<!--    <label for="range">Range:</label>-->
-<!--    <input type="range" id="range" name="range" value="60"><br><br>-->
+    <label for="range">Range:</label>
+    <input type="range" id="range" name="range" value="60"><br><br>
 
-<!--    <label for="color">Color:</label>-->
-<!--    <input type="color" id="color" name="color" value="#000000"><br><br>-->
+    <label for="color">Color:</label>
+    <input type="color" id="color" name="color" value="#000000"><br><br>
 
-<!--    <label for="checkbox">Checkbox:</label>-->
-<!--    <input type="checkbox" id="checkbox" name="checkbox" checked><br><br>-->
+    <label for="checkbox">Checkbox:</label>
+    <input type="checkbox" id="checkbox" name="checkbox" checked><br><br>
 
-<!--    <label for="radio">Radio:</label>-->
-<!--    <input type="radio" id="radio1" name="radio" value="option1">-->
-<!--    <label for="radio1">Option 1</label>-->
-<!--    <input type="radio" id="radio2" name="radio" value="option2" checked>-->
-<!--    <label for="radio2">Option 2</label><br><br>-->
-<!--    <input type="radio" id="radio3" name="radio" value="option3">-->
-<!--    <label for="radio2">Option 3</label><br><br>-->
+    <label for="radio">Radio:</label>
+    <input type="radio" id="radio1" name="radio" value="option1">
+    <label for="radio1">Option 1</label>
+    <input type="radio" id="radio2" name="radio" value="option2" checked>
+    <label for="radio2">Option 2</label><br><br>
+    <input type="radio" id="radio3" name="radio" value="option3">
+    <label for="radio2">Option 3</label><br><br>
 
-<!--    <label for="file">File:</label>-->
-<!--    <input type="file" id="file" name="file"><br><br>-->
+    <label for="file">File:</label>
+    <input type="file" id="file" name="file"><br><br>
 
-<!--    <label for="textarea">Textarea:</label>-->
-<!--    <textarea id="textarea" name="textarea">textarea value</textarea><br><br>-->
+    <label for="textarea">Textarea:</label>
+    <textarea id="textarea" name="textarea">textarea value</textarea><br><br>
 
-<!--    <label for="select">Select:</label>-->
-<!--    <select id="select" name="select">-->
-<!--        <option value="option1">Option 1</option>-->
-<!--        <option value="option2" selected>Option 2</option>-->
-<!--        <option value="option3">Option 3</option>-->
-<!--    </select><br><br>-->
+    <label for="select">Select:</label>
+    <select id="select" name="select">
+        <option value="option1">Option 1</option>
+        <option value="option2" selected>Option 2</option>
+        <option value="option3">Option 3</option>
+    </select><br><br>
 
-<!--    <label for="hidden">Hidden:</label>-->
-<!--    <input type="hidden" id="hidden" name="hidden" value="hiddenValue"><br><br>-->
+    <label for="hidden">Hidden:</label>
+    <input type="hidden" id="hidden" name="hidden" value="hiddenValue"><br><br>
 
-<!--    <label for="submit">Submit:</label>-->
-<!--    <input type="submit" id="submit" value="Submit"><br><br>-->
+    <label for="submit">Submit:</label>
+    <input type="submit" id="submit" value="Submit"><br><br>
 
-<!--    <label for="reset">Reset:</label>-->
-<!--    <input type="reset" id="reset" value="Reset"><br><br>-->
+    <label for="reset">Reset:</label>
+    <input type="reset" id="reset" value="Reset"><br><br>
 
     <select id="multiselect" data-testid="multiselect" name="multiselect[]" multiple>
         <option value="a" selected>a</option>
         <option value="b" selected>b</option>
     </select>
 
-<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option1" id="checkboxGroup-1" checked> Option 1</label>-->
-<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option2" id="checkboxGroup-2" checked> Option 2</label>-->
-<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option3" id="checkboxGroup-3" checked> Option 3</label>-->
+    <label><input type="checkbox" name="checkboxGroup[]" value="option1" id="checkboxGroup-1" checked> Option 1</label>
+    <label><input type="checkbox" name="checkboxGroup[]" value="option2" id="checkboxGroup-2" checked> Option 2</label>
+    <label><input type="checkbox" name="checkboxGroup[]" value="option3" id="checkboxGroup-3" checked> Option 3</label>
 </form>
 
 <!--<script src="./js/formToObject.min.js"></script>-->
diff --git a/test/unit/checkbox.test.ts b/test/unit/checkbox.test.ts
index 1e1a004..6d568bd 100644
--- a/test/unit/checkbox.test.ts
+++ b/test/unit/checkbox.test.ts
@@ -11,7 +11,7 @@ describe('checkbox', () => {
         <input type="checkbox" name="more[second]" value="more second" />
     `;
 
-    const formToObject = new FormToObject($form)
+    const formToObject = new FormToObject($form);
 
     expect(formToObject.convertToObj()).toEqual({});
   });
diff --git a/test/unit/input.test.ts b/test/unit/input.test.ts
new file mode 100644
index 0000000..141c4e4
--- /dev/null
+++ b/test/unit/input.test.ts
@@ -0,0 +1,184 @@
+import {FormToObject} from "../../src/FormToObject";
+
+describe('input', () => {
+  describe('text field', () => {
+    it('searched by a valid DOM element should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="text" name="text" value="value" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'text':'value'});
+    });
+  });
+
+  describe('color field', () =>{
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="color" name="color" value="#ff0000" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'color':'#ff0000'});
+    });
+  });
+
+  describe('date field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="date" name="date" value="2012-07-17" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'date':'2012-07-17'});
+    });
+  });
+
+  describe('datetime field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="datetime" name="datetime" value="2012-07-17 08:57:00" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'datetime':'2012-07-17 08:57:00'});
+    });
+  });
+
+  describe('datetime-local field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="datetime-local" name="datetimeLocal" value="2014-08-30T02:03" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'datetimeLocal':'2014-08-30T02:03'});
+    });
+  });
+
+  describe('email field', () => {
+    test('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="email" name="email" value="test@gmail.com" placeholder="you@email.com" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'email':'test@gmail.com'});
+    });
+  });
+
+  describe('month field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="month" name="month" value="2014-07" placeholder="July, 2014" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'month':'2014-07'});
+    });
+  });
+
+  describe('number field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="number" name="number" min="1" max="5" value="4" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'number':'4'});
+    });
+  });
+
+  describe('range field', () => {
+    test('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="range" name="range" min="1" max="10" value="9" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'range':'9'});
+    });
+  });
+
+  describe('search field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="search" name="search" value="value" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'search':'value'});
+    });
+  });
+
+  describe('tel field', ()=> {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="tel" name="tel" value="+40.737.10.01.10" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'tel':'+40.737.10.01.10'});
+    });
+  });
+
+  describe('time field', () =>{
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="time" name="time" value="22:07" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'time':'22:07'});
+    });
+  });
+
+  describe('url field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="url" name="url" value="http://google.com" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'url':'http://google.com'});
+    });
+  });
+
+  describe('week field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="week" name="week" value="2016-W02" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'week':'2016-W02'});
+    });
+  });
+
+  describe('hidden field', () => {
+    it('should return an object', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+          <input type="hidden" name="hidden" value="value" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({'hidden':'value'});
+    });
+  });
+
+});
diff --git a/test/unit/radio.test.ts b/test/unit/radio.test.ts
new file mode 100644
index 0000000..bbffb1b
--- /dev/null
+++ b/test/unit/radio.test.ts
@@ -0,0 +1,45 @@
+import {FormToObject} from "../../src/FormToObject";
+
+describe('radio', () => {
+  describe('unchecked radios', () => {
+    it('searched by a valid element string should return false', () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+        <input type="radio" name="first" value="First value" />
+        <input type="radio" name="second" value="First value" />
+        <input type="radio" name="third" value="First value" />
+        <input type="radio" name="third" value="Second value" />
+        <input type="radio" name="third" value="Third value" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({});
+    });
+  });
+
+  describe('radio elements checked', () => {
+    it('searched by a valid element string should return an object with checked elements', () =>{
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+        <input type="radio" name="first" value="First value from first" checked />
+        <input type="radio" name="second" value="First value from second" checked="checked" />
+        <input type="radio" name="third" value="First value" />
+        <input type="radio" name="third" value="Second value" checked />
+        <input type="radio" name="third" value="Third value" />
+        <!--    // Numeric values-->
+        <input type="radio" name="fourth" value="0" checked />
+        <input type="radio" name="fourth" value="1" />
+        <input type="radio" name="fourth" value="2" />
+    `;
+      const formToObject = new FormToObject($form);
+
+      expect(formToObject.convertToObj()).toEqual({
+        'first': 'First value from first',
+        'second': 'First value from second',
+        'third': 'Second value',
+        'fourth': '0'
+      });
+    });
+
+  });
+});
diff --git a/test/unit/select.test.ts b/test/unit/select.test.ts
new file mode 100644
index 0000000..f92bd3a
--- /dev/null
+++ b/test/unit/select.test.ts
@@ -0,0 +1,111 @@
+import {screen} from "@testing-library/dom";
+import userEvent from '@testing-library/user-event';
+import {FormToObject} from "../../src/FormToObject";
+
+describe('select', () => {
+  afterEach(() => {
+    // Clean the HTML from injected fixtures.
+    document.body.innerHTML = '';
+  })
+  it('a select element and one valid selected option should return an object', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+      <select name="select">
+          <option value="first">first</option>
+          <option value="second" selected>second</option>
+          <option value="three">three</option>
+      </select>
+    `;
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({'select':'second'});
+  });
+
+  it('a select element and no selected options should return the first option value', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+      <select name="select">
+          <option value="first">first</option>
+          <option value="second">second</option>
+          <option value="three">three</option>
+      </select>
+    `;
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({'select':'first'});
+  });
+
+  describe('a select element and no selected options', ()=> {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+      <select name="select">
+          <option value="">--select--</option>
+          <option value="first">first</option>
+          <option value="second">second</option>
+          <option value="third">third</option>
+      </select>
+    `;
+
+    it('should return {} if the first option is empty', () => {
+      const formToObject = new FormToObject($form);
+      expect(formToObject.convertToObj()).toEqual({});
+    });
+
+    it('should return the first option if empty values option is set to true', () => {
+      const formToObject = new FormToObject($form, {includeEmptyValuedElements: true});
+      expect(formToObject.convertToObj()).toEqual({'select':''});
+    });
+  });
+
+  describe('multiple select element', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+      <select name="multiple" multiple data-testid="multiple">
+          <option value="">--select--</option>
+          <option value="first">first</option>
+          <option value="second">second</option>
+          <option value="third">third</option>
+      </select>
+    `;
+
+    it('should return {} when no options are selected', () => {
+      const formToObject = new FormToObject($form);
+      expect(formToObject.convertToObj()).toEqual({});
+    });
+
+    it('should return an empty array when no options are selected and include empty values option is true', () => {
+      const formToObject = new FormToObject($form, {includeEmptyValuedElements: true});
+      expect(formToObject.convertToObj()).toEqual({'multiple':[]});
+    });
+
+    it('should return an array with two elements when two options are selected', async () => {
+      document.body.appendChild($form);
+      const formToObject = new FormToObject($form);
+      const user = userEvent.setup();
+
+      const $multiple = screen.queryByTestId('multiple') as HTMLSelectElement;
+      await user.selectOptions($multiple, ['second', 'third']);
+
+      expect(formToObject.convertToObj()).toEqual({'multiple':['second', 'third']});
+    });
+
+    it('and name contains empty brackets []', async () => {
+      const $form = document.createElement('form');
+      $form.innerHTML = `
+        <select id="select" data-testid="select" name="select[]" multiple>
+            <option value="a" selected>a</option>
+            <option value="b" selected>b</option>
+        </select>
+      `;
+      document.body.appendChild($form);
+      const formToObject = new FormToObject($form);
+      const user = userEvent.setup();
+
+      const $select = screen.queryByTestId('select') as HTMLSelectElement;
+      await user.selectOptions($select, ['a', 'b']);
+
+      expect(formToObject.convertToObj()).toEqual({'select':['a', 'b']});
+    });
+  });
+
+});