fix: prevent elements with non-unique ids in product-variation-select…

…-component (#74/#76)
intershop · Jan 9, 2020 · 85c8cb2 · 85c8cb2
1 parent 547ce32
commit 85c8cb2
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/e2e/cypress/integration/pages/shopping/product-detail.page.ts b/e2e/cypress/integration/pages/shopping/product-detail.page.ts
@@ -80,7 +80,7 @@ export class ProductDetailPage {
 
   changeVariationWithSelect(id: string, value: string) {
     // tslint:disable-next-line:ban
-    cy.get('#' + id).select(value);
+    cy.get(`[data-testing-id="${id}"]`).select(value);
   }
 
   gotoMasterProduct() {

diff --git a/e2e/cypress/integration/specs/checkout/cart-variation-handling.b2c.e2e-spec.ts b/e2e/cypress/integration/specs/checkout/cart-variation-handling.b2c.e2e-spec.ts
@@ -8,7 +8,7 @@ const _ = {
   productSkuTarget: '201807231-02',
   selections: [
     {
-      attr: '#Attr_harddrivesize',
+      attr: '[data-testing-id="Attr_harddrivesize"]',
       value: '512GB',
     },
   ],

diff --git a/...hared/components/product/product-variation-select/product-variation-select.component.html b/...hared/components/product/product-variation-select/product-variation-select.component.html
@@ -19,8 +19,13 @@
   <form *ngIf="form" [formGroup]="form" class="product-variation-container">
     <div *ngFor="let group of variationOptions" class="product-variation">
       <div class="form-group">
-        <label [for]="group.id" class="col-form-label">{{ group.label }}</label>
-        <select class="form-control" [id]="group.id" [formControlName]="group.id" [attr.data-testing-id]="group.id">
+        <label [for]="uuid + '__' + group.id" class="col-form-label">{{ group.label }}</label>
+        <select
+          class="form-control"
+          [id]="uuid + '__' + group.id"
+          [formControlName]="group.id"
+          [attr.data-testing-id]="group.id"
+        >
           <option *ngFor="let option of group.options" [value]="option.value">
             {{ option.label }}
             <ng-container *ngIf="option.alternativeCombination">

diff --git a/.../shared/components/product/product-variation-select/product-variation-select.component.ts b/.../shared/components/product/product-variation-select/product-variation-select.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, Output } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
+import { UUID } from 'angular2-uuid';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -20,6 +21,7 @@ export class ProductVariationSelectComponent implements OnChanges, OnDestroy {
 
   form: FormGroup;
   advancedVariationHandling: boolean;
+  uuid = UUID.UUID();
 
   private destroy$ = new Subject();