diff --git a/packages/oui-angular/src/index.js b/packages/oui-angular/src/index.js index 0c2c42ba..c76e14dc 100644 --- a/packages/oui-angular/src/index.js +++ b/packages/oui-angular/src/index.js @@ -23,8 +23,6 @@ import Pagination from "@oui-angular/oui-pagination/src"; import Popover from "@oui-angular/oui-popover/src"; import Progress from "@oui-angular/oui-progress/src"; import Radio from "@oui-angular/oui-radio/src"; -import RadioGroup from "@oui-angular/oui-radio-group/src"; -import RadioToggleGroup from "@oui-angular/oui-radio-toggle-group/src"; import Search from "@oui-angular/oui-search/src"; import Select from "@oui-angular/oui-select/src"; import SelectPicker from "@oui-angular/oui-select-picker/src"; @@ -64,8 +62,6 @@ export default angular Popover, Progress, Radio, - RadioGroup, - RadioToggleGroup, Search, Select, SelectPicker, diff --git a/packages/oui-angular/src/index.spec.js b/packages/oui-angular/src/index.spec.js index 3483b58a..4afdcd66 100644 --- a/packages/oui-angular/src/index.spec.js +++ b/packages/oui-angular/src/index.spec.js @@ -25,8 +25,6 @@ loadTests(require.context("../../oui-pagination/src/", true, /.*((\.spec)|(index loadTests(require.context("../../oui-popover/src/", true, /.*((\.spec)|(index))$/)); loadTests(require.context("../../oui-progress/src/", true, /.*((\.spec)|(index))$/)); loadTests(require.context("../../oui-radio/src/", true, /.*((\.spec)|(index))$/)); -loadTests(require.context("../../oui-radio-group/src/", true, /.*((\.spec)|(index))$/)); -loadTests(require.context("../../oui-radio-toggle-group/src/", true, /.*((\.spec)|(index))$/)); loadTests(require.context("../../oui-search/src/", true, /.*((\.spec)|(index))$/)); loadTests(require.context("../../oui-select/src/", true, /.*((\.spec)|(index))$/)); loadTests(require.context("../../oui-select-picker/src/", true, /.*((\.spec)|(index))$/)); diff --git a/packages/oui-radio-group/README.md b/packages/oui-radio-group/README.md deleted file mode 100644 index b942764d..00000000 --- a/packages/oui-radio-group/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# Radio-group - - - -## Usage - -### Default - -```html:preview -
- - First - Second - Third - -
-``` - -### Disabled - -```html:preview -
- - First - Second - Third - -
-``` - -### On change - -```html:preview -
- - First - Second - Third - -
-Last onChange value: {{ $ctrl.lastOnChangeValue }} -``` - -## API - -| Attribute | Type | Binding | One-time Binding | Values | Default | Description -| ---- | ---- | ---- | ---- | ---- | ---- | ---- -| `model` | Object | =? | no | n/a | n/a | current value of the radio -| `name` | string | @? | yes | n/a | n/a | name attribute of the radio -| `on-change` | function | & | no | n/a | n/a | handler triggered when model has changed diff --git a/packages/oui-radio-group/src/index.js b/packages/oui-radio-group/src/index.js deleted file mode 100644 index 8a055f7b..00000000 --- a/packages/oui-radio-group/src/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import "@oui-angular/oui-radio/src"; -import RadioGroup from "./radio-group.component.js"; - -export default angular - .module("oui.radio-group", [ - "oui.radio" - ]) - .component("ouiRadioGroup", RadioGroup) - .name; diff --git a/packages/oui-radio-group/src/index.spec.js b/packages/oui-radio-group/src/index.spec.js deleted file mode 100644 index e77b790d..00000000 --- a/packages/oui-radio-group/src/index.spec.js +++ /dev/null @@ -1,148 +0,0 @@ -describe("ouiRadioGroup", () => { - let TestUtils; - let $timeout; - let $rootScope; - - beforeEach(angular.mock.module("oui.radio")); - beforeEach(angular.mock.module("oui.radio-group")); - beforeEach(angular.mock.module("oui.test-utils")); - - beforeEach(inject((_TestUtils_, _$timeout_, _$rootScope_) => { - TestUtils = _TestUtils_; - $timeout = _$timeout_; - $rootScope = _$rootScope_; - })); - - const getRadioInputElement = (element) => angular.element(element[0].querySelector("input[type=radio]")); - const getElementByClass = (element, value) => angular.element(element[0].querySelector(value)); - const getRadioInputElementByValue = (element, value) => angular.element(element[0].querySelector(`input[type=radio][value=${value}]`)); - const getRadioGroupElement = (element) => angular.element(element[0]); - const clickRadio = (radioToCheck) => { - radioToCheck.prop("checked", true); - radioToCheck.triggerHandler("click"); // NG 1.6 - radioToCheck.triggerHandler("change"); // NG 1.7 - }; - - describe("Component", () => { - - describe("attributes", () => { - - it("should assign defined name to child radios when name attribute is defined", () => { - const name = "foo"; - - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getRadioInputElement(element).prop("name")).toBe(name); - }); - - it("should assign a generated name to child radios when name attribute is undefined ", () => { - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getRadioInputElement(element).prop("name")).toMatch(/^oui-radio-group-\d+$/); - }); - - it("should add radiogroup role", () => { - const element = TestUtils.compileTemplate(""); - $timeout.flush(); - - expect(getRadioGroupElement(element).attr("role")).toEqual("radiogroup"); - }); - }); - - describe("classes", () => { - - it("should set radio classes", () => { - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getElementByClass(element, ".oui-radio").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio__input").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio__label-container").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio__label").length).toEqual(1); - }); - }); - - describe("on radio group model change", () => { - - it("should update child radio models at initialization", () => { - const defaultRadioValue = "bValue"; - const otherRadioValue = "aValue"; - const element = TestUtils.compileTemplate(` - - - - - `, { - defaultValue: defaultRadioValue - }); - - expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(true); - expect(getRadioInputElementByValue(element, otherRadioValue).prop("checked")).toEqual(false); - }); - - it("should update child radio models after initialization too", () => { - const defaultRadioValue = "bValue"; - const newRadioValue = "aValue"; - const element = TestUtils.compileTemplate(` - - - - - `, { - defaultValue: defaultRadioValue - }); - - TestUtils.getElementController(element).defaultValue = newRadioValue; - $rootScope.$digest(); - - expect(getRadioInputElementByValue(element, newRadioValue).prop("checked")).toEqual(true); - expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(false); - }); - }); - - describe("on child radio click", () => { - - it("should update radio group model", () => { - const clickedRadioValue = "bValue"; - const element = TestUtils.compileTemplate(` - - - - - `); - - clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); - - expect(TestUtils.getElementController(element).model).toEqual(clickedRadioValue); - }); - - it("should trigger on change callback", () => { - const clickedRadioValue = "bValue"; - const onChangeSpy = jasmine.createSpy("onChangeSpy"); - const element = TestUtils.compileTemplate(` - - - - - `, { - onChange: onChangeSpy - }); - - clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); - $timeout.flush(); - expect(onChangeSpy).toHaveBeenCalledWith(clickedRadioValue); - }); - }); - }); -}); diff --git a/packages/oui-radio-toggle-group/README.md b/packages/oui-radio-toggle-group/README.md deleted file mode 100644 index 45c9d2ea..00000000 --- a/packages/oui-radio-toggle-group/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# Radio-toggle-group - - - -## Usage - -### Default - -```html:preview -
- - First - Second - Third - -
-``` - -### Disabled - -```html:preview -
- - First - Second - Third - -
-``` - -### On change - -```html:preview -
- - First - Second - Third - -
-Last onChange value: {{ $ctrl.lastOnChangeValue }} -``` - -## API - -| Attribute | Type | Binding | One-time Binding | Values | Default | Description -| ---- | ---- | ---- | ---- | ---- | ---- | ---- -| `model` | Object | =? | no | n/a | n/a | current value of the radio -| `name` | string | @? | yes | n/a | n/a | name attribute of the radio -| `on-change` | function | & | no | n/a | n/a | handler triggered when model has changed diff --git a/packages/oui-radio-toggle-group/src/index.js b/packages/oui-radio-toggle-group/src/index.js deleted file mode 100644 index f89dd3c6..00000000 --- a/packages/oui-radio-toggle-group/src/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import "@oui-angular/oui-radio/src"; -import "@oui-angular/oui-radio-group/src"; -import RadioToggleGroup from "./radio-toggle-group.component.js"; - -export default angular - .module("oui.radio-toggle-group", [ - "oui.radio", - "oui.radio-group" - ]) - .component("ouiRadioToggleGroup", RadioToggleGroup) - .name; diff --git a/packages/oui-radio-toggle-group/src/index.spec.js b/packages/oui-radio-toggle-group/src/index.spec.js deleted file mode 100644 index 5751abd7..00000000 --- a/packages/oui-radio-toggle-group/src/index.spec.js +++ /dev/null @@ -1,149 +0,0 @@ -describe("ouiRadioToggleGroup", () => { - let TestUtils; - let $timeout; - let $rootScope; - - beforeEach(angular.mock.module("oui.radio")); - beforeEach(angular.mock.module("oui.radio-group")); - beforeEach(angular.mock.module("oui.radio-toggle-group")); - beforeEach(angular.mock.module("oui.test-utils")); - - beforeEach(inject((_TestUtils_, _$timeout_, _$rootScope_) => { - TestUtils = _TestUtils_; - $timeout = _$timeout_; - $rootScope = _$rootScope_; - })); - - const getRadioInputElement = (element) => angular.element(element[0].querySelector("input[type=radio]")); - const getElementByClass = (element, value) => angular.element(element[0].querySelector(value)); - const getRadioInputElementByValue = (element, value) => angular.element(element[0].querySelector(`input[type=radio][value=${value}]`)); - const getRadioGroupElement = (element) => angular.element(element[0]); - const clickRadio = (radioToCheck) => { - radioToCheck.prop("checked", true); - radioToCheck.triggerHandler("click"); // NG 1.6 - radioToCheck.triggerHandler("change"); // NG 1.7 - }; - - describe("Component", () => { - - describe("attributes", () => { - - it("should assign defined name to child radios when name attribute is defined", () => { - const name = "foo"; - - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getRadioInputElement(element).prop("name")).toBe(name); - }); - - it("should assign a generated name to child radios when name attribute is undefined ", () => { - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getRadioInputElement(element).prop("name")).toMatch(/^oui-radio-group-\d+$/); - }); - - it("should add radiogroup role", () => { - const element = TestUtils.compileTemplate(""); - $timeout.flush(); - - expect(getRadioGroupElement(element).attr("role")).toEqual("radiogroup"); - }); - }); - - describe("classes", () => { - - it("should set toggle classes", () => { - const element = TestUtils.compileTemplate(` - - - - `); - - expect(getElementByClass(element, ".oui-radio-toggle").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio-toggle__input").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio-toggle__label-container").length).toEqual(1); - expect(getElementByClass(element, ".oui-radio-toggle__label").length).toEqual(1); - }); - }); - - describe("on radio group model change", () => { - - it("should update child radio models at initialization", () => { - const defaultRadioValue = "bValue"; - const otherRadioValue = "aValue"; - const element = TestUtils.compileTemplate(` - - - - - `, { - defaultValue: defaultRadioValue - }); - - expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(true); - expect(getRadioInputElementByValue(element, otherRadioValue).prop("checked")).toEqual(false); - }); - - it("should update child radio models after initialization too", () => { - const defaultRadioValue = "bValue"; - const newRadioValue = "aValue"; - const element = TestUtils.compileTemplate(` - - - - - `, { - defaultValue: defaultRadioValue - }); - - TestUtils.getElementController(element).defaultValue = newRadioValue; - $rootScope.$digest(); - - expect(getRadioInputElementByValue(element, newRadioValue).prop("checked")).toEqual(true); - expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(false); - }); - }); - - describe("on child radio click", () => { - - it("should update radio group model", () => { - const clickedRadioValue = "bValue"; - const element = TestUtils.compileTemplate(` - - - - - `); - - clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); - - expect(TestUtils.getElementController(element).model).toEqual(clickedRadioValue); - }); - - it("should trigger on change callback", () => { - const clickedRadioValue = "bValue"; - const onChangeSpy = jasmine.createSpy("onChangeSpy"); - const element = TestUtils.compileTemplate(` - - - - - `, { - onChange: onChangeSpy - }); - - clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); - $timeout.flush(); - expect(onChangeSpy).toHaveBeenCalledWith(clickedRadioValue); - }); - }); - }); -}); diff --git a/packages/oui-radio/README.md b/packages/oui-radio/README.md index 2310ec1f..212e1fde 100644 --- a/packages/oui-radio/README.md +++ b/packages/oui-radio/README.md @@ -62,8 +62,88 @@ Last onChange value: {{ $ctrl.lastOnChangeValue }} ``` +## Group + +### Basic + +```html:preview +
+ + First + Second + Third + +
+``` + +### Disabled + +```html:preview +
+ + First + Second + Third + +
+``` + +### On change + +```html:preview +
+ + First + Second + Third + +
+Last onChange value: {{ $ctrl.lastOnChangeValue }} +``` + +## Toggle Group + +### Default + +```html:preview +
+ + First + Second + Third + +
+``` + +### Disabled + +```html:preview +
+ + First + Second + Third + +
+``` + +### On change + +```html:preview +
+ + First + Second + Third + +
+Last onChange value: {{ $ctrl.lastOnChangeValue }} +``` + ## API +### oui-radio + | Attribute | Type | Binding | One-time Binding | Values | Default | Description | ---- | ---- | ---- | ---- | ---- | ---- | ---- | `model` | object | =? | no | n/a | n/a | current value of the radio @@ -79,3 +159,19 @@ #### Deprecated * `text`: Replaced by transclude value + +### oui-radio-group + +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| `model` | Object | =? | no | n/a | n/a | current value of the radio +| `name` | string | @? | yes | n/a | n/a | name attribute of the radio +| `on-change` | function | & | no | n/a | n/a | handler triggered when model has changed + +### oui-radio-toggle-group + +| Attribute | Type | Binding | One-time Binding | Values | Default | Description +| ---- | ---- | ---- | ---- | ---- | ---- | ---- +| `model` | Object | =? | no | n/a | n/a | current value of the radio +| `name` | string | @? | yes | n/a | n/a | name attribute of the radio +| `on-change` | function | & | no | n/a | n/a | handler triggered when model has changed diff --git a/packages/oui-radio-group/src/radio-group.component.js b/packages/oui-radio/src/group/radio-group.component.js similarity index 100% rename from packages/oui-radio-group/src/radio-group.component.js rename to packages/oui-radio/src/group/radio-group.component.js diff --git a/packages/oui-radio-group/src/radio-group.controller.js b/packages/oui-radio/src/group/radio-group.controller.js similarity index 100% rename from packages/oui-radio-group/src/radio-group.controller.js rename to packages/oui-radio/src/group/radio-group.controller.js diff --git a/packages/oui-radio/src/index.js b/packages/oui-radio/src/index.js index 566d134b..a48479b9 100644 --- a/packages/oui-radio/src/index.js +++ b/packages/oui-radio/src/index.js @@ -1,6 +1,10 @@ -import Radio from "./radio.component.js"; +import Radio from "./radio.component"; +import RadioGroup from "./group/radio-group.component"; +import RadioToggleGroup from "./toggle-group/radio-toggle-group.component"; export default angular .module("oui.radio", []) .component("ouiRadio", Radio) + .component("ouiRadioGroup", RadioGroup) + .component("ouiRadioToggleGroup", RadioToggleGroup) .name; diff --git a/packages/oui-radio/src/index.spec.js b/packages/oui-radio/src/index.spec.js index 95f7fe48..b4bf309a 100644 --- a/packages/oui-radio/src/index.spec.js +++ b/packages/oui-radio/src/index.spec.js @@ -1,261 +1,529 @@ describe("ouiRadio", () => { let TestUtils; + let $rootScope; let $timeout; beforeEach(angular.mock.module("oui.radio")); beforeEach(angular.mock.module("oui.test-utils")); - beforeEach(inject((_TestUtils_, _$timeout_) => { + beforeEach(inject((_TestUtils_, _$rootScope_, _$timeout_) => { TestUtils = _TestUtils_; + $rootScope = _$rootScope_; $timeout = _$timeout_; })); - const getRadioInputElement = (element) => element[0].querySelector("input[type=radio]"); - const getRadioLabelElement = (element) => element[0].querySelector("label"); - const getRadioTextContainerElement = (element) => element[0].querySelector(".oui-radio__label span:first-child"); - const getRadioDescriptionElement = (element) => element[0].querySelector(".oui-radio__description"); - describe("Component", () => { - describe("id attribute", () => { - it("should generate an id for the input and label when undefined", () => { - const element = TestUtils.compileTemplate(""); + describe("Radio", () => { + const getRadioInputElement = (element) => element[0].querySelector("input[type=radio]"); + const getRadioLabelElement = (element) => element[0].querySelector("label"); + const getRadioTextContainerElement = (element) => element[0].querySelector(".oui-radio__label span:first-child"); + const getRadioDescriptionElement = (element) => element[0].querySelector(".oui-radio__description"); + + describe("id attribute", () => { + it("should generate an id for the input and label when undefined", () => { + const element = TestUtils.compileTemplate(""); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("id")).toMatch(/^ouiRadio\d+$/); + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("id")).toMatch(/^ouiRadio\d+$/); + + const radioLabelElement = getRadioLabelElement(element); + expect(angular.element(radioLabelElement).attr("for")).toMatch(/^ouiRadio\d+$/); + }); - const radioLabelElement = getRadioLabelElement(element); - expect(angular.element(radioLabelElement).attr("for")).toMatch(/^ouiRadio\d+$/); + it("should set the id for the input and label when defined", () => { + const element = TestUtils.compileTemplate(''); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("id")).toBe("test"); + + const radioLabelElement = getRadioLabelElement(element); + expect(angular.element(radioLabelElement).attr("for")).toBe("test"); + }); }); - it("should set the id for the input and label when defined", () => { - const element = TestUtils.compileTemplate(''); + describe("name attribute", () => { + it("should set the name attribute on input when defined", () => { + const element = TestUtils.compileTemplate(''); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("id")).toBe("test"); + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("name")).toBe("test"); + }); + + it("should set the name attribute on input when defined with id", () => { + const element = TestUtils.compileTemplate(''); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("name")).toBe("test"); + }); - const radioLabelElement = getRadioLabelElement(element); - expect(angular.element(radioLabelElement).attr("for")).toBe("test"); + it("should set the name attribute to id when only id is defined", () => { + const element = TestUtils.compileTemplate(''); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("name")).toBe("test"); + }); }); - }); - describe("name attribute", () => { - it("should set the name attribute on input when defined", () => { - const element = TestUtils.compileTemplate(''); + describe("text attribute", () => { + it("should display a text inside the radio's text container", () => { + const element = TestUtils.compileTemplate(''); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("name")).toBe("test"); + const textContainerRadioElement = getRadioTextContainerElement(element); + expect(angular.element(textContainerRadioElement).html()).toBe("test"); + }); }); - it("should set the name attribute on input when defined with id", () => { - const element = TestUtils.compileTemplate(''); + describe("description attribute", () => { + it("should display the radio's description container when empty", () => { + const element = TestUtils.compileTemplate(""); + + const descriptionRadioElement = getRadioDescriptionElement(element); + expect(angular.element(descriptionRadioElement).length).toBe(0); + }); + + it("should display a text inside the radio's description container", () => { + const element = TestUtils.compileTemplate(''); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("name")).toBe("test"); + const descriptionRadioElement = getRadioDescriptionElement(element); + expect(angular.element(descriptionRadioElement).html()).toBe("test"); + }); }); - it("should set the name attribute to id when only id is defined", () => { - const element = TestUtils.compileTemplate(''); + describe("value attribute", () => { + it("should set the radio's value attribute", () => { + const element = TestUtils.compileTemplate(''); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("name")).toBe("test"); + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).attr("value")).toEqual("aValue"); + }); }); - }); - describe("text attribute", () => { - it("should display a text inside the radio's text container", () => { - const element = TestUtils.compileTemplate(''); + describe("disabled attribute", () => { + it("should display an active radio when no attribute", () => { + const element = TestUtils.compileTemplate(""); - const textContainerRadioElement = getRadioTextContainerElement(element); - expect(angular.element(textContainerRadioElement).html()).toBe("test"); + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("disabled")).toBe(false); + }); + + it("should display a disabled radio when defined but no value", () => { + const element = TestUtils.compileTemplate(""); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("disabled")).toBe(true); + }); + + it("should display a disabled radio when true", () => { + const element = TestUtils.compileTemplate("", { + disabled: true + }); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("disabled")).toBe(true); + }); + + it("should display an active radio when false", () => { + const element = TestUtils.compileTemplate("", { + notDisabled: false + }); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("disabled")).toBe(false); + }); }); - }); - describe("description attribute", () => { - it("should display the radio's description container when empty", () => { - const element = TestUtils.compileTemplate(""); + describe("required attribute", () => { + it("should display an active radio when no attribute", () => { + const element = TestUtils.compileTemplate(""); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("required")).toBe(false); + }); + + it("should display a required radio when defined but no value", () => { + const element = TestUtils.compileTemplate(""); - const descriptionRadioElement = getRadioDescriptionElement(element); - expect(angular.element(descriptionRadioElement).length).toBe(0); + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("required")).toBe(true); + }); + + it("should display a required radio when true", () => { + const element = TestUtils.compileTemplate("", { + required: true + }); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("required")).toBe(true); + }); + + it("should display an active radio when false", () => { + const element = TestUtils.compileTemplate("", { + notRequired: false + }); + + const radioElement = getRadioInputElement(element); + expect(angular.element(radioElement).prop("required")).toBe(false); + }); }); - it("should display a text inside the radio's description container", () => { - const element = TestUtils.compileTemplate(''); - const descriptionRadioElement = getRadioDescriptionElement(element); - expect(angular.element(descriptionRadioElement).html()).toBe("test"); + describe("thumbnail attribute", () => { + it("should display a classic radio when no attribute", () => { + const element = TestUtils.compileTemplate(""); + expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(false); + }); + + it("should display a thumbnail radio when defined but no value", () => { + const element = TestUtils.compileTemplate(""); + expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(true); + }); + + it("should display a classic radio when false", () => { + const element = TestUtils.compileTemplate("", { + thumbnail: false + }); + + expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(false); + }); + + it("should display a thumbnail radio when true", () => { + const element = TestUtils.compileTemplate("", { + thumbnail: true + }); + + expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(true); + }); }); - }); - describe("value attribute", () => { - it("should set the radio's value attribute", () => { - const element = TestUtils.compileTemplate(''); + describe("default value", () => { + it("should select the default value on loading", () => { + const onChangeSpy = jasmine.createSpy("onChangeSpy"); + + const element = TestUtils.compileTemplate(` +
+ + +
+ `, { + onChange: onChangeSpy, + radioValue: "bValue" + }); + + const radioComponent1 = element.children()[0]; + const radioComponent2 = element.children()[1]; + const $radioElement1 = angular.element(radioComponent1).find("input"); + const $radioElement2 = angular.element(radioComponent2).find("input"); + + expect($radioElement1.prop("checked")).toEqual(false); + expect($radioElement2.prop("checked")).toEqual(true); + }); + }); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).attr("value")).toEqual("aValue"); + describe("on-change attribute", () => { + it("should trigger callback when the radio is clicked", () => { + const onChangeSpy = jasmine.createSpy("onChangeSpy"); + + const element = TestUtils.compileTemplate(` +
+ + +
+ `, { + onChange: onChangeSpy + }); + + const radioComponent1 = element.children()[0]; + const radioComponent2 = element.children()[1]; + const $radioElement1 = angular.element(radioComponent1).find("input"); + const $radioElement2 = angular.element(radioComponent2).find("input"); + + $radioElement1.prop("checked", true); + $radioElement1.triggerHandler("click"); // NG 1.6 + $radioElement1.triggerHandler("change"); // NG 1.7 + $timeout.flush(); + expect(onChangeSpy).toHaveBeenCalledWith("aValue"); + + $radioElement1.prop("checked", false); + $radioElement2.prop("checked", true); + $radioElement2.triggerHandler("click"); // NG 1.6 + $radioElement2.triggerHandler("change"); // NG 1.7 + $timeout.flush(); + expect(onChangeSpy).toHaveBeenCalledWith("bValue"); + }); }); }); + }); + + describe("Radio Group", () => { + const getRadioInputElement = (element) => angular.element(element[0].querySelector("input[type=radio]")); + const getElementByClass = (element, value) => angular.element(element[0].querySelector(value)); + const getRadioInputElementByValue = (element, value) => angular.element(element[0].querySelector(`input[type=radio][value=${value}]`)); + const getRadioGroupElement = (element) => angular.element(element[0]); + const clickRadio = (radioToCheck) => { + radioToCheck.prop("checked", true); + radioToCheck.triggerHandler("click"); // NG 1.6 + radioToCheck.triggerHandler("change"); // NG 1.7 + }; - describe("disabled attribute", () => { - it("should display an active radio when no attribute", () => { - const element = TestUtils.compileTemplate(""); + describe("attributes", () => { - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("disabled")).toBe(false); + it("should assign defined name to child radios when name attribute is defined", () => { + const name = "foo"; + + const element = TestUtils.compileTemplate(` + + + + `); + + expect(getRadioInputElement(element).prop("name")).toBe(name); }); - it("should display a disabled radio when defined but no value", () => { - const element = TestUtils.compileTemplate(""); + it("should assign a generated name to child radios when name attribute is undefined ", () => { + const element = TestUtils.compileTemplate(` + + + + `); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("disabled")).toBe(true); + expect(getRadioInputElement(element).prop("name")).toMatch(/^oui-radio-group-\d+$/); }); - it("should display a disabled radio when true", () => { - const element = TestUtils.compileTemplate("", { - disabled: true - }); + it("should add radiogroup role", () => { + const element = TestUtils.compileTemplate(""); + $timeout.flush(); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("disabled")).toBe(true); + expect(getRadioGroupElement(element).attr("role")).toEqual("radiogroup"); }); + }); - it("should display an active radio when false", () => { - const element = TestUtils.compileTemplate("", { - notDisabled: false - }); + describe("classes", () => { - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("disabled")).toBe(false); + it("should set radio classes", () => { + const element = TestUtils.compileTemplate(` + + + + `); + + expect(getElementByClass(element, ".oui-radio").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio__input").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio__label-container").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio__label").length).toEqual(1); }); }); - describe("required attribute", () => { - it("should display an active radio when no attribute", () => { - const element = TestUtils.compileTemplate(""); + describe("on radio group model change", () => { + + it("should update child radio models at initialization", () => { + const defaultRadioValue = "bValue"; + const otherRadioValue = "aValue"; + const element = TestUtils.compileTemplate(` + + + + + `, { + defaultValue: defaultRadioValue + }); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("required")).toBe(false); + expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(true); + expect(getRadioInputElementByValue(element, otherRadioValue).prop("checked")).toEqual(false); }); - it("should display a required radio when defined but no value", () => { - const element = TestUtils.compileTemplate(""); + it("should update child radio models after initialization too", () => { + const defaultRadioValue = "bValue"; + const newRadioValue = "aValue"; + const element = TestUtils.compileTemplate(` + + + + + `, { + defaultValue: defaultRadioValue + }); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("required")).toBe(true); + TestUtils.getElementController(element).defaultValue = newRadioValue; + $rootScope.$digest(); + + expect(getRadioInputElementByValue(element, newRadioValue).prop("checked")).toEqual(true); + expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(false); }); + }); - it("should display a required radio when true", () => { - const element = TestUtils.compileTemplate("", { - required: true - }); + describe("on child radio click", () => { + + it("should update radio group model", () => { + const clickedRadioValue = "bValue"; + const element = TestUtils.compileTemplate(` + + + + + `); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("required")).toBe(true); + clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); + + expect(TestUtils.getElementController(element).model).toEqual(clickedRadioValue); }); - it("should display an active radio when false", () => { - const element = TestUtils.compileTemplate("", { - notRequired: false - }); + it("should trigger on change callback", () => { + const clickedRadioValue = "bValue"; + const onChangeSpy = jasmine.createSpy("onChangeSpy"); + const element = TestUtils.compileTemplate(` + + + + + `, { + onChange: onChangeSpy + }); - const radioElement = getRadioInputElement(element); - expect(angular.element(radioElement).prop("required")).toBe(false); + clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); + $timeout.flush(); + expect(onChangeSpy).toHaveBeenCalledWith(clickedRadioValue); }); }); + }); + describe("Radio Toggle Group", () => { + const getRadioInputElement = (element) => angular.element(element[0].querySelector("input[type=radio]")); + const getElementByClass = (element, value) => angular.element(element[0].querySelector(value)); + const getRadioInputElementByValue = (element, value) => angular.element(element[0].querySelector(`input[type=radio][value=${value}]`)); + const getRadioGroupElement = (element) => angular.element(element[0]); + const clickRadio = (radioToCheck) => { + radioToCheck.prop("checked", true); + radioToCheck.triggerHandler("click"); // NG 1.6 + radioToCheck.triggerHandler("change"); // NG 1.7 + }; - describe("thumbnail attribute", () => { - it("should display a classic radio when no attribute", () => { - const element = TestUtils.compileTemplate(""); - expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(false); + describe("attributes", () => { + + it("should assign defined name to child radios when name attribute is defined", () => { + const name = "foo"; + + const element = TestUtils.compileTemplate(` + + + + `); + + expect(getRadioInputElement(element).prop("name")).toBe(name); }); - it("should display a thumbnail radio when defined but no value", () => { - const element = TestUtils.compileTemplate(""); - expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(true); + it("should assign a generated name to child radios when name attribute is undefined ", () => { + const element = TestUtils.compileTemplate(` + + + + `); + + expect(getRadioInputElement(element).prop("name")).toMatch(/^oui-radio-group-\d+$/); }); - it("should display a classic radio when false", () => { - const element = TestUtils.compileTemplate("", { - thumbnail: false - }); + it("should add radiogroup role", () => { + const element = TestUtils.compileTemplate(""); + $timeout.flush(); - expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(false); + expect(getRadioGroupElement(element).attr("role")).toEqual("radiogroup"); }); + }); - it("should display a thumbnail radio when true", () => { - const element = TestUtils.compileTemplate("", { - thumbnail: true - }); + describe("classes", () => { - expect(angular.element(element).hasClass("oui-radio_thumbnail")).toBe(true); + it("should set toggle classes", () => { + const element = TestUtils.compileTemplate(` + + + + `); + + expect(getElementByClass(element, ".oui-radio-toggle").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio-toggle__input").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio-toggle__label-container").length).toEqual(1); + expect(getElementByClass(element, ".oui-radio-toggle__label").length).toEqual(1); }); }); - describe("default value", () => { - it("should select the default value on loading", () => { - const onChangeSpy = jasmine.createSpy("onChangeSpy"); + describe("on radio group model change", () => { + it("should update child radio models at initialization", () => { + const defaultRadioValue = "bValue"; + const otherRadioValue = "aValue"; const element = TestUtils.compileTemplate(` -
- - -
+ + + + `, { - onChange: onChangeSpy, - radioValue: "bValue" - }); + defaultValue: defaultRadioValue + }); - const radioComponent1 = element.children()[0]; - const radioComponent2 = element.children()[1]; - const $radioElement1 = angular.element(radioComponent1).find("input"); - const $radioElement2 = angular.element(radioComponent2).find("input"); + expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(true); + expect(getRadioInputElementByValue(element, otherRadioValue).prop("checked")).toEqual(false); + }); - expect($radioElement1.prop("checked")).toEqual(false); - expect($radioElement2.prop("checked")).toEqual(true); + it("should update child radio models after initialization too", () => { + const defaultRadioValue = "bValue"; + const newRadioValue = "aValue"; + const element = TestUtils.compileTemplate(` + + + + + `, { + defaultValue: defaultRadioValue + }); + + TestUtils.getElementController(element).defaultValue = newRadioValue; + $rootScope.$digest(); + + expect(getRadioInputElementByValue(element, newRadioValue).prop("checked")).toEqual(true); + expect(getRadioInputElementByValue(element, defaultRadioValue).prop("checked")).toEqual(false); }); }); - describe("on-change attribute", () => { - it("should trigger callback when the radio is clicked", () => { - const onChangeSpy = jasmine.createSpy("onChangeSpy"); + describe("on child radio click", () => { + it("should update radio group model", () => { + const clickedRadioValue = "bValue"; const element = TestUtils.compileTemplate(` -
- - -
- `, { - onChange: onChangeSpy - }); + + + + + `); - const radioComponent1 = element.children()[0]; - const radioComponent2 = element.children()[1]; - const $radioElement1 = angular.element(radioComponent1).find("input"); - const $radioElement2 = angular.element(radioComponent2).find("input"); + clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); - $radioElement1.prop("checked", true); - $radioElement1.triggerHandler("click"); // NG 1.6 - $radioElement1.triggerHandler("change"); // NG 1.7 - $timeout.flush(); - expect(onChangeSpy).toHaveBeenCalledWith("aValue"); + expect(TestUtils.getElementController(element).model).toEqual(clickedRadioValue); + }); + + it("should trigger on change callback", () => { + const clickedRadioValue = "bValue"; + const onChangeSpy = jasmine.createSpy("onChangeSpy"); + const element = TestUtils.compileTemplate(` + + + + + `, { + onChange: onChangeSpy + }); - $radioElement1.prop("checked", false); - $radioElement2.prop("checked", true); - $radioElement2.triggerHandler("click"); // NG 1.6 - $radioElement2.triggerHandler("change"); // NG 1.7 + clickRadio(getRadioInputElementByValue(element, clickedRadioValue)); $timeout.flush(); - expect(onChangeSpy).toHaveBeenCalledWith("bValue"); + expect(onChangeSpy).toHaveBeenCalledWith(clickedRadioValue); }); }); }); diff --git a/packages/oui-radio-toggle-group/src/radio-toggle-group.component.js b/packages/oui-radio/src/toggle-group/radio-toggle-group.component.js similarity index 72% rename from packages/oui-radio-toggle-group/src/radio-toggle-group.component.js rename to packages/oui-radio/src/toggle-group/radio-toggle-group.component.js index 68c6b9c7..ee9c6011 100644 --- a/packages/oui-radio-toggle-group/src/radio-toggle-group.component.js +++ b/packages/oui-radio/src/toggle-group/radio-toggle-group.component.js @@ -1,4 +1,4 @@ -import controller from "@oui-angular/oui-radio-group/src/radio-group.controller"; +import controller from "../group/radio-group.controller"; export default { template: "
",