feat(app): get experiment link dynamically and add tests for embed menu

packages/phoenix-ng/angular.json

@@ -31,9 +31,7 @@
               "projects/phoenix-app/src/assets",
               "projects/phoenix-app/src/api-docs"
             ],
-            "styles": [
-              "projects/phoenix-app/src/styles.scss"
-            ],
+            "styles": ["projects/phoenix-app/src/styles.scss"],
             "allowedCommonJsDependencies": [
               "css-element-queries",
               "@tweenjs/tween.js"
@@ -148,9 +146,7 @@
               "projects/phoenix-app/src/tsconfig.app.json",
               "projects/phoenix-app/src/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -176,9 +172,7 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": "e2e/tsconfig.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -224,9 +218,7 @@
               "projects/phoenix-ui-components/tsconfig.lib.json",
               "projects/phoenix-ui-components/tsconfig.spec.json"
             ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/embed-menu.component.html

@@ -2,8 +2,6 @@
   <div id="embedMenuInner">
     <app-dark-theme></app-dark-theme>
     <app-auto-rotate></app-auto-rotate>
-    <app-experiment-link
-      [experimentLink]="experimentLink"
-    ></app-experiment-link>
+    <app-experiment-link></app-experiment-link>
   </div>
 </div>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/embed-menu.component.scss

@@ -1,15 +1,15 @@
-#embedMenu {
-  display: none;
-
-  #embedMenuInner {
-    display: flex;
-    position: absolute;
-    left: 1rem;
-    bottom: 1rem;
-    background: var(--phoenix-background-color-secondary);
-    border: 1px solid var(--phoenix-background-color-tertiary);
-    box-shadow: var(--phoenix-box-shadow);
-    border-radius: 30px;
-    padding: 0.25rem 0;
-  }
-}
+#embedMenu {
+  display: none;
+
+  #embedMenuInner {
+    display: flex;
+    position: absolute;
+    left: 1rem;
+    bottom: 1rem;
+    background: var(--phoenix-background-color-secondary);
+    border: 1px solid var(--phoenix-background-color-tertiary);
+    box-shadow: var(--phoenix-box-shadow);
+    border-radius: 30px;
+    padding: 0.25rem 0;
+  }
+}

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/embed-menu.component.spec.ts

@@ -8,9 +8,8 @@ describe('EmbedMenuComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EmbedMenuComponent ]
-    })
-    .compileComponents();
+      declarations: [EmbedMenuComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/embed-menu.component.ts

@@ -1,10 +1,8 @@
-import { Component, Input } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-embed-menu',
   templateUrl: './embed-menu.component.html',
   styleUrls: ['./embed-menu.component.scss'],
 })
-export class EmbedMenuComponent {
-  @Input() experimentLink: string;
-}
+export class EmbedMenuComponent {}

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/experiment-link/experiment-link.component.html

@@ -1,5 +1,4 @@
 <app-menu-toggle
-  *ngIf="experimentLink !== undefined"
   tooltip="See full event display"
   icon="link"
   (click)="goToExperiment()"

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/experiment-link/experiment-link.component.spec.ts

@@ -8,9 +8,8 @@ describe('ExperimentLinkComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ExperimentLinkComponent ]
-    })
-    .compileComponents();
+      declarations: [ExperimentLinkComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -22,4 +21,16 @@ describe('ExperimentLinkComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should initialize experiment link', () => {
+    expect((component as any).experimentLink).toBeUndefined();
+    component.ngOnInit();
+    expect((component as any).experimentLink).toBeTruthy();
+  });
+
+  it('should go to experiment link', () => {
+    spyOn(window, 'open').and.stub();
+    component.goToExperiment();
+    expect(window.open).toHaveBeenCalled();
+  });
 });

packages/phoenix-ng/projects/phoenix-ui-components/src/components/embed-menu/experiment-link/experiment-link.component.ts

@@ -1,14 +1,18 @@
-import { Component, Input } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-experiment-link',
   templateUrl: './experiment-link.component.html',
   styleUrls: ['./experiment-link.component.scss'],
 })
-export class ExperimentLinkComponent {
-  @Input() experimentLink: string;
+export class ExperimentLinkComponent implements OnInit {
+  private experimentLink: string;
+
+  ngOnInit() {
+    this.experimentLink = window.location.href.split('?')[0];
+  }
 
   goToExperiment() {
-    window.open('this.experimentLink', '_blank');
+    window.open(this.experimentLink, '_blank');
   }
 }