test(e2e): add route and service scenario (#191)

* test(e2e): add route and service scenario

* chore: add comment about why props are overriden

* chore: remove a16 e2e app component css

Author: davidlj95

.idea/runConfigurations/ngx_meta_e2e__meta_set_by_route_and_service.xml

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
-import { MetadataRouteData } from '@davidlj95/ngx-meta/routing'
-import * as METADATA from '../../../cypress/fixtures/metadata.json'
 import { ROUTES } from '../../../cypress/fixtures/routes'
 import { MetaSetByServiceComponent } from './meta-set-by-service/meta-set-by-service.component'
 import { MetaSetByRouteComponent } from './meta-set-by-route/meta-set-by-route.component'
+import { MetadataRouteData } from '@davidlj95/ngx-meta/routing'
+import * as METADATA from '../../../cypress/fixtures/metadata.json'
+import { MetaSetByRouteAndServiceComponent } from './meta-set-by-route-and-service/meta-set-by-route-and-service.component'
 
 const metadataRouteData: MetadataRouteData = { meta: METADATA }
 
@@ -18,6 +19,11 @@ const routes: Routes = [
     component: MetaSetByRouteComponent,
     data: metadataRouteData,
   },
+  {
+    path: ROUTES.metaSetByRouteAndService.path,
+    component: MetaSetByRouteAndServiceComponent,
+    data: metadataRouteData,
+  },
 ]
 
 @NgModule({

projects/ngx-meta/e2e/a15/src/app/app-routing.module.ts

@@ -4,7 +4,6 @@ import { ROUTES } from '../../../cypress/fixtures/routes'
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'a15'

projects/ngx-meta/e2e/a15/src/app/app.component.css

@@ -5,6 +5,7 @@ import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { MetaSetByServiceComponent } from './meta-set-by-service/meta-set-by-service.component'
 import { MetaSetByRouteComponent } from './meta-set-by-route/meta-set-by-route.component'
+import { MetaSetByRouteAndServiceComponent } from './meta-set-by-route-and-service/meta-set-by-route-and-service.component'
 import { JsonPipe, NgForOf } from '@angular/common'
 import { RouterOutlet } from '@angular/router'
 import { NgxMetaCoreModule } from '@davidlj95/ngx-meta/core'
@@ -21,6 +22,7 @@ import { NgxMetaJsonLdModule } from '@davidlj95/ngx-meta/json-ld'
     AppComponent,
     MetaSetByServiceComponent,
     MetaSetByRouteComponent,
+    MetaSetByRouteAndServiceComponent,
   ],
   imports: [
     BrowserModule,

projects/ngx-meta/e2e/a15/src/app/app.component.ts

@@ -0,0 +1,12 @@
+Metadata of this page has been set by providing route data:
+
+<pre>{{ routeData | json }}</pre>
+
+And then overridden using <code>NgxMeta</code>'s <code>MetadataService</code>
+service on page's component initialisation
+
+<pre>
+metadataService.set({{ overriddenMetadata | json }})
+</pre>
+
+Check the <code>&lt;head&gt;</code> HTML element of this page to see the results

projects/ngx-meta/e2e/a15/src/app/app.module.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core'
+import { MetadataService, MetadataValues } from '@davidlj95/ngx-meta/core'
+import { ActivatedRoute } from '@angular/router'
+import {
+  OpenGraphMetadata,
+  OpenGraphType,
+} from '@davidlj95/ngx-meta/open-graph'
+import {
+  TwitterCardMetadata,
+  TwitterCardType,
+} from '@davidlj95/ngx-meta/twitter-card'
+import {
+  OpenGraphProfileGender,
+  OpenGraphProfileMetadata,
+} from '@davidlj95/ngx-meta/open-graph-profile'
+
+@Component({
+  selector: 'app-meta-set-by-route-and-service',
+  templateUrl: './meta-set-by-route-and-service.component.html',
+})
+export class MetaSetByRouteAndServiceComponent implements OnInit {
+  protected readonly routeData: unknown
+  protected readonly overriddenMetadata: OpenGraphMetadata &
+    OpenGraphProfileMetadata &
+    TwitterCardMetadata = {
+    openGraph: {
+      type: OpenGraphType.Book,
+      profile: {
+        gender: OpenGraphProfileGender.Female,
+      },
+    },
+    twitterCard: {
+      card: TwitterCardType.SummaryLargeImage,
+    },
+  }
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private readonly metadataService: MetadataService,
+  ) {
+    this.routeData = activatedRoute.snapshot.data
+  }
+
+  ngOnInit(): void {
+    this.metadataService.set(
+      this.overriddenMetadata as unknown as MetadataValues,
+    )
+  }
+}

projects/ngx-meta/e2e/a15/src/app/meta-set-by-route-and-service/meta-set-by-route-and-service.component.html

@@ -4,7 +4,6 @@ import { ActivatedRoute } from '@angular/router'
 @Component({
   selector: 'app-meta-set-by-route',
   templateUrl: './meta-set-by-route.component.html',
-  styleUrls: ['./meta-set-by-route.component.css'],
 })
 export class MetaSetByRouteComponent {
   protected readonly routeData: unknown

projects/ngx-meta/e2e/a15/src/app/meta-set-by-route-and-service/meta-set-by-route-and-service.component.ts

@@ -5,7 +5,6 @@ import { MetadataService } from '@davidlj95/ngx-meta/core'
 @Component({
   selector: 'app-meta-set-by-service',
   templateUrl: './meta-set-by-service.component.html',
-  styleUrls: ['./meta-set-by-service.component.css'],
 })
 export class MetaSetByServiceComponent implements OnInit, OnDestroy {
   protected readonly metadata = METADATA

projects/ngx-meta/e2e/a15/src/app/meta-set-by-route/meta-set-by-route.component.css

@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'
 import { ROUTES } from '../../../cypress/fixtures/routes'
 import { MetaSetByServiceComponent } from './meta-set-by-service/meta-set-by-service.component'
 import { MetaSetByRouteComponent } from './meta-set-by-route/meta-set-by-route.component'
+import { MetaSetByRouteAndServiceComponent } from './meta-set-by-route-and-service/meta-set-by-route-and-service.component'
 import { MetadataRouteData } from '@davidlj95/ngx-meta/routing'
 import * as METADATA from '../../../cypress/fixtures/metadata.json'
 
@@ -18,6 +19,11 @@ const routes: Routes = [
     component: MetaSetByRouteComponent,
     data: metadataRouteData,
   },
+  {
+    path: ROUTES.metaSetByRouteAndService.path,
+    component: MetaSetByRouteAndServiceComponent,
+    data: metadataRouteData,
+  },
 ]
 
 @NgModule({

projects/ngx-meta/e2e/a15/src/app/meta-set-by-route/meta-set-by-route.component.ts

@@ -4,7 +4,6 @@ import { ROUTES } from '../../../cypress/fixtures/routes'
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
   title = 'a16'

projects/ngx-meta/e2e/a15/src/app/meta-set-by-service/meta-set-by-service.component.css

@@ -7,6 +7,7 @@ import { JsonPipe, NgForOf } from '@angular/common'
 import { RouterOutlet } from '@angular/router'
 import { MetaSetByServiceComponent } from './meta-set-by-service/meta-set-by-service.component'
 import { MetaSetByRouteComponent } from './meta-set-by-route/meta-set-by-route.component'
+import { MetaSetByRouteAndServiceComponent } from './meta-set-by-route-and-service/meta-set-by-route-and-service.component'
 import { NgxMetaCoreModule } from '@davidlj95/ngx-meta/core'
 import * as DEFAULTS from '../../../cypress/fixtures/defaults.json'
 import { NgxMetaRoutingModule } from '@davidlj95/ngx-meta/routing'
@@ -21,6 +22,7 @@ import { NgxMetaJsonLdModule } from '@davidlj95/ngx-meta/json-ld'
     AppComponent,
     MetaSetByServiceComponent,
     MetaSetByRouteComponent,
+    MetaSetByRouteAndServiceComponent,
   ],
   imports: [
     BrowserModule,

projects/ngx-meta/e2e/a15/src/app/meta-set-by-service/meta-set-by-service.component.ts

@@ -0,0 +1,12 @@
+Metadata of this page has been set by providing route data:
+
+<pre>{{ routeData | json }}</pre>
+
+And then overridden using <code>NgxMeta</code>'s <code>MetadataService</code>
+service on page's component initialisation
+
+<pre>
+metadataService.set({{ overriddenMetadata | json }})
+</pre>
+
+Check the <code>&lt;head&gt;</code> HTML element of this page to see the results

projects/ngx-meta/e2e/a16/src/app/app-routing.module.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit } from '@angular/core'
+import { MetadataService, MetadataValues } from '@davidlj95/ngx-meta/core'
+import { ActivatedRoute } from '@angular/router'
+import {
+  OpenGraphMetadata,
+  OpenGraphType,
+} from '@davidlj95/ngx-meta/open-graph'
+import {
+  TwitterCardMetadata,
+  TwitterCardType,
+} from '@davidlj95/ngx-meta/twitter-card'
+import {
+  OpenGraphProfileGender,
+  OpenGraphProfileMetadata,
+} from '@davidlj95/ngx-meta/open-graph-profile'
+
+@Component({
+  selector: 'app-meta-set-by-route-and-service',
+  templateUrl: './meta-set-by-route-and-service.component.html',
+})
+export class MetaSetByRouteAndServiceComponent implements OnInit {
+  protected readonly routeData: unknown
+  protected readonly overriddenMetadata: OpenGraphMetadata &
+    OpenGraphProfileMetadata &
+    TwitterCardMetadata = {
+    openGraph: {
+      type: OpenGraphType.Book,
+      profile: {
+        gender: OpenGraphProfileGender.Female,
+      },
+    },
+    twitterCard: {
+      card: TwitterCardType.SummaryLargeImage,
+    },
+  }
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private readonly metadataService: MetadataService,
+  ) {
+    this.routeData = activatedRoute.snapshot.data
+  }
+
+  ngOnInit(): void {
+    this.metadataService.set(
+      this.overriddenMetadata as unknown as MetadataValues,
+    )
+  }
+}

projects/ngx-meta/e2e/a16/src/app/app.component.css

@@ -4,7 +4,6 @@ import { ActivatedRoute } from '@angular/router'
 @Component({
   selector: 'app-meta-set-by-route',
   templateUrl: './meta-set-by-route.component.html',
-  styleUrls: ['./meta-set-by-route.component.css'],
 })
 export class MetaSetByRouteComponent {
   protected readonly routeData: unknown

projects/ngx-meta/e2e/a16/src/app/app.component.ts

@@ -5,7 +5,6 @@ import { MetadataService } from '@davidlj95/ngx-meta/core'
 @Component({
   selector: 'app-meta-set-by-service',
   templateUrl: './meta-set-by-service.component.html',
-  styleUrls: ['./meta-set-by-service.component.css'],
 })
 export class MetaSetByServiceComponent implements OnInit, OnDestroy {
   protected readonly metadata = METADATA

projects/ngx-meta/e2e/a16/src/app/app.module.ts

@@ -8,7 +8,6 @@ import { ROUTES } from '../../../cypress/fixtures/routes'
   standalone: true,
   imports: [CommonModule, RouterOutlet, RouterLink],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'a17'

projects/ngx-meta/e2e/a16/src/app/meta-set-by-route-and-service/meta-set-by-route-and-service.component.html

@@ -4,6 +4,7 @@ import { ROUTES } from '../../../cypress/fixtures/routes'
 import { MetaSetByRouteComponent } from './meta-set-by-route/meta-set-by-route.component'
 import { MetadataRouteData } from '@davidlj95/ngx-meta/routing'
 import METADATA from '../../../cypress/fixtures/metadata.json'
+import { MetaSetByRouteAndServiceComponent } from './meta-set-by-route-and-service/meta-set-by-route-and-service.component'
 
 const metadataRouteData: MetadataRouteData = { meta: METADATA }
 
@@ -17,4 +18,9 @@ export const routes: Routes = [
     component: MetaSetByRouteComponent,
     data: metadataRouteData,
   },
+  {
+    path: ROUTES.metaSetByRouteAndService.path,
+    component: MetaSetByRouteAndServiceComponent,
+    data: metadataRouteData,
+  },
 ]

projects/ngx-meta/e2e/a16/src/app/meta-set-by-route-and-service/meta-set-by-route-and-service.component.ts

@@ -0,0 +1,12 @@
+Metadata of this page has been set by providing route data:
+
+<pre>{{ routeData | json }}</pre>
+
+And then overridden using <code>NgxMeta</code>'s <code>MetadataService</code>
+service on page's component initialisation
+
+<pre>
+metadataService.set({{ overriddenMetadata | json }})
+</pre>
+
+Check the <code>&lt;head&gt;</code> HTML element of this page to see the results

projects/ngx-meta/e2e/a16/src/app/meta-set-by-route/meta-set-by-route.component.css

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core'
+import { MetadataService, MetadataValues } from '@davidlj95/ngx-meta/core'
+import { JsonPipe } from '@angular/common'
+import { ActivatedRoute } from '@angular/router'
+import {
+  OpenGraphMetadata,
+  OpenGraphType,
+} from '@davidlj95/ngx-meta/open-graph'
+import {
+  TwitterCardMetadata,
+  TwitterCardType,
+} from '@davidlj95/ngx-meta/twitter-card'
+import {
+  OpenGraphProfileGender,
+  OpenGraphProfileMetadata,
+} from '@davidlj95/ngx-meta/open-graph-profile'
+
+@Component({
+  selector: 'app-meta-set-by-route-and-service',
+  standalone: true,
+  templateUrl: './meta-set-by-route-and-service.component.html',
+  imports: [JsonPipe],
+})
+export class MetaSetByRouteAndServiceComponent implements OnInit {
+  protected readonly routeData: unknown
+  protected readonly overriddenMetadata: OpenGraphMetadata &
+    OpenGraphProfileMetadata &
+    TwitterCardMetadata = {
+    openGraph: {
+      type: OpenGraphType.Book, // using enums to watch bundle size increase
+      profile: {
+        gender: OpenGraphProfileGender.Female,
+      },
+    },
+    twitterCard: {
+      card: TwitterCardType.SummaryLargeImage,
+    },
+  }
+
+  constructor(
+    activatedRoute: ActivatedRoute,
+    private readonly metadataService: MetadataService,
+  ) {
+    this.routeData = activatedRoute.snapshot.data
+  }
+
+  ngOnInit(): void {
+    this.metadataService.set(
+      this.overriddenMetadata as unknown as MetadataValues,
+    )
+  }
+}

projects/ngx-meta/e2e/a16/src/app/meta-set-by-route/meta-set-by-route.component.ts

@@ -7,7 +7,6 @@ import { JsonPipe } from '@angular/common'
   standalone: true,
   imports: [JsonPipe],
   templateUrl: './meta-set-by-route.component.html',
-  styleUrl: './meta-set-by-route.component.css',
 })
 export class MetaSetByRouteComponent {
   protected readonly routeData: unknown

projects/ngx-meta/e2e/a16/src/app/meta-set-by-service/meta-set-by-service.component.css

@@ -7,7 +7,6 @@ import { JsonPipe } from '@angular/common'
   selector: 'app-meta-set-by-service',
   standalone: true,
   templateUrl: './meta-set-by-service.component.html',
-  styleUrl: './meta-set-by-service.component.css',
   imports: [JsonPipe],
 })
 export class MetaSetByServiceComponent implements OnInit, OnDestroy {