From d0c7f4015dc99c860fc94fd0c0d0c05080a99220 Mon Sep 17 00:00:00 2001 From: Corey Franco <42871786+Core121@users.noreply.github.com> Date: Wed, 29 Nov 2023 09:11:51 -0500 Subject: [PATCH] Added commits proceeding 6c2d06e --- CHANGELOG.md | 3 + README.md | 1 + package-lock.json | 10 ++-- package.json | 5 +- src/lib/ngx-print.directive.spec.ts | 93 ++++++++++++++++------------- src/lib/ngx-print.directive.ts | 48 +++++++-------- yarn.lock | 6 +- 7 files changed, 92 insertions(+), 74 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e908ddb..55b7ebd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +# 1.4.0 (2023-11-29) +* Now supports Angular 16 + # 1.3.0 (2022-12-20) ### New features * Supports previewOnly tag, allowing for the print preview to show without the print dialog diff --git a/README.md b/README.md index 4f62386..1f8b9f3 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ This directive makes printing your HTML sections smooth and easy in your Angular | ------------ | ------------ | | 1.2.1 | 7.0.0 - 14.1.0 | | 1.3.x | 15.0.0 | +| 1.4.x | 16.0.0 | ## Setup **1-** In your root application folder run: diff --git a/package-lock.json b/package-lock.json index f442d6a..516e474 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -14,7 +14,10 @@ "devDependencies": { "@angular-devkit/build-angular": "^16.2.10", "@angular/cli": "~16.2.10", + "@angular/common": "^16.2.12", + "@angular/compiler": "^16.2.12", "@angular/compiler-cli": "^16.2.12", + "@angular/core": "^16.2.12", "@angular/platform-browser": "16.2.12", "@angular/platform-browser-dynamic": "16.2.12", "@types/jasmine": "~4.3.0", @@ -374,7 +377,6 @@ "resolved": "https://registry.npmjs.org/@angular/common/-/common-16.2.12.tgz", "integrity": "sha512-B+WY/cT2VgEaz9HfJitBmgdk4I333XG/ybC98CMC4Wz8E49T8yzivmmxXB3OD6qvjcOB6ftuicl6WBqLbZNg2w==", "dev": true, - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -391,7 +393,6 @@ "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-16.2.12.tgz", "integrity": "sha512-6SMXUgSVekGM7R6l1Z9rCtUGtlg58GFmgbpMCsGf+VXxP468Njw8rjT2YZkf5aEPxEuRpSHhDYjqz7n14cwCXQ==", "dev": true, - "peer": true, "dependencies": { "tslib": "^2.3.0" }, @@ -440,7 +441,6 @@ "resolved": "https://registry.npmjs.org/@angular/core/-/core-16.2.12.tgz", "integrity": "sha512-GLLlDeke/NjroaLYOks0uyzFVo6HyLl7VOm0K1QpLXnYvW63W9Ql/T3yguRZa7tRkOAeFZ3jw+1wnBD4O8MoUA==", "dev": true, - "peer": true, "dependencies": { "tslib": "^2.3.0" }, diff --git a/package.json b/package.json index 2563d06..67f9389 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-print", - "version": "1.3.1", + "version": "1.4.0", "description": "Plug n' Play Angular (2++) directive to print your stuff", "author": "https://github.com/selemxmn/ngx-print/graphs/contributors", "repository": { @@ -33,6 +33,9 @@ "devDependencies": { "@angular-devkit/build-angular": "^16.2.10", "@angular/cli": "~16.2.10", + "@angular/compiler": "^16.2.12", + "@angular/core": "^16.2.12", + "@angular/common": "^16.2.12", "@angular/compiler-cli": "^16.2.12", "@angular/platform-browser": "16.2.12", "@angular/platform-browser-dynamic": "16.2.12", diff --git a/src/lib/ngx-print.directive.spec.ts b/src/lib/ngx-print.directive.spec.ts index 78a6803..e3212b0 100644 --- a/src/lib/ngx-print.directive.spec.ts +++ b/src/lib/ngx-print.directive.spec.ts @@ -1,8 +1,8 @@ -import {Component, DebugElement} from "@angular/core"; -import {TestBed, ComponentFixture} from '@angular/core/testing'; -import {By} from "@angular/platform-browser"; +import { Component, DebugElement } from "@angular/core"; +import { TestBed, ComponentFixture } from '@angular/core/testing'; +import { By } from "@angular/platform-browser"; -import { NgxPrintDirective } from './ngx-print.directive'; +import { NgxPrintDirective } from './ngx-print.directive'; @Component({ template: ` @@ -42,22 +42,23 @@ class TestNgxPrintComponent { describe('NgxPrintDirective', () => { - let buttonEl: DebugElement; - let component: TestNgxPrintComponent; - let fixture: ComponentFixture; + let buttonEl: DebugElement; + let component: TestNgxPrintComponent; + let fixture: ComponentFixture; // To change this later, so it'll depend on TestNgxPrintComponent - let styleSheet: {[key: string]: {[key: string]: string}} - = { - 'h2' : {'border': 'solid 1px'}, - 'h1' : {'color': 'red', 'border': '1px solid'} - }; + let styleSheet: { [key: string]: { [key: string]: string } } + = { + 'h2': { 'border': 'solid 1px' }, + 'h1': { 'color': 'red', 'border': '1px solid' } + }; beforeEach(() => { // Configure a NgModule-like decorator metadata TestBed.configureTestingModule({ - declarations: [TestNgxPrintComponent, NgxPrintDirective] + declarations: [TestNgxPrintComponent], + imports: [NgxPrintDirective] }); // Create a fixture object (that is going to allows us to create an instance of that component) @@ -67,7 +68,7 @@ describe('NgxPrintDirective', () => { component = fixture.componentInstance; // Get the button element (on which we tag the directive) to simulate clicks on it - buttonEl = fixture.debugElement.query(By.directive(NgxPrintDirective)); + buttonEl = fixture.debugElement.query(By.directive(NgxPrintDirective)); fixture.detectChanges(); }); @@ -77,39 +78,49 @@ describe('NgxPrintDirective', () => { expect(directive).toBeTruthy(); }); - // it('should test the @Input printStyle', () => { - // const directive = new NgxPrintDirective(); - // directive.printStyle = styleSheet; - // for (var key in directive.printStyle) { - // if (directive.printStyle.hasOwnProperty(key)) { - // directive._printStyle.push((key + JSON.stringify(directive.printStyle[key])).replace(/['"]+/g, '')); - // } - // } - // directive.returnStyleValues(); - - // expect(directive.returnStyleValues).toHaveBeenCalled(); - // }); - - // it('should returns a string from array of objects', () => { - // const directive = new NgxPrintDirective(); - // directive._printStyle = [ - // "h2{border:solid 1px}", - // "h1{color:red,border:1px solid}" - // ]; - // // let returnedString = directive.returnStyleValues(); - - // // immediately invoked arrow function, else you can uncomment `returnedString` and use it instead - // expect((() => {return directive.returnStyleValues()})()).toEqual('h2{border:solid 1px} h1{color:red,border:1px solid}'); - // }); - - it(`should popup a new window`, ()=> { + it('should test the @Input printStyle', () => { + const directive = new NgxPrintDirective(); + + // Define styleSheet before using it + + directive.printStyle = styleSheet; + + // Iterate through printStyle and push values to _printStyle + for (const key in directive.printStyle) { + if (directive.printStyle.hasOwnProperty(key)) { + directive._printStyle.push((key + JSON.stringify(directive.printStyle[key])).replace(/['"]+/g, '')); + } + } + + // Create a spy on the instance's method + spyOn(directive, 'returnStyleValues').and.callThrough(); + + // Call the function before checking if it has been called + directive.returnStyleValues(); + + // Check if returnStyleValues has been called + expect(directive.returnStyleValues).toHaveBeenCalled(); + }); + + + it('should returns a string from array of objects', () => { + const directive = new NgxPrintDirective(); + directive._printStyle = [ + "h2{border:solid 1px}", + "h1{color:red,border:1px solid}" + ]; + + expect((() => { return directive.returnStyleValues() })()).toEqual(''); + }); + + it(`should popup a new window`, () => { spyOn(window, 'open').and.callThrough(); // simulate click buttonEl.triggerEventHandler('click', {}); expect(window.open).toHaveBeenCalled(); }); - it(`should apply class list to body element in new window`, ()=> { + it(`should apply class list to body element in new window`, () => { const windowOpenSpy = spyOn(window, 'open').and.callThrough(); // simulate click buttonEl.triggerEventHandler('click', {}); diff --git a/src/lib/ngx-print.directive.ts b/src/lib/ngx-print.directive.ts index 9d8dfb8..a9882bd 100644 --- a/src/lib/ngx-print.directive.ts +++ b/src/lib/ngx-print.directive.ts @@ -63,24 +63,24 @@ export class NgxPrintDirective { set printStyle(values: { [key: string]: { [key: string]: string } }) { for (let key in values) { if (values.hasOwnProperty(key)) { - this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, '')); + this._printStyle.push((key + JSON.stringify(values[key])).replace(/['"]+/g, '')); } } this.returnStyleValues(); } -/** - * - * - * @returns the string that create the stylesheet which will be injected - * later within tag. - * - * -join/replace to transform an array objects to css-styled string - * - * @memberof NgxPrintDirective - */ -public returnStyleValues() { - return ``; + /** + * + * + * @returns the string that create the stylesheet which will be injected + * later within tag. + * + * -join/replace to transform an array objects to css-styled string + * + * @memberof NgxPrintDirective + */ + public returnStyleValues() { + return ``; } /** @@ -98,7 +98,7 @@ public returnStyleValues() { */ @Input() set styleSheetFile(cssList: string) { - let linkTagFn = function(cssFileName) { + let linkTagFn = function (cssFileName) { return ``; } if (cssList.indexOf(',') !== -1) { @@ -128,14 +128,14 @@ public returnStyleValues() { return html.join('\r\n'); } - /** - * - * @description When printing, the default option of form elements are printed. - * Here we update what that default is to print the current values. - * - * @param elements the html element collection to save defaults to - * - */ + /** + * + * @description When printing, the default option of form elements are printed. + * Here we update what that default is to print the current values. + * + * @param elements the html element collection to save defaults to + * + */ private updateInputDefaults(elements: HTMLCollectionOf): void { for (let i = 0; i < elements.length; i++) { const element = elements[i]; @@ -191,7 +191,7 @@ public returnStyleValues() { let printContents, popupWin, styles = '', links = ''; const baseTag = this.getElementTag('base'); - if(this.useExistingCss) { + if (this.useExistingCss) { styles = this.getElementTag('style'); links = this.getElementTag('link'); } @@ -225,6 +225,6 @@ public returnStyleValues() { `); - popupWin.document.close(); + popupWin.document.close(); } } diff --git a/yarn.lock b/yarn.lock index c27dacb..dda4232 100644 --- a/yarn.lock +++ b/yarn.lock @@ -145,7 +145,7 @@ symbol-observable "4.0.0" yargs "17.7.2" -"@angular/common@16.2.12": +"@angular/common@^16.2.12", "@angular/common@16.2.12": version "16.2.12" resolved "https://registry.npmjs.org/@angular/common/-/common-16.2.12.tgz" integrity sha512-B+WY/cT2VgEaz9HfJitBmgdk4I333XG/ybC98CMC4Wz8E49T8yzivmmxXB3OD6qvjcOB6ftuicl6WBqLbZNg2w== @@ -166,14 +166,14 @@ tslib "^2.3.0" yargs "^17.2.1" -"@angular/compiler@16.2.12": +"@angular/compiler@^16.2.12", "@angular/compiler@16.2.12": version "16.2.12" resolved "https://registry.npmjs.org/@angular/compiler/-/compiler-16.2.12.tgz" integrity sha512-6SMXUgSVekGM7R6l1Z9rCtUGtlg58GFmgbpMCsGf+VXxP468Njw8rjT2YZkf5aEPxEuRpSHhDYjqz7n14cwCXQ== dependencies: tslib "^2.3.0" -"@angular/core@16.2.12": +"@angular/core@^16.2.12", "@angular/core@16.2.12": version "16.2.12" resolved "https://registry.npmjs.org/@angular/core/-/core-16.2.12.tgz" integrity sha512-GLLlDeke/NjroaLYOks0uyzFVo6HyLl7VOm0K1QpLXnYvW63W9Ql/T3yguRZa7tRkOAeFZ3jw+1wnBD4O8MoUA==