From f2adb91ecfecbb5c8e9df7ed37e3a304922efca0 Mon Sep 17 00:00:00 2001
From: Josip Tomic <josip.tomic318@gmail.com>
Date: Mon, 4 Mar 2019 17:51:01 +0100
Subject: [PATCH 1/2] Added step classes to step and backdrop divs

---
 src/lib/src/components/step/joyride-step.component.html | 2 +-
 src/lib/src/services/joyride-backdrop.service.ts        | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/src/components/step/joyride-step.component.html b/src/lib/src/components/step/joyride-step.component.html
index 72ae894c..21b4bdb6 100644
--- a/src/lib/src/components/step/joyride-step.component.html
+++ b/src/lib/src/components/step/joyride-step.component.html
@@ -1,4 +1,4 @@
-<div #stepHolder class="joyride-step__holder" [style.top.px]="topPosition" [style.left.px]="leftPosition">
+<div #stepHolder class="joyride-step__holder {{'joyride-step-' + step.name}}" [style.top.px]="topPosition" [style.left.px]="leftPosition">
     <joyride-arrow *ngIf="showArrow" class="joyride-step__arrow" [position]="arrowPosition" [style.top.px]="arrowTopPosition"
         [style.left.px]="arrowLeftPosition"></joyride-arrow>
     <div #stepContainer class="joyride-step__container">
diff --git a/src/lib/src/services/joyride-backdrop.service.ts b/src/lib/src/services/joyride-backdrop.service.ts
index dc6bc7bb..731282ce 100644
--- a/src/lib/src/services/joyride-backdrop.service.ts
+++ b/src/lib/src/services/joyride-backdrop.service.ts
@@ -48,6 +48,7 @@ export class JoyrideBackdropService {
         this.renderer.setStyle(this.currentBackdropContainer, 'width', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'height', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'z-index', '1000');
+        this.renderer.addClass(this.currentBackdropContainer, 'backdrop-' + step.name);
 
         this.backdropContent = this.renderer.createElement('div');
         this.renderer.addClass(this.backdropContent, 'backdrop-content');

From ec0d386ed50c0a1abc52015932e5cdd5f53fde83 Mon Sep 17 00:00:00 2001
From: Josip Tomic <revan811@gmail.com>
Date: Wed, 6 Mar 2019 11:48:51 +0100
Subject: [PATCH 2/2] Refactored classes to ids, added tests

---
 .../src/components/step/joyride-step.component.html   |  2 +-
 .../components/step/joyride-step.component.spec.ts    | 11 +++++++++++
 src/lib/src/services/joyride-backdrop.service.spec.ts |  8 ++++++++
 src/lib/src/services/joyride-backdrop.service.ts      |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/src/components/step/joyride-step.component.html b/src/lib/src/components/step/joyride-step.component.html
index 21b4bdb6..3fb70641 100644
--- a/src/lib/src/components/step/joyride-step.component.html
+++ b/src/lib/src/components/step/joyride-step.component.html
@@ -1,4 +1,4 @@
-<div #stepHolder class="joyride-step__holder {{'joyride-step-' + step.name}}" [style.top.px]="topPosition" [style.left.px]="leftPosition">
+<div #stepHolder class="joyride-step__holder" [id]="'joyride-step-' + step.name" [style.top.px]="topPosition" [style.left.px]="leftPosition">
     <joyride-arrow *ngIf="showArrow" class="joyride-step__arrow" [position]="arrowPosition" [style.top.px]="arrowTopPosition"
         [style.left.px]="arrowLeftPosition"></joyride-arrow>
     <div #stepContainer class="joyride-step__container">
diff --git a/src/lib/src/components/step/joyride-step.component.spec.ts b/src/lib/src/components/step/joyride-step.component.spec.ts
index 298b395b..ef84e8ab 100644
--- a/src/lib/src/components/step/joyride-step.component.spec.ts
+++ b/src/lib/src/components/step/joyride-step.component.spec.ts
@@ -300,6 +300,17 @@ describe('JoyrideStepComponent', () => {
                 expect(stepHolder.nativeElement.style.transform).toBe('translateX(-50px)');
             });
 
+            it('should have id with step name on step holder div', () => {
+                STEP.name = "myStep";
+                component.step = STEP;
+                component.ngAfterViewInit();
+
+                hostFixture.detectChanges();
+
+                let stepHolder = hostFixture.debugElement.query(By.css('.joyride-step__holder'));
+                expect(stepHolder.nativeElement.id).toBe('joyride-step-myStep');
+            });
+
             describe('when the step position is "top"', () => {
                 beforeEach(() => {
                     STEP.position = 'top';
diff --git a/src/lib/src/services/joyride-backdrop.service.spec.ts b/src/lib/src/services/joyride-backdrop.service.spec.ts
index e4e1771e..cb4d8e68 100644
--- a/src/lib/src/services/joyride-backdrop.service.spec.ts
+++ b/src/lib/src/services/joyride-backdrop.service.spec.ts
@@ -84,6 +84,14 @@ describe('JoyrideBackdropService', () => {
             expect(styles.height).toBe('34px');
             expect(styles.getPropertyValue('flex-shrink')).toBe('0');
         });
+
+        it('should set id to contain step name', () => {
+            STEP.name = 'myStep';
+            backdropService.draw(STEP);
+
+            let backdropMiddleContainer = document.getElementsByClassName('backdrop-container')[0];
+            expect(backdropMiddleContainer.id).toBe('backdrop-myStep');
+        });
     });
 
     describe('redraw() and redrawTarget()', () => {
diff --git a/src/lib/src/services/joyride-backdrop.service.ts b/src/lib/src/services/joyride-backdrop.service.ts
index 731282ce..18732441 100644
--- a/src/lib/src/services/joyride-backdrop.service.ts
+++ b/src/lib/src/services/joyride-backdrop.service.ts
@@ -48,7 +48,7 @@ export class JoyrideBackdropService {
         this.renderer.setStyle(this.currentBackdropContainer, 'width', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'height', '100%');
         this.renderer.setStyle(this.currentBackdropContainer, 'z-index', '1000');
-        this.renderer.addClass(this.currentBackdropContainer, 'backdrop-' + step.name);
+        this.renderer.setAttribute(this.currentBackdropContainer, 'id', 'backdrop-' + step.name);
 
         this.backdropContent = this.renderer.createElement('div');
         this.renderer.addClass(this.backdropContent, 'backdrop-content');