Merge pull request #246 from ironSource/feature/isctr-13-test-attribu…

…tion

ISCT-13: Test attribution

CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [6.2.0](https://github.com/ironSource/fusion-ui/compare/v6.2.0-rc.0...v6.2.0) (2023-10-30)
+
+## [6.2.0-rc.0](https://github.com/ironSource/fusion-ui/compare/v6.1.1...v6.2.0-rc.0) (2023-10-16)
+
+## [6.1.0-rc.2](https://github.com/ironSource/fusion-ui/compare/v6.1.0-rc.1...v6.1.0-rc.2) (2023-10-05)
+
+## [6.1.0-rc.1](https://github.com/ironSource/fusion-ui/compare/v6.1.0-rc.0...v6.1.0-rc.1) (2023-10-05)
+
+
+### CI
+
+* **isct-13:** add attributes to the include-exclude component ([d9ff283](https://github.com/ironSource/fusion-ui/commit/d9ff28364312f0f864a16ad64a125c626f6a1aab))
+
+## [6.1.0-rc.0](https://github.com/ironSource/fusion-ui/compare/v6.0.1...v6.1.0-rc.0) (2023-10-04)
+
+
+### Features
+
+* **storybook:** up storybook version ([960ab61](https://github.com/ironSource/fusion-ui/commit/960ab61a736bac42a51e671369a59b1a0f48b9e8))
+
 ### [6.1.1](https://github.com/ironSource/fusion-ui/compare/v6.1.0...v6.1.1) (2023-10-08)
 
 ## [6.1.0](https://github.com/ironSource/fusion-ui/compare/v6.0.1...v6.1.0) (2023-10-08)

CONTRIBUTING.md

@@ -18,7 +18,7 @@ Help us keep FusionUI open and inclusive.
 Please read and follow our [Code of Conduct][coc].
 
 
-## <a name="question"></a> Got a Question or Problem?
+## <a name="question"></a> Got a Question or Problem? 
 
 Do not open issues for general support questions as we want to keep GitHub issues for bug reports and feature requests.
 Instead, we recommend email us to [[email protected]](mailto://[email protected]) or contact us on our Slack channel: [fusion-ui-community](https://superops.slack.com/app_redirect?channel=CR47GLKHQ)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fusion-ui",
-    "version": "6.1.1",
+    "version": "6.2.0",
     "description": "UI library created by ironSource",
     "license": "MIT",
     "repository": {

projects/fusion-ui/components/chip-filter/common/base/chip-filter.base.component.ts

@@ -6,6 +6,8 @@ import {
     Directive,
     ElementRef,
     EventEmitter,
+    HostBinding,
+    Injector,
     Input,
     OnDestroy,
     OnInit,
@@ -24,9 +26,13 @@ import {
 } from './chip-filter-component-configurations';
 import {takeUntil} from 'rxjs/operators';
 import {ApiBase} from '@ironsource/fusion-ui/components/api-base';
+import {ChipFilterTestIdModifiers} from '@ironsource/fusion-ui/entities';
+import {TestIdsService} from '@ironsource/fusion-ui/services/test-ids';
 
 @Directive()
 export abstract class ChipFilterBaseComponent implements OnInit, AfterViewInit, OnDestroy, AfterContentInit {
+    /** @internal */
+    @Input() testId: string;
     /** @internal */
     @ContentChild(ApiBase, {static: true}) apiBase: ApiBase;
     /** @internal */
@@ -47,6 +53,11 @@ export abstract class ChipFilterBaseComponent implements OnInit, AfterViewInit,
     /** @internal */
     rightIcon: ChipIcon;
 
+    /** @internal */
+    testIdChipFilterModifiers: typeof ChipFilterTestIdModifiers = ChipFilterTestIdModifiers;
+    /** @internal */
+    testIdsService: TestIdsService = this.injector.get(TestIdsService);
+
     private onDestroy$ = new Subject<void>();
     private restListeners$ = new Subject<void>();
     private clearClickSubscription$ = merge(this.onDestroy$, this.restListeners$);
@@ -81,6 +92,11 @@ export abstract class ChipFilterBaseComponent implements OnInit, AfterViewInit,
     @Input() set isDynamicContent(value: boolean) {
         this.isDefaultContent = !value;
     }
+
+    @HostBinding('attr.data-testid') get testAttribute(): string {
+        return this.testIdsService.getTestAttribute(this.testId, this.testIdChipFilterModifiers.CHIP_FILTER);
+    }
+
     /**
      * On dynamic filter close button clicked (filter removed)
      * @ignore
@@ -144,7 +160,8 @@ export abstract class ChipFilterBaseComponent implements OnInit, AfterViewInit,
         /** @internal */
         public element: ElementRef,
         private renderer: Renderer2,
-        private cdr: ChangeDetectorRef
+        private cdr: ChangeDetectorRef,
+        private injector: Injector
     ) {}
 
     ngOnInit() {

projects/fusion-ui/components/chip-filter/v3/chip-filter.component.html

@@ -14,7 +14,7 @@
             <ng-container *ngIf="apiBase && isDefaultContent" [ngTemplateOutlet]="defaultContent"></ng-container>
         </div>
         <fusion-icon class="fu-chip-right-icon" *ngIf="rightIcon" [name]="rightIcon.icon" [fusionTooltip]="rightIcon.tooltipText"></fusion-icon>
-        <fusion-icon class="fu-icon-close" *ngIf="isCloseIcon$ | async" (click)="closeClicked($event)" [name]="'close-bold'"></fusion-icon>
+        <fusion-icon class="fu-icon-close" *ngIf="isCloseIcon$ | async" (click)="closeClicked($event)" [name]="'close-bold'" [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:testIdChipFilterModifiers.RESET_BUTTON"></fusion-icon>
     </div>
 </ng-template>
 

projects/fusion-ui/components/chip-filter/v3/chip-filter.component.spec.ts

@@ -6,6 +6,7 @@ import {FlagModule} from '@ironsource/fusion-ui/components/flag/v1';
 import {By} from '@angular/platform-browser';
 import {Component, DebugElement, Input} from '@angular/core';
 import {ChipFilterComponentConfigurations} from '@ironsource/fusion-ui/components/chip-filter/common/base';
+import {GenericPipe} from "@ironsource/fusion-ui/pipes/generic";
 
 const innerText = 'Test Chip';
 
@@ -31,7 +32,7 @@ describe('ChipFilterComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            imports: [IconModule, FlagModule, TooltipModule],
+            imports: [IconModule, FlagModule, TooltipModule, GenericPipe],
             declarations: [ChipFilterComponent, TestChipComponent]
         }).compileComponents();
     }));

projects/fusion-ui/components/chip-filter/v3/chip-filter.component.stories.ts

@@ -574,13 +574,14 @@ export const DateRangeWithIcon = {
 const ChipFilterIncludeExcludeTemplate: StoryFn<ChipFilterComponent> = (args: ChipFilterComponent) => ({
     props: {...args},
     template: `<div style="height: 350px; width: 250px;">
-    <fusion-chip-filter [configuration]="configuration">
+    <fusion-chip-filter [configuration]="configuration" [testId]="testId">
         <div class="filter-element">
              <fusion-dropdown-dual-multi-select
                 [title]="title"
                 [placeholder]="placeholder"
                 [formControl]="formControl"
                 [items]="items"
+                [testId]="testId"
              ></fusion-dropdown-dual-multi-select>
         </div>
     </fusion-chip-filter>

projects/fusion-ui/components/chip-filter/v3/chip-filter.module.ts

@@ -4,10 +4,11 @@ import {ChipFilterComponent} from './chip-filter.component';
 import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {FlagModule} from '@ironsource/fusion-ui/components/flag/v1';
 import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip';
+import {GenericPipe} from '@ironsource/fusion-ui/pipes/generic';
 
 @NgModule({
     declarations: [ChipFilterComponent],
     exports: [ChipFilterComponent],
-    imports: [CommonModule, IconModule, FlagModule, TooltipModule]
+    imports: [CommonModule, IconModule, FlagModule, TooltipModule, GenericPipe]
 })
 export class ChipFilterModule {}

projects/fusion-ui/components/chip-filters/v3/chip-filters.component.spec.ts

@@ -8,6 +8,7 @@ import {By} from '@angular/platform-browser';
 import {Component, DebugElement, Input} from '@angular/core';
 import {ChipFilterComponentConfigurations} from '@ironsource/fusion-ui/components/chip-filter/common/base';
 import {ChipFiltersComponent} from '@ironsource/fusion-ui/components/chip-filters';
+import {GenericPipe} from "@ironsource/fusion-ui/pipes/generic";
 
 const innerText = 'Test Chip';
 
@@ -44,7 +45,7 @@ describe('ChipFiltersComponent', () => {
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
-            imports: [IconModule, FlagModule],
+            imports: [IconModule, FlagModule, GenericPipe],
             declarations: [ChipFilterComponent, TestChipComponent, ChipFiltersComponent]
         }).compileComponents();
     }));

projects/fusion-ui/components/chip-filters/v3/stories/chip-filters.component.stories.ts

@@ -408,7 +408,7 @@ const FilterPanelTemplate: StoryFn<ChipFiltersComponent> = (args: ChipFiltersCom
         [disableAddFilter]="disableAddFilter"
         [isSearch]="isSearch"
         >
-        <fusion-chip-filter [configuration]="configChip1">
+        <fusion-chip-filter [configuration]="configChip1" testId="test-chip-1" testId="test-chip-users">
             <div class="filter-element">
                 <fusion-dropdown
                      [placeholderPrefix]="placeholderPrefixChip1"
@@ -421,7 +421,7 @@ const FilterPanelTemplate: StoryFn<ChipFiltersComponent> = (args: ChipFiltersCom
                 </fusion-dropdown>
             </div>
         </fusion-chip-filter>
-        <fusion-chip-filter [configuration]="configChip2">
+        <fusion-chip-filter [configuration]="configChip2" testId="test-chip-status">
             <div class="filter-element">
                 <fusion-dropdown
                      [placeholderPrefix]="placeholderPrefixChip2"
@@ -433,24 +433,26 @@ const FilterPanelTemplate: StoryFn<ChipFiltersComponent> = (args: ChipFiltersCom
                 </fusion-dropdown>
             </div>
         </fusion-chip-filter>
-        <fusion-chip-filter [configuration]="configChip3">
+        <fusion-chip-filter [configuration]="configChip3"  testId="test-chip-dates">
             <div class="filter-element">
                 <fusion-daterange [options]="dateRangeOptions" [formControl]="fcChip3"> </fusion-daterange>
             </div>
         </fusion-chip-filter>
-        <fusion-chip-filter [configuration]="configChip4">
+        <fusion-chip-filter [configuration]="configChip4" testId="test-chip-country">
             <div class="filter-element">
                 <fusion-dropdown-dual-multi-select
+                    testId="test-chip-country"
                     [title]="optionsTitleChip4"
                     [placeholder]="placeholderChip4"
                     [formControl]="fcChip4"
                     [items]="optionsChip4"
                  ></fusion-dropdown-dual-multi-select>
             </div>
         </fusion-chip-filter>
-        <fusion-chip-filter [configuration]="configChip5">
+        <fusion-chip-filter [configuration]="configChip5" testId="test-chip-campaign">
             <div class="filter-element">
                 <fusion-dropdown-dual-multi-select
+                    testId="test-chip-campaign"
                     [title]="optionsTitleChip5"
                     [placeholder]="placeholderChip5"
                     [formControl]="fcChip5"

projects/fusion-ui/components/dropdown-dual-multi-select/common/base/dropdown-dual-multi-select.base.component.html

@@ -47,6 +47,7 @@
         <fusion-dropdown-dual-multi-select-header
             [formControl]="searchControlTerm"
             [title]="title"
+            [testId]="testId"
         ></fusion-dropdown-dual-multi-select-header>
 
         <fusion-dropdown-dual-multi-select-body
@@ -61,9 +62,11 @@
             [hasSelectAll]="hasSelectAll"
             [loadingLeft]="loadingLeft$ | async"
             [hasBackendPagination]="hasBackendPagination"
+            [testId]="testId"
         ></fusion-dropdown-dual-multi-select-body>
 
         <fusion-dropdown-dual-multi-select-footer
+            [testId]="testId"
             (closeSelect)="closeDropdownDualSelect()"
             (applySelect)="applySelect($event)"
         ></fusion-dropdown-dual-multi-select-footer>
@@ -72,6 +75,6 @@
 
 <ng-template #chipContent>
     <div class="fu-chip-content-default">
-        <div [fusionTooltip]="chipDefaultContent" class="truncate fu-chip-text"><span *ngIf="title" class="fu-chip-label">{{ title + ': ' }}</span>{{ selected$ | async }}</div>
+        <div [fusionTooltip]="chipDefaultContent" class="truncate fu-chip-text"><span *ngIf="title" class="fu-chip-label" [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.CHIP_FILTER_LABEL">{{ title + ': ' }}</span><span [attr.data-testid]="testIdsService.getTestAttribute.bind(this) | generic:testId:testIdIncludeExcludeModifiers.CHIP_FILTER_VALUE">{{ selected$ | async }}</span></div>
     </div>
 </ng-template>

projects/fusion-ui/components/dropdown-dual-multi-select/common/base/dropdown-dual-multi-select.base.component.ts

@@ -1,4 +1,17 @@
-import {Directive, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output, Renderer2, TemplateRef, ViewChild} from '@angular/core';
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    HostBinding,
+    Injector,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    Renderer2,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import {InputSize} from '@ironsource/fusion-ui/components/input/common/base';
 import {ControlValueAccessor, FormControl} from '@angular/forms';
 import {DynamicComponentConfiguration} from '@ironsource/fusion-ui/components/dynamic-components/common/entities';
@@ -9,6 +22,8 @@ import {ApiBase} from '@ironsource/fusion-ui/components/api-base';
 import {UniqueIdService} from '@ironsource/fusion-ui/services/unique-id';
 import {BackendPagination, SelectedItemName} from '@ironsource/fusion-ui/components/dropdown';
 import {isNullOrUndefined} from '@ironsource/fusion-ui/utils';
+import {IncludeExcludeTestIdModifiers} from '@ironsource/fusion-ui/entities';
+import {TestIdsService} from '@ironsource/fusion-ui/services/test-ids';
 
 const CLASS_LIST = [
     'dual-select-button',
@@ -32,6 +47,8 @@ export abstract class DropdownDualMultiSelectBaseComponent extends ApiBase imple
     @Input() autoComplete: boolean = true;
     @Input() title: string;
     /** @internal */
+    @Input() testId: string;
+    /** @internal */
     @Input() pendingItems: boolean = false;
     /** @internal */
     @Input() set hasSelectAll(value: boolean) {
@@ -43,6 +60,11 @@ export abstract class DropdownDualMultiSelectBaseComponent extends ApiBase imple
         return this._hasSelectAll;
     }
 
+    /** @internal */
+    testIdIncludeExcludeModifiers: typeof IncludeExcludeTestIdModifiers = IncludeExcludeTestIdModifiers;
+    /** @internal */
+    testIdsService: TestIdsService = this.injector.get(TestIdsService);
+
     @Input() set placeholder(data: string) {
         this.placeholder$.next(data);
         this.defaultPlaceHolder = data;
@@ -89,6 +111,10 @@ export abstract class DropdownDualMultiSelectBaseComponent extends ApiBase imple
         return !isNullOrUndefined(this.backendPaginationState);
     }
 
+    @HostBinding('attr.data-testid') get testAttribute(): string {
+        return this.testIdsService.getTestAttribute(this.testId, this.testIdIncludeExcludeModifiers.INCLUDE_EXCLUDE);
+    }
+
     @Output() scrollDown = new EventEmitter();
     @Output() searchChange = new EventEmitter();
     @Output() viewChange = new EventEmitter();
@@ -140,7 +166,12 @@ export abstract class DropdownDualMultiSelectBaseComponent extends ApiBase imple
     /** @internal */
     loadingLeft$ = new BehaviorSubject<boolean>(false);
 
-    constructor(protected element: ElementRef, protected renderer: Renderer2, protected uidService: UniqueIdService) {
+    constructor(
+        protected element: ElementRef,
+        protected renderer: Renderer2,
+        protected uidService: UniqueIdService,
+        private injector: Injector
+    ) {
         super();
         this.uid = this.uidService.getUniqueId().toString();
     }

projects/fusion-ui/components/dropdown-dual-multi-select/v2/components/dropdown-dual-multi-select-body/dropdown-dual-multi-select-body.component.spec.ts

@@ -2,6 +2,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {DropdownDualMultiSelectBodyComponent} from './dropdown-dual-multi-select-body.component';
 import {GetObjectLengthPipe} from '@ironsource/fusion-ui/pipes/collection';
+import {GenericPipe} from "@ironsource/fusion-ui/pipes/generic";
 
 describe('DropdownDualMultiSelectBodyComponent', () => {
     let component: DropdownDualMultiSelectBodyComponent;
@@ -10,7 +11,7 @@ describe('DropdownDualMultiSelectBodyComponent', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
             declarations: [DropdownDualMultiSelectBodyComponent],
-            imports: [GetObjectLengthPipe]
+            imports: [GetObjectLengthPipe, GenericPipe]
         }).compileComponents();
     });
 

projects/fusion-ui/components/dropdown-dual-multi-select/v2/components/dropdown-dual-multi-select-body/dropdown-dual-multi-select-body.component.ts

@@ -46,6 +46,8 @@ export class DropdownDualMultiSelectBodyComponent implements OnInit, OnDestroy,
     @Input() totalItems: number;
     @Input() isPendingItems: boolean;
     @Input() hasSelectAll: boolean = true;
+    /** @internal */
+    @Input() testId: string;
 
     @Input() set items(data: DropdownOption[]) {
         this.options$.next(data || []);

projects/fusion-ui/components/dropdown-dual-multi-select/v2/components/dropdown-dual-multi-select-body/dropdown-dual-multi-select-body.module.ts

@@ -10,6 +10,7 @@ import {LoaderInlineModule} from '@ironsource/fusion-ui/components/loader-inline
 import {DropdownDualMultiSelectLoadingModule} from '../dropdown-dual-multi-select-loading/dropdown-dual-multi-select-loading.module';
 import {DynamicComponentsModule} from '@ironsource/fusion-ui/components/dynamic-components/v1';
 import {GetObjectLengthPipe} from '@ironsource/fusion-ui/pipes/collection';
+import {GenericPipe} from '@ironsource/fusion-ui/pipes/generic';
 
 @NgModule({
     declarations: [DropdownDualMultiSelectBodyComponent, DropdownDualMultiSelectBodyItemComponent],
@@ -23,7 +24,8 @@ import {GetObjectLengthPipe} from '@ironsource/fusion-ui/pipes/collection';
         LoaderInlineModule,
         DropdownDualMultiSelectLoadingModule,
         DynamicComponentsModule,
-        GetObjectLengthPipe
+        GetObjectLengthPipe,
+        GenericPipe
     ]
 })
 export class DropdownDualMultiSelectBodyModule {}

projects/fusion-ui/components/dropdown-dual-multi-select/v2/components/dropdown-dual-multi-select-footer/dropdown-dual-multi-select-footer.component.spec.ts

@@ -1,14 +1,16 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {DropdownDualMultiSelectFooterComponent} from './dropdown-dual-multi-select-footer.component';
+import {GenericPipe} from "@ironsource/fusion-ui/pipes/generic";
 
 describe('DropdownDualMultiSelectFooterComponent', () => {
     let component: DropdownDualMultiSelectFooterComponent;
     let fixture: ComponentFixture<DropdownDualMultiSelectFooterComponent>;
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [DropdownDualMultiSelectFooterComponent]
+            declarations: [DropdownDualMultiSelectFooterComponent],
+            imports: [GenericPipe]
         }).compileComponents();
     });
 

projects/fusion-ui/components/dropdown-dual-multi-select/v2/components/dropdown-dual-multi-select-footer/dropdown-dual-multi-select-footer.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular/core';
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
     selector: 'fusion-dropdown-dual-multi-select-footer',
@@ -7,6 +7,8 @@ import {ChangeDetectionStrategy, Component, EventEmitter, Output} from '@angular
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DropdownDualMultiSelectFooterComponent {
+    /** @internal */
+    @Input() testId: string;
     @Output() applySelect = new EventEmitter<boolean>();
     @Output() closeSelect = new EventEmitter();