From f105aa9e01bb8a2cc6471e7a508d649c08296593 Mon Sep 17 00:00:00 2001 From: Axel Peter <15101925+AxelPeter@users.noreply.github.com> Date: Fri, 1 Mar 2019 13:36:24 +0100 Subject: [PATCH 1/3] feat(oui-popover): add scope attribute for template (#365) * feat(oui-popover): add scope attribute for template * style: code review --- packages/oui-popover/README.md | 18 +++++++++++---- packages/oui-popover/src/index.spec.js | 23 ++++++++++++++++--- .../oui-popover/src/popover.controller.js | 5 +++- packages/oui-popover/src/popover.directive.js | 1 + 4 files changed, 38 insertions(+), 9 deletions(-) diff --git a/packages/oui-popover/README.md b/packages/oui-popover/README.md index a9fec30b..90712e60 100644 --- a/packages/oui-popover/README.md +++ b/packages/oui-popover/README.md @@ -27,22 +27,29 @@ ### Using a template with `oui-popover-template` attribute + + This method use ngInclude to add the template in a popover and create an isolated scope.
+ Use oui-popover-scope to extend the isolated scope and $ctrl to access thoses values. + + ```html:preview - ``` -**Note**: This method use `ngInclude` to add the template in a popover. The content of your template will be compiled with a **new** scope. See [ngInclude](https://docs.angularjs.org/api/ng/directive/ngInclude). - ### Using `oui-popover` component ```html:preview @@ -120,8 +127,9 @@ | Attribute | Type | Binding | One-time Binding | Values | Default | Description | ---- | ---- | ---- | ---- | ---- | ---- | ---- | `oui-popover` | string | @ | no | n/a | `title` attribute | popover content -| `oui-popover-template` | string | @? | no | n/a | n/a | popover content template | `oui-popover-placement` | string | @? | yes | See [Popper placements](https://popper.js.org/popper-documentation.html#Popper.placements) | `right` | modifier for alignment +| `oui-popover-scope` | string | { }); it("should create a popover, next to the trigger, with the content of the template", () => { + const foo = "bar"; const component = testUtils.compileTemplate(`
- - + +
`); $timeout.flush(); const popover = angular.element(component[0].querySelector(".trigger")).next(); - expect(popover.text().trim()).toBe("foo"); + expect(popover.text().trim()).toBe(foo); + }); + + it("should extend the scope of the template", () => { + const foo = "bar"; + const component = testUtils.compileTemplate(`
+ + +
`, { + foo + }); + + $timeout.flush(); + + const popover = angular.element(component[0].querySelector(".trigger")).next(); + + expect(popover.text().trim()).toBe(foo); }); it("should set aria-expanded when trigger is clicked", () => { diff --git a/packages/oui-popover/src/popover.controller.js b/packages/oui-popover/src/popover.controller.js index 59ee895d..68c32b06 100644 --- a/packages/oui-popover/src/popover.controller.js +++ b/packages/oui-popover/src/popover.controller.js @@ -50,7 +50,10 @@ export default class PopoverController { // Support for attribute `oui-popover` // Create a new scope to compile the popover next to the trigger - const popoverScope = angular.extend(this.$scope.$new(true), { $popoverCtrl: this }); + const popoverScope = angular.extend(this.$scope.$new(true), { + $popoverCtrl: this, + $ctrl: this.scope + }); const popoverTemplate = this.$compile(template)(popoverScope); // Add compiled template after $element diff --git a/packages/oui-popover/src/popover.directive.js b/packages/oui-popover/src/popover.directive.js index b388e7d5..f18fc57e 100644 --- a/packages/oui-popover/src/popover.directive.js +++ b/packages/oui-popover/src/popover.directive.js @@ -9,6 +9,7 @@ export default () => { text: "@ouiPopover", title: "@?", placement: "@?ouiPopoverPlacement", + scope: " Date: Fri, 1 Mar 2019 18:07:45 +0530 Subject: [PATCH 2/3] feat(oui-slideshow): add on-panel-change event (#368) add on-panel-change event for slideshow navigation add test case and example resolves MBE-283 --- packages/oui-slideshow/README.md | 36 +++++++++++++++---- packages/oui-slideshow/src/index.spec.js | 16 +++++++++ .../oui-slideshow/src/slideshow.component.js | 2 +- .../oui-slideshow/src/slideshow.controller.js | 2 ++ 4 files changed, 49 insertions(+), 7 deletions(-) diff --git a/packages/oui-slideshow/README.md b/packages/oui-slideshow/README.md index 9a0a5c17..9dbd843c 100644 --- a/packages/oui-slideshow/README.md +++ b/packages/oui-slideshow/README.md @@ -78,16 +78,40 @@ ``` +### Panel change event +**Note**: If you want to access the parameters inside `on-panel-change` callback, you need to use `direction` and `index` variables as below. + +* `direction` returns string of `prev` or `next` +* `index` returns index of current slide + +```html:preview +
+ + + Display your infrastructure as a list + + + Designed to help you synchronize your local Active Directory with your OVH Active Directory. + + +
+``` + ## API ### oui-slideshow -| Attribute | Type | Binding | One-time Binding | Values | Default | Description -| ---- | ---- | ---- | ---- | ---- | ---- | ---- -| `theme` | string | @? | yes | n/a | `default` | add specific theme to component -| `loading` | boolean | { $timeout.flush(); expect($firstPanel.hasClass("active")).toBe(false); }); + + it("should call function of event with attributes", () => { + const onPanelChangeSpy = jasmine.createSpy("onPanelChangeSpy"); + const element = TestUtils.compileTemplate(` + + + + `, { + onPanelChangeSpy + }); + const direction = "next"; + const index = 1; + $timeout.flush(); + getNextButton(element).triggerHandler("click"); + expect(onPanelChangeSpy).toHaveBeenCalledWith(direction, index); + }); }); }); }); diff --git a/packages/oui-slideshow/src/slideshow.component.js b/packages/oui-slideshow/src/slideshow.component.js index 401d3367..53303aed 100644 --- a/packages/oui-slideshow/src/slideshow.component.js +++ b/packages/oui-slideshow/src/slideshow.component.js @@ -9,6 +9,6 @@ export default { onDismiss: "&", loading: " Date: Fri, 1 Mar 2019 18:41:15 +0530 Subject: [PATCH 3/3] feat(oui-header-tabs): add on click event (#367) * feat(oui-header-tabs): add on click events add on-click event for header-tabs-item resolves MBE-283, MBE-284 * feat(oui-header-tabs): add on click events add on-click event for header-tabs-item add test case and example resolves MBE-283, MBE-284 --- packages/oui-header-tabs/README.md | 14 ++++++++++++++ .../src/header-tabs-item.component.js | 3 ++- .../oui-header-tabs/src/header-tabs-item.html | 4 +++- packages/oui-header-tabs/src/index.spec.js | 16 ++++++++++++++++ 4 files changed, 35 insertions(+), 2 deletions(-) diff --git a/packages/oui-header-tabs/README.md b/packages/oui-header-tabs/README.md index 5ce82047..48098a2f 100644 --- a/packages/oui-header-tabs/README.md +++ b/packages/oui-header-tabs/README.md @@ -84,6 +84,19 @@ ``` + +### With action click + +```html:preview + + + + + + + +``` + ## API ### oui-header-tabs-item @@ -97,6 +110,7 @@ | `active` | boolean | + ng-if="!!$ctrl.href && !$ctrl.disabled" + ng-click="$ctrl.onClick()"> diff --git a/packages/oui-header-tabs/src/index.spec.js b/packages/oui-header-tabs/src/index.spec.js index e74d02f5..311850e5 100644 --- a/packages/oui-header-tabs/src/index.spec.js +++ b/packages/oui-header-tabs/src/index.spec.js @@ -126,5 +126,21 @@ describe("ouiHeaderTabs", () => { expect($separator.hasClass("oui-dropdown-menu__divider")).toBe(true); expect($separator.attr("role")).toBe("separator"); }); + + it("should call function of onClick attribute, when header tab item is clicked", () => { + const clickSpy = jasmine.createSpy("spy"); + const element = TestUtils.compileTemplate(` + + + `, { + clickHandler: clickSpy + } + ); + + const item = element[0].querySelector(".oui-header-tabs__item a"); + angular.element(item).triggerHandler("click"); + expect(clickSpy).toHaveBeenCalled(); + expect(clickSpy.calls.count()).toEqual(1); + }); }); });