From 54b499875bbc259b796febb458f0573ffd043b52 Mon Sep 17 00:00:00 2001 From: Uday Vunnam <20707504+udayvunnam@users.noreply.github.com> Date: Sun, 25 Apr 2021 12:04:32 +0530 Subject: [PATCH] feat: open link in new tab on cmd + click, option to open links in new tab by default (#82) --- apps/breadcrumb-demo-e2e/cypress.json | 2 +- .../src/integration/default.spec.ts | 20 +++++++++++++++---- .../src/integration/fragment.spec.ts | 7 +++---- .../src/app/app.component.html | 1 + apps/got-demo-e2e/cypress.json | 2 +- apps/simple-demo-e2e/cypress.json | 2 +- docs/advanced-patterns.md | 8 ++++++++ .../src/lib/breadcrumb.component.html | 13 ++++++++++-- .../src/lib/breadcrumb.component.ts | 19 +++++++----------- libs/xng-breadcrumb/tsconfig.lib.json | 3 ++- 10 files changed, 51 insertions(+), 26 deletions(-) diff --git a/apps/breadcrumb-demo-e2e/cypress.json b/apps/breadcrumb-demo-e2e/cypress.json index 4bb649c..e4e426f 100644 --- a/apps/breadcrumb-demo-e2e/cypress.json +++ b/apps/breadcrumb-demo-e2e/cypress.json @@ -5,7 +5,7 @@ "modifyObstructiveCode": false, "pluginsFile": "./src/plugins/index", "supportFile": "./src/support/index.ts", - "video": true, + "video": false, "videosFolder": "../../dist/cypress/apps/breadcrumb-demo-e2e/videos", "screenshotsFolder": "../../dist/cypress/apps/breadcrumb-demo-e2e/screenshots", "chromeWebSecurity": false diff --git a/apps/breadcrumb-demo-e2e/src/integration/default.spec.ts b/apps/breadcrumb-demo-e2e/src/integration/default.spec.ts index c60a66e..1abbd84 100644 --- a/apps/breadcrumb-demo-e2e/src/integration/default.spec.ts +++ b/apps/breadcrumb-demo-e2e/src/integration/default.spec.ts @@ -53,7 +53,7 @@ describe('breadcrumb-demo', () => { }); }); - it('Should merge parent module/component data with child module/component', () => { + it('should merge parent module/component data with child module/component', () => { cy.visit('/'); cy.get('.navbar-header').contains('Mentees').click(); cy.get('bd-mentee-list .mat-card-avatar').eq(0).click(); @@ -64,12 +64,12 @@ describe('breadcrumb-demo', () => { ); // defined on grand child component }); - it('Should have customized breadcrumb working via *xngBreadcrumbItem directive', () => { + it('should have customized breadcrumb working via *xngBreadcrumbItem directive', () => { cy.get('#titleCase').contains('Student'); // title case cy.get('#titleCase').contains('>>'); // custom seperator }); - it('Should have invoked breadcrumb as a function with resolved param', () => { + it('should have invoked breadcrumb as a function with resolved param', () => { cy.visit('/'); cy.get('.navbar-header').contains('Mentees').click(); cy.get('bd-mentee-list .mat-card-avatar').eq(0).click(); @@ -80,11 +80,23 @@ describe('breadcrumb-demo', () => { }); }); - it('Should have used alias to skip a breadcrumb', () => { + it('should have used alias to skip a breadcrumb', () => { cy.visit('/'); cy.get('.navbar-header').contains('Mentees').click(); cy.get('bd-mentee-list .mat-card-avatar').eq(0).click(); cy.get('.mat-card-actions button').click(); // Mentee Edit route uses set(@menteeEdit, {skip: true}) getDefaultBreadcrumbs().contains('edit').should('not.exist'); }); + + it('should open links on new tab if when anchorTarget is _blank', () => { + cy.visit('/'); + cy.get('.navbar-header').contains('Mentors').click(); + cy.location().should((loc) => { + expect(loc.hash).to.eq('#testFragment'); + }); + cy.get('bd-mentor-list .mat-card-avatar').eq(0).click(); + cy.get('#advancedTemplate2') + .contains('a', 'Enabler') + .should('have.attr', 'target', '_blank'); + }); }); diff --git a/apps/breadcrumb-demo-e2e/src/integration/fragment.spec.ts b/apps/breadcrumb-demo-e2e/src/integration/fragment.spec.ts index c0a8c20..72288d9 100644 --- a/apps/breadcrumb-demo-e2e/src/integration/fragment.spec.ts +++ b/apps/breadcrumb-demo-e2e/src/integration/fragment.spec.ts @@ -21,9 +21,8 @@ describe('breadcrumb-demo', () => { expect(loc.hash).to.eq('#testFragment'); }); cy.get('bd-mentor-list .mat-card-avatar').eq(0).click(); - cy.get('#advancedTemplate2').contains('Enabler').click(); - cy.location().should((loc) => { - expect(loc.hash).to.eq(''); - }); + cy.get('#advancedTemplate2') + .contains('a', 'Enabler') + .should('have.attr', 'href', '/mentor?viaNav=true&type=list'); }); }); diff --git a/apps/breadcrumb-demo/src/app/app.component.html b/apps/breadcrumb-demo/src/app/app.component.html index 442e078..7c3304f 100644 --- a/apps/breadcrumb-demo/src/app/app.component.html +++ b/apps/breadcrumb-demo/src/app/app.component.html @@ -55,6 +55,7 @@ class="myapp-breadcrumb" id="advancedTemplate2" [preserveFragment]="false" + anchorTarget="_blank" > +``` diff --git a/libs/xng-breadcrumb/src/lib/breadcrumb.component.html b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html index 7a8a31b..473a15c 100644 --- a/libs/xng-breadcrumb/src/lib/breadcrumb.component.html +++ b/libs/xng-breadcrumb/src/lib/breadcrumb.component.html @@ -12,13 +12,22 @@
  • { // Do not mutate breadcrumb as its source of truth. // There can be scenarios where we can have multiple xng-breadcrumb instances in page + const { routeInterceptor, routeLink } = breadcrumb; return { ...breadcrumb, - queryParams: this.preserveQueryParams - ? breadcrumb.queryParams - : undefined, - fragment: this.preserveFragment ? breadcrumb.fragment : undefined, + routeLink: routeInterceptor?.(routeLink, breadcrumb) || routeLink, }; }); }) ); } - - handleRoute(breadcrumb: BreadcrumbDefinition) { - const routeLink = breadcrumb.routeInterceptor - ? breadcrumb.routeInterceptor(breadcrumb.routeLink, breadcrumb) - : breadcrumb.routeLink; - const { queryParams, fragment } = breadcrumb; - this.router.navigate([routeLink], { queryParams, fragment }); - } } diff --git a/libs/xng-breadcrumb/tsconfig.lib.json b/libs/xng-breadcrumb/tsconfig.lib.json index d5befaa..499601d 100644 --- a/libs/xng-breadcrumb/tsconfig.lib.json +++ b/libs/xng-breadcrumb/tsconfig.lib.json @@ -12,7 +12,8 @@ "angularCompilerOptions": { "skipTemplateCodegen": true, "strictMetadataEmit": true, - "enableResourceInlining": true + "enableResourceInlining": true, + "fullTemplateTypeCheck": true }, "exclude": ["src/test-setup.ts", "**/*.spec.ts"], "include": ["**/*.ts"]