diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts index 09f9b93ecd..1fffa88aa2 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.spec.ts @@ -3,10 +3,61 @@ import { Component, DebugElement } from '@angular/core' import { By } from '@angular/platform-browser' import { GnUiLinkifyDirective } from './linkify.directive' +const testingUrls = [ + ['First link http://bla.org no slash', 'http://bla.org'], + + ['Second link http://bla.org/ with slash', 'http://bla.org/'], + [ + 'Third link https://www.bla.org/hello no slash', + 'https://www.bla.org/hello', + ], + [ + 'Forth link https://www.bla.org/hello/ with slash', + 'https://www.bla.org/hello/', + ], + [ + 'Fifth link https://www.bla.org/hello/file.png file with extension', + 'https://www.bla.org/hello/file.png', + ], + [ + 'Sixth link https://www.bla.org/hello/file.png?aa=bb query parameters', + 'https://www.bla.org/hello/file.png?aa=bb', + ], + [ + 'Seventh link https://www.bla.org/hello/file.png?aa=%20/bb&cc=d query parameters', + 'https://www.bla.org/hello/file.png?aa=%20/bb&cc=d', + ], + [ + 'Eighth link https://www.bla.org/hello/file.png?aa= empty query parameter', + 'https://www.bla.org/hello/file.png?aa=', + ], + [ + 'Nineth link http://foo.com/more_(than)_one_(parens) with parentheses', + 'http://foo.com/more_(than)_one_(parens)', + ], + [ + 'Tenth link http://foo.com/blah_(wikipedia)#cite-1 with anchor', + 'http://foo.com/blah_(wikipedia)#cite-1', + ], + [ + 'Eleventh link http://foo.com/blah_(wikipedia)_blah#cite-1 with anchor', + 'http://foo.com/blah_(wikipedia)_blah#cite-1', + ], + [ + 'Twelveth link http://foo.com/unicode_(✪)_in_parens unicode', + 'http://foo.com/unicode_(✪)_in_parens', + ], + [ + 'Thirteenth link http://foo.com/(something)?after=parens query params', + 'http://foo.com/(something)?after=parens', + ], +] @Component({ - template: `
Click this link https://www.example.com
`, + template: `
{{ text }}
`, }) -class TestComponent {} +class TestComponent { + text = '' +} describe('GnUiLinkifyDirective', () => { let fixture: ComponentFixture @@ -20,26 +71,32 @@ describe('GnUiLinkifyDirective', () => { fixture = TestBed.createComponent(TestComponent) component = fixture.componentInstance - debugElement = fixture.debugElement.query( - By.directive(GnUiLinkifyDirective) - ) - - fixture.detectChanges() })) - it('should create an anchor element with the correct href', () => { - fixture.detectChanges() - const anchorElement = debugElement.query(By.css('a')) - - const href = anchorElement.nativeElement.getAttribute('href') - expect(href).toBe('https://www.example.com') + describe('should create an anchor element with the correct href', () => { + test.each(testingUrls)( + 'for %p it should create href %p', + async (input, output) => { + component.text = input + fixture.detectChanges() + await fixture.whenStable() + const href = getAnchorElement().nativeElement.getAttribute('href') + expect(href).toBe(output) + } + ) }) - it('should have the target attribute set to "_blank"', () => { + it('should have the target attribute set to "_blank"', async () => { + component.text = 'Click this link https://www.example.com/' fixture.detectChanges() - const anchorElement = debugElement.query(By.css('a')) - - const target = anchorElement.nativeElement.getAttribute('target') + await fixture.whenStable() + const target = getAnchorElement().nativeElement.getAttribute('target') expect(target).toBe('_blank') }) + function getAnchorElement() { + debugElement = fixture.debugElement.query( + By.directive(GnUiLinkifyDirective) + ) + return debugElement.query(By.css('a')) + } }) diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts index 0ae4289b10..6f226ce041 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts @@ -30,7 +30,7 @@ export class GnUiLinkifyDirective implements OnInit { } private linkifyText(text: string): string { - return text.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => { + return text.replace(/(\bhttps?:\/\/\S+\b[=)/]?)/g, (match) => { return `${match} open_in_new` })