refactor: create tuiMaxSizeRejectionError-pipe

taiga-family · Sep 15, 2022 · 2cd06ac · 2cd06ac
1 parent 36ac5fc
commit 2cd06ac
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 56 deletions.
diff --git a/projects/demo-integrations/cypress/support/set-language.ts b/projects/demo-integrations/cypress/support/set-language.ts
@@ -1,4 +1,6 @@
 export function tuiSetLanguage(language: string): void {
-    cy.get(`tui-language-switcher`, {log: false}).click();
-    cy.get(`tui-dropdown [tuiOption]`).contains(language, {matchCase: false}).click();
+    cy.get(`tui-language-switcher`, {log: false}).click({log: false});
+    cy.get(`tui-dropdown [tuiOption]`, {log: false})
+        .contains(language, {matchCase: false, log: false})
+        .click({force: true, log: false});
 }
diff --git a/projects/demo-integrations/cypress/tests/kit/input-files/input-files.spec.ts b/projects/demo-integrations/cypress/tests/kit/input-files/input-files.spec.ts
@@ -1,47 +1,49 @@
 describe(`InputFiles`, () => {
-    it(`i18n of error "wrong-file-type"`, () => {
-        cy.viewport(800, 500);
-        cy.tuiVisit(`/components/input-files/API?accept=application/pdf`, {
-            skipExpectUrl: true,
-            hideNavigation: false,
-            hideLanguageSwitcher: false,
+    describe(`supports dynamic change of i18n for errors`, () => {
+        it(`Wrong file type`, () => {
+            cy.viewport(800, 500);
+            cy.tuiVisit(`/components/input-files/API?accept=application/pdf`, {
+                skipExpectUrl: true,
+                hideNavigation: false,
+                hideLanguageSwitcher: false,
+            });
+
+            cy.get(`#demoContent input[type="file"]`).selectFile(
+                `cypress/fixtures/stubs/web-api.svg`,
+            );
+
+            cy.get(`#demoContent tui-file`)
+                .should(`contain.text`, `Wrong file type`)
+                .matchImageSnapshot(`01-01-input-files-[english]-wrong-file-type`);
+
+            cy.tuiSetLanguage(`dutch`);
+
+            cy.get(`#demoContent tui-file`)
+                .should(`contain.text`, `Verkeerd bestandsformaat`)
+                .matchImageSnapshot(`01-02-input-files-[dutch]-wrong-file-type`);
         });
 
-        cy.get(`#demoContent input[type="file"]`).selectFile(
-            `cypress/fixtures/stubs/web-api.svg`,
-        );
+        it(`File is too large`, () => {
+            cy.viewport(850, 500);
+            cy.tuiVisit(`/components/input-files/API?accept=image/*&maxFileSize=2000`, {
+                skipExpectUrl: true,
+                hideNavigation: false,
+                hideLanguageSwitcher: false,
+            });
 
-        cy.get(`#demoContent tui-file`)
-            .should(`contain.text`, `Wrong file type`)
-            .matchImageSnapshot(`01-01-input-files-[english]-wrong-file-type`);
+            cy.get(`#demoContent input[type="file"]`).selectFile(
+                `cypress/fixtures/stubs/web-api.svg`,
+            );
 
-        cy.tuiSetLanguage(`dutch`);
+            cy.get(`#demoContent tui-file`)
+                .should(`contain.text`, `File is too large 2 KB`)
+                .matchImageSnapshot(`02-01-input-files-[english]-file-too-large`);
 
-        cy.get(`#demoContent tui-file`)
-            .should(`contain.text`, `Verkeerd bestandsformaat`)
-            .matchImageSnapshot(`01-02-input-files-[dutch]-wrong-file-type`);
-    });
+            cy.tuiSetLanguage(`dutch`);
 
-    it(`i18n of error "File is too large"`, () => {
-        cy.viewport(850, 500);
-        cy.tuiVisit(`/components/input-files/API?accept=image/*&maxFileSize=2000`, {
-            skipExpectUrl: true,
-            hideNavigation: false,
-            hideLanguageSwitcher: false,
+            cy.get(`#demoContent tui-file`)
+                .should(`contain.text`, `Bestandsgrootte overschreden 2 KB`)
+                .matchImageSnapshot(`02-02-input-files-[dutch]-file-too-large`);
         });
-
-        cy.get(`#demoContent input[type="file"]`).selectFile(
-            `cypress/fixtures/stubs/web-api.svg`,
-        );
-
-        cy.get(`#demoContent tui-file`)
-            .should(`contain.text`, `File is too large 2 KB`)
-            .matchImageSnapshot(`02-01-input-files-[english]-file-too-large`);
-
-        cy.tuiSetLanguage(`dutch`);
-
-        cy.get(`#demoContent tui-file`)
-            .should(`contain.text`, `Bestandsgrootte overschreden 2 KB`)
-            .matchImageSnapshot(`02-02-input-files-[dutch]-file-too-large`);
     });
 });
diff --git a/projects/kit/components/input-files/input-files.component.ts b/projects/kit/components/input-files/input-files.component.ts
@@ -26,10 +26,10 @@ import {
 } from '@taiga-ui/cdk';
 import {MODE_PROVIDER, TuiSizeL} from '@taiga-ui/core';
 import {TuiFileLike} from '@taiga-ui/kit/interfaces';
-import {TUI_DIGITAL_INFORMATION_UNITS, TUI_INPUT_FILE_TEXTS} from '@taiga-ui/kit/tokens';
-import {tuiFormatSize, tuiGetAcceptArray} from '@taiga-ui/kit/utils/files';
+import {TUI_INPUT_FILE_TEXTS} from '@taiga-ui/kit/tokens';
+import {tuiGetAcceptArray} from '@taiga-ui/kit/utils/files';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
-import {combineLatest, Observable, of} from 'rxjs';
+import {Observable, of} from 'rxjs';
 import {map} from 'rxjs/operators';
 
 const DEFAULT_MAX_SIZE = 30 * 1000 * 1000; // 30 MB
@@ -101,8 +101,6 @@ export class TuiInputFilesComponent
                 string
             >
         >,
-        @Inject(TUI_DIGITAL_INFORMATION_UNITS)
-        readonly units$: Observable<[string, string, string]>,
     ) {
         super(control, changeDetectorRef);
     }
@@ -140,16 +138,6 @@ export class TuiInputFilesComponent
         return this.getValueArray(this.value);
     }
 
-    @tuiPure
-    getMaxSizeRejectionError$(maxFileSize: number): Observable<string> {
-        return combineLatest([this.inputFileTexts$, this.units$]).pipe(
-            map(
-                ([{maxSizeRejectionReason}, units]) =>
-                    maxSizeRejectionReason + tuiFormatSize(units, maxFileSize),
-            ),
-        );
-    }
-
     onFocused(focused: boolean): void {
         this.updateFocused(focused);
     }

diff --git a/projects/kit/components/input-files/input-files.module.ts b/projects/kit/components/input-files/input-files.module.ts
@@ -26,6 +26,7 @@ import {
 import {PolymorpheusModule} from '@tinkoff/ng-polymorpheus';
 
 import {TuiInputFilesComponent} from './input-files.component';
+import {TuiMaxSizeRejectionErrorPipe} from './max-size-rejection-error.pipe';
 
 @NgModule({
     imports: [
@@ -46,7 +47,7 @@ import {TuiInputFilesComponent} from './input-files.component';
         TuiGroupModule,
         TuiFilesModule,
     ],
-    declarations: [TuiInputFilesComponent],
+    declarations: [TuiInputFilesComponent, TuiMaxSizeRejectionErrorPipe],
     exports: [
         TuiInputFilesComponent,
         TuiFilesComponent,

diff --git a/projects/kit/components/input-files/input-files.template.html b/projects/kit/components/input-files/input-files.template.html
@@ -41,5 +41,5 @@
 </ng-template>
 
 <ng-template #maxSizeRejection>
-    {{ getMaxSizeRejectionError$(maxFileSize) | async }}
+    {{ maxFileSize | tuiMaxSizeRejectionError | async }}
 </ng-template>
diff --git a/projects/kit/components/input-files/max-size-rejection-error.pipe.ts b/projects/kit/components/input-files/max-size-rejection-error.pipe.ts
@@ -0,0 +1,29 @@
+import {Inject, Pipe, PipeTransform} from '@angular/core';
+import {TuiInjectionTokenType} from '@taiga-ui/cdk';
+import {TUI_DIGITAL_INFORMATION_UNITS, TUI_INPUT_FILE_TEXTS} from '@taiga-ui/kit/tokens';
+import {tuiFormatSize} from '@taiga-ui/kit/utils';
+import {combineLatest, Observable} from 'rxjs';
+import {map} from 'rxjs/operators';
+
+@Pipe({name: `tuiMaxSizeRejectionError`})
+export class TuiMaxSizeRejectionErrorPipe implements PipeTransform {
+    constructor(
+        @Inject(TUI_INPUT_FILE_TEXTS)
+        private readonly inputFileTexts$: TuiInjectionTokenType<
+            typeof TUI_INPUT_FILE_TEXTS
+        >,
+        @Inject(TUI_DIGITAL_INFORMATION_UNITS)
+        private readonly units$: TuiInjectionTokenType<
+            typeof TUI_DIGITAL_INFORMATION_UNITS
+        >,
+    ) {}
+
+    transform(maxFileSize: number): Observable<string> {
+        return combineLatest([this.inputFileTexts$, this.units$]).pipe(
+            map(
+                ([{maxSizeRejectionReason}, units]) =>
+                    maxSizeRejectionReason + tuiFormatSize(units, maxFileSize),
+            ),
+        );
+    }
+}