Merge pull request #206 from zyfra/up_datatestid

feat(testid): update data-testid attributes by RFC

apps/doc/src/app/components/buttons/icon-button/icon-button.component.ts

@@ -5,7 +5,6 @@ import {
  PolymorphContent,
  PrizmAppearance,
  PrizmAppearanceType,
- PrizmContent,
  PrizmSize,
 } from '@prizm-ui/components';
 

libs/components/src/lib/components/accordion/accordion.component.ts

@@ -24,8 +24,8 @@ export class PrizmAccordionComponent implements AfterContentInit {
  @ContentChildren(PrizmAccordionItemComponent, { descendants: false })
  accordionItems: QueryList<PrizmAccordionItemComponent>;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_accordion';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_accordion';
 
  constructor(private readonly destroy$: PrizmDestroyService) {}
 

libs/components/src/lib/components/accordion/components/accordion-item/accordion-item.component.ts

@@ -30,8 +30,8 @@ export class PrizmAccordionItemComponent implements OnDestroy {
  @Input() disabled = false;
  @Output() isExpandedChange = new EventEmitter<boolean>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_accordion_item';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_accordion_item';
 
  @ContentChild(AccordionContentDirective, { read: TemplateRef })
  public readonly accordionContent: TemplateRef<AccordionContentDirective>;

libs/components/src/lib/components/button/button.component.ts

@@ -84,8 +84,9 @@ export class PrizmButtonComponent extends AbstractPrizmInteractive implements Pr
  return this.focusable ? 0 : -1;
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_button';
+ @Input()
+ @HostBinding('attr.data-testid')
+ readonly testId = this.hasIcon ? 'ui_button' : 'ui_icon_button';
 
  @HostListener('focusin', ['true'])
  @HostListener('focusout', ['false'])
@@ -143,4 +144,8 @@ export class PrizmButtonComponent extends AbstractPrizmInteractive implements Pr
  get loaderSize(): PrizmSize {
  return this.size === 'l' || this.size === 'xl' ? 'm' : 's';
  }
+
+ get hasIcon(): boolean {
+ return !!(this.icon || this.iconRight);
+ }
 }

libs/components/src/lib/components/button/split-button/split-button.component.ts

@@ -50,8 +50,8 @@ export class PrizmSplitButtonComponent {
  @Output()
  clickButton = new EventEmitter<void>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_split_button';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_split_button';
 
  @ViewChild('buttonRef', { static: true, read: ElementRef }) buttonEl: ElementRef;
  @ViewChild('iconButtonRef', { static: true, read: ElementRef }) iconButtonEl: ElementRef;

libs/components/src/lib/components/calendar/calendar.component.ts

@@ -74,8 +74,8 @@ export class PrizmCalendarComponent implements PrizmWithOptionalMinMax<PrizmDay>
  @Output()
  readonly hoveredItemChange = new EventEmitter<PrizmDay | null>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_calendar';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_calendar';
 
  year: PrizmYear | null = null;
  clickedMonth: PrizmMonth | null = null;

libs/components/src/lib/components/card/card.component.ts

@@ -17,6 +17,6 @@ export class PrizmCardComponent {
  return prizmGetShadow(this.shadow);
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_card';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_card';
 }

libs/components/src/lib/components/checkbox/checkbox.component.ts

@@ -48,8 +48,8 @@ export class PrizmCheckboxComponent implements ControlValueAccessor, OnDestroy,
 
  @Output() changed = new EventEmitter<boolean>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_checkbox';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_checkbox';
 
  changeFn: (value: boolean) => void;
  touchedFn: () => void;

libs/components/src/lib/components/chips/chips.component.ts

@@ -47,8 +47,8 @@ export class PrizmChipsComponent implements ControlValueAccessor, OnInit, OnDest
  @Output() public removeChipEvent: EventEmitter<string> = new EventEmitter();
  @Output() public clickChipEvent: EventEmitter<string> = new EventEmitter();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_chips';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_chips';
  public accessorIsDisabled = false;
  public readonly overflowedChipsList$ = new BehaviorSubject<Set<number>>(new Set());
 

libs/components/src/lib/components/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -45,8 +45,8 @@ export class PrizmDialogConfirmComponent<DATA = unknown> {
  @HostBinding('style.width')
  readonly width = '100%';
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_confirm_dialog';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_form_submit';
 
  private readonly animation = {
  value: '',

libs/components/src/lib/components/dialogs/dialog/dialog.component.ts

@@ -45,8 +45,8 @@ export class PrizmDialogComponent<O = unknown, DATA = unknown> {
  return this.animation;
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_dialog';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_overlay';
 
  @HostBinding('style.width')
  readonly width = '100%';

libs/components/src/lib/components/dialogs/sidebar/sidebar.component.ts

@@ -49,8 +49,8 @@ export class PrizmSidebarComponent<DATA = unknown> {
  return this.animation;
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_sidebar';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_area--sidebar';
 
  private readonly animation = {
  value: '',

libs/components/src/lib/components/dropdowns/multi-select/multi-select.component.ts

@@ -138,8 +138,8 @@ export class PrizmMultiSelectComponent<T>
  @prizmDefaultProp()
  outer: boolean = this.options.outer;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_multi_select';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui-muilti-select';
 
  public inputTextElement: PrizmInputTextComponent | null;
  public readonly defaultIcon = 'chevrons-dropdown';

libs/components/src/lib/components/dropdowns/select/select.component.ts

@@ -144,8 +144,8 @@ export class PrizmSelectComponent<T>
  @prizmDefaultProp()
  outer: boolean = this.options.outer;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_select';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_select';
 
  @Output()
  public readonly searchChange = new EventEmitter<string | null>();

libs/components/src/lib/components/expand/expand.component.ts

@@ -70,8 +70,8 @@ export class PrizmExpandComponent {
  @HostBinding('attr.aria-expanded')
  private expanded_: boolean | null = null;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_expand';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui-area--expand';
 
  @HostListener('transitionend', ['$event'])
  public onTransitionEnd(event: TransitionEvent): void {

libs/components/src/lib/components/grid/components/grid-item/grid-item.component.ts

@@ -10,6 +10,6 @@ export class GridItemComponent {
  @Input() public colPos = '0';
  @Input() public rowPos = '0';
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_grid_item';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_area';
 }

libs/components/src/lib/components/grid/grid.component.ts

@@ -25,8 +25,8 @@ export class GridComponent implements AfterContentInit {
  @ContentChildren(GridItemComponent, { read: ElementRef }) public gridItems: QueryList<ElementRef>;
  @ContentChildren(GridItemComponent) public gridItemsData: QueryList<GridItemComponent>;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_grid';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui-area--grid';
 
  public ngAfterContentInit(): void {
  const containerElement = this.container.nativeElement;

libs/components/src/lib/components/icon/icon.component.ts

@@ -13,6 +13,6 @@ export class IconComponent {
  @Input() iconClass: string = null;
  @Input() size: string | number = 16;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_icon';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_icon' + this.iconClass;
 }

libs/components/src/lib/components/input/carousel/carousel.component.ts

@@ -56,8 +56,8 @@ export class PrizmCarouselComponent extends PrizmInputControl<any> implements Co
  }
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_carousel';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui-area--carousel';
 
  /**
  * Required input

libs/components/src/lib/components/input/common/input-icon-button/input-icon-button.component.ts

@@ -20,8 +20,8 @@ export class PrizmInputIconButtonComponent {
  @HostBinding('attr.type')
  type: 'button' | 'reset' | 'submit' = 'button';
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_icon_button';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_icon_button';
 
  get tabindex(): number {
  return this.interactive ? 0 : -1;

libs/components/src/lib/components/input/input-date-multi/input-date-multi.component.ts

@@ -47,8 +47,8 @@ export class PrizmInputDateMultiComponent implements OnInit {
  @prizmDefaultProp()
  currentIdx = 0;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_date_multi';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_date_multi';
 
  public open = false;
 

libs/components/src/lib/components/input/input-date-range/input-date-range.component.ts

@@ -107,8 +107,8 @@ export class PrizmInputDateRangeComponent
  @prizmDefaultProp()
  maxLength: PrizmDayLike | null = null;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_date_range';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_date_range';
 
  open = false;
 

libs/components/src/lib/components/input/input-date-relative/input-date-relative.component.ts

@@ -106,8 +106,8 @@ export class PrizmInputDateRelativeComponent
  @prizmDefaultProp()
  extraButtonInjector: Injector = this.injector;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_date_relative';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_date_relative';
 
  public isOpen = false;
 

libs/components/src/lib/components/input/input-date-time/input-date-time.component.ts

@@ -116,8 +116,8 @@ export class PrizmInputDateTimeComponent
  @prizmDefaultProp()
  timeMode: PrizmTimeMode = `HH:MM`;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_date_time';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_date_time';
 
  public openTimeTemplate = false;
 

libs/components/src/lib/components/input/input-date/input-date.component.ts

@@ -117,7 +117,7 @@ export class PrizmInputDateComponent
  @prizmDefaultProp()
  extraButtonInjector: Injector = this.injector;
 
- @HostBinding('attr.testId')
+ @HostBinding('attr.data-testid')
  readonly testId = 'prizm_input_date';
 
  public open = false;

libs/components/src/lib/components/input/input-number/input-number.directive.ts

@@ -11,8 +11,8 @@ export class PrizmInputNumberDirective {
  @Input() step = 1;
  @Input() value!: number;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_number';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_number';
 
  constructor(
  @Host() private readonly el: ElementRef<HTMLInputElement>,

libs/components/src/lib/components/input/input-password/input-password.directive.ts

@@ -6,8 +6,8 @@ import { PrizmInputTextComponent } from '../input-text/input-text.component';
  exportAs: 'prizmInputPassword',
 })
 export class PrizmInputPasswordDirective {
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_password';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_password';
 
  constructor(
  @Host() private readonly el: ElementRef<HTMLInputElement>,

libs/components/src/lib/components/input/input-text/input-text.component.ts

@@ -79,8 +79,8 @@ export class PrizmInputTextComponent extends PrizmInputControl<string> implement
  this.stateChanges.next();
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_text';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_text';
 
  private _required: boolean | undefined;
 

libs/components/src/lib/components/input/input-time/input-time.component.ts

@@ -98,8 +98,8 @@ export class PrizmInputTimeComponent
  @prizmDefaultProp()
  extraButtonInjector: Injector = this.injector;
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_input_time';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_input_time';
 
  public open = false;
  public rightButtons$: BehaviorSubject<PrizmDateButton[]>;

libs/components/src/lib/components/internal/primitive-calendar-range/primitive-calendar-range.component.ts

@@ -67,8 +67,8 @@ export class PrizmPrimitiveCalendarRangeComponent implements OnInit {
  @Output()
  readonly dayClick = new EventEmitter<PrizmDay>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_calendar_range';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_calendar_range';
 
  hoveredItem: PrizmDay | null = null;
 

libs/components/src/lib/components/internal/primitive-calendar/primitive-calendar.component.ts

@@ -70,8 +70,8 @@ export class PrizmPrimitiveCalendarComponent {
  @Output()
  readonly dayClick = new EventEmitter<PrizmDay>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_calendar';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_calendar';
 
  constructor(
  @Inject(PRIZM_ORDERED_SHORT_WEEK_DAYS)

libs/components/src/lib/components/internal/primitive-month-picker/primitive-month-picker.component.ts

@@ -63,8 +63,8 @@ export class PrizmPrimitiveMonthPickerComponent {
  return !!value && this.isRange(value) && value.from.monthSame(value.to);
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_month_picker';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_month_picker';
 
  get rows(): number {
  return ROWS;

libs/components/src/lib/components/internal/primitive-spin-button/primitive-spin-button.component.ts

@@ -49,8 +49,8 @@ export class PrizmPrimitiveSpinButtonComponent extends AbstractPrizmInteractive
  @Output()
  readonly rightClick = new EventEmitter<void>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_spin_button';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_spin_button';
 
  constructor(@Inject(PRIZM_SPIN_TEXTS) readonly spinTexts$: Observable<[string, string]>) {
  super();

libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.html

@@ -24,7 +24,7 @@
 <ng-template #button>
  <div class="year-box" (click)="onYearClick($event)">
  <button
- [attr.testId]="'prizm-primitive-year-month-pagination__year-button'"
+ [attr.data-testid]="'prizm-primitive-year-month-pagination__year-button'"
  type="button"
  prizmLink
  [prizmFocusable]="false"

libs/components/src/lib/components/internal/primitive-year-month-pagination/primitive-year-month-pagination.component.ts

@@ -45,8 +45,8 @@ export class PrizmPrimitiveYearMonthPaginationComponent implements PrizmWithOpti
  @Output()
  readonly monthClick = new EventEmitter<PrizmMonth>();
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_year_month_pagination';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_year_month_pagination';
 
  public get prevMonthDisabled(): boolean {
  return this.value.monthSameOrBefore?.(this.min);

libs/components/src/lib/components/internal/primitive-year-picker/primitive-year-picker.component.ts

@@ -53,8 +53,8 @@ export class PrizmPrimitiveYearPickerComponent {
  return !!value && this.isRange(value) && value.from.yearSame(value.to);
  }
 
- @HostBinding('attr.testId')
- readonly testId = 'prizm_primitive_year_picker';
+ @HostBinding('attr.data-testid')
+ readonly testId = 'ui_primitive_year_picker';
 
  get rows(): number {
  return Math.ceil((this.calculatedMax - this.calculatedMin) / ITEMS_IN_ROW);