fix and adjust tests

Author: Lms24

packages/angular/src/tracing.ts

@@ -2,6 +2,7 @@
 import {
   AfterViewInit,
   Directive,
+  Inject,
   Injectable,
   Input,
   NgModule,
@@ -173,15 +174,15 @@ export class TraceDirective implements OnInit, AfterViewInit {
 
   private _tracingSpan?: Span;
 
-  public constructor(@Optional() private readonly _vcRef: ViewContainerRef) {}
+  public constructor(@Optional() @Inject(ViewContainerRef) private readonly _vcRef: ViewContainerRef) {}
 
   /**
    * Implementation of OnInit lifecycle method
    * @inheritdoc
    */
   public ngOnInit(): void {
     if (!this.componentName) {
-      this.componentName = detectComponentName(this._vcRef as EnhancedVieContainerRef);
+      this.componentName = detectComponentName(this._vcRef as EnhancedViewContainerRef);
     }
 
     const activeTransaction = getActiveTransaction();
@@ -204,7 +205,7 @@ export class TraceDirective implements OnInit, AfterViewInit {
   }
 }
 
-type EnhancedVieContainerRef = ViewContainerRef & {
+type EnhancedViewContainerRef = ViewContainerRef & {
   _lContainer?: {
     localName?: string;
   }[][];
@@ -215,10 +216,9 @@ type EnhancedVieContainerRef = ViewContainerRef & {
  * Specifically, it looks up the selector of the component (e.g. `app-my-component`) or
  * falls back to the default component name if the selector is not available.
  */
-function detectComponentName(vcRef: EnhancedVieContainerRef | undefined): string {
+function detectComponentName(vcRef: EnhancedViewContainerRef | undefined): string {
   if (vcRef && vcRef._lContainer && vcRef._lContainer[0] && vcRef._lContainer[0][0]) {
-    // TODO: is this preferrable?
-    // Alternative: We could get the class name like so:
+    // Alternatively, we could get the class name like so:
     // const className = Object.getPrototypeOf(vcRef._lContainer[0][8]).constructor.name;
 
     const selectorName = vcRef._lContainer[0][0].localName;

packages/angular/test/tracing.test.ts

@@ -4,14 +4,15 @@ import { Hub } from '@sentry/types';
 
 import { instrumentAngularRouting, TraceClassDecorator, TraceDirective, TraceMethodDecorator } from '../src';
 import { getParameterizedRouteFromSnapshot } from '../src/tracing';
-import { AppComponent, TestEnv, TestViewContainerRef } from './utils/index';
+import { AppComponent, TestEnv } from './utils/index';
 
 let transaction: any;
 
 const defaultStartTransaction = (ctx: any) => {
   transaction = {
     ...ctx,
     setName: jest.fn(name => (transaction.name = name)),
+    startChild: jest.fn(),
   };
 
   return transaction;
@@ -260,67 +261,76 @@ describe('Angular Tracing', () => {
       expect(directive).toBeTruthy();
     });
 
-    it('should create a child tracingSpan on init (WIP)', async () => {
-      const customStartTransaction = jest.fn(defaultStartTransaction);
-
-      @Component({
-        selector: 'app-component',
-        template: '<app-child trace></app-child>',
-      })
-      class AppComponent {
-        public constructor() {}
-      }
+    it("should auto detect the component's selector.", async () => {
+      const directive = new TraceDirective({
+        _lContainer: [[{ localName: 'app-test' }]],
+      } as unknown as any);
 
-      @Component({
-        selector: 'app-child',
-        template: '<p>Hi</p>',
-      })
-      class ChildComponent {
-        public constructor() {}
-      }
+      const customStartTransaction = jest.fn(defaultStartTransaction);
 
       const env = await TestEnv.setup({
-        components: [AppComponent, ChildComponent, TraceDirective],
-        defaultComponent: AppComponent,
+        components: [TraceDirective],
         customStartTransaction,
         useTraceService: false,
       });
 
       transaction.startChild = jest.fn();
 
-      // directive.ngOnInit();
+      directive.ngOnInit();
 
       expect(transaction.startChild).toHaveBeenCalledWith({
         op: 'ui.angular.init',
-        description: '<unknown>',
+        description: '<app-test>',
       });
 
       env.destroy();
     });
 
-    it('should create a child tracingSpan on init', async () => {
-      // const directive = new TraceDirective({} as unknown as any);
-      const customStartTransaction = jest.fn(defaultStartTransaction);
+    it.each([
+      {},
+      {
+        _lContainer: [],
+      },
+      {
+        _lContainer: [[]],
+      },
+      {
+        _lContainer: [[{}]],
+      },
+      {
+        _lContainer: [[{ localName: undefined }]],
+      },
+    ])(
+      "should fall back to the default component name if auto-detection doesn't work and no custom name is given",
+      async (containerViewRef: any) => {
+        const directive = new TraceDirective(containerViewRef);
+        const customStartTransaction = jest.fn(defaultStartTransaction);
 
-      const env = await TestEnv.setup({
-        components: [TraceDirective],
-        customStartTransaction,
-        useTraceService: false,
-      });
+        const env = await TestEnv.setup({
+          components: [TraceDirective],
+          customStartTransaction,
+          useTraceService: false,
+        });
 
-      transaction.startChild = jest.fn();
+        const finishSpan = jest.fn();
+        transaction.startChild = jest.fn().mockReturnValue({ finish: finishSpan });
+        transaction.finish = jest.fn();
 
-      // directive.ngOnInit();
+        directive.ngOnInit();
 
-      expect(transaction.startChild).toHaveBeenCalledWith({
-        op: 'ui.angular.init',
-        description: '<unknown>',
-      });
+        expect(transaction.startChild).toHaveBeenCalledWith({
+          op: 'ui.angular.init',
+          description: '<unknown>',
+        });
 
-      env.destroy();
-    });
+        directive.ngAfterViewInit();
+        expect(finishSpan).toHaveBeenCalledTimes(1);
 
-    it('should use component name as span description', async () => {
+        env.destroy();
+      },
+    );
+
+    it('should use the custom component name as span description if one is passed', async () => {
       const directive = new TraceDirective({} as unknown as any);
       const finishMock = jest.fn();
       const customStartTransaction = jest.fn(defaultStartTransaction);
@@ -347,8 +357,7 @@ describe('Angular Tracing', () => {
     });
 
     it('should finish tracingSpan after view init', async () => {
-      // @ts-ignore - we don't need to pass a param here
-      const directive = new TraceDirective(new TestViewContainerRef());
+      const directive = new TraceDirective({} as unknown as any);
       const finishMock = jest.fn();
       const customStartTransaction = jest.fn(defaultStartTransaction);
 

packages/angular/test/utils/index.ts

@@ -1,4 +1,4 @@
-import { Component, NgModule, ViewContainerRef } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -65,12 +65,7 @@ export class TestEnv {
               deps: [Router],
             },
           ]
-        : [
-            {
-              provide: ViewContainerRef,
-              useValue: new TestViewContainerRef(),
-            },
-          ],
+        : [],
     });
 
     const router: Router = TestBed.inject(Router);
@@ -99,56 +94,3 @@ export class TestEnv {
     jest.clearAllMocks();
   }
 }
-
-// create the test class
-export class TestViewContainerRef extends ViewContainerRef {
-  get element(): import('@angular/core').ElementRef<any> {
-    throw new Error('Method not implemented.');
-  }
-  get injector(): import('@angular/core').Injector {
-    throw new Error('Method not implemented.');
-  }
-  get parentInjector(): import('@angular/core').Injector {
-    throw new Error('Method not implemented.');
-  }
-  clear(): void {
-    throw new Error('Method not implemented.');
-  }
-  get(_index: number): import('@angular/core').ViewRef {
-    throw new Error('Method not implemented.');
-  }
-  get length(): number {
-    throw new Error('Method not implemented.');
-  }
-  createEmbeddedView<C>(
-    _templateRef: import('@angular/core').TemplateRef<C>,
-    _context?: C,
-    _index?: number,
-  ): import('@angular/core').EmbeddedViewRef<C> {
-    throw new Error('Method not implemented.');
-  }
-  createComponent<C>(
-    _componentFactory: import('@angular/core').ComponentFactory<C>,
-    _index?: number,
-    _injector?: import('@angular/core').Injector,
-    _projectableNodes?: any[][],
-    _ngModule?: import('@angular/core').NgModuleRef<any>,
-  ): import('@angular/core').ComponentRef<C> {
-    throw new Error('Method not implemented.');
-  }
-  insert(_viewRef: import('@angular/core').ViewRef, _index?: number): import('@angular/core').ViewRef {
-    throw new Error('Method not implemented.');
-  }
-  move(_viewRef: import('@angular/core').ViewRef, _currentIndex: number): import('@angular/core').ViewRef {
-    throw new Error('Method not implemented.');
-  }
-  indexOf(_viewRef: import('@angular/core').ViewRef): number {
-    throw new Error('Method not implemented.');
-  }
-  remove(_index?: number): void {
-    throw new Error('Method not implemented.');
-  }
-  detach(_index?: number): import('@angular/core').ViewRef {
-    throw new Error('Method not implemented.');
-  }
-}