feat(addon-doc): use only one property on route for expose input prop…

… value (#9774)
taiga-family · Nov 18, 2024 · 8602e4e · 8602e4e
1 parent f81c996
commit 8602e4e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts b/projects/addon-doc/components/documentation/documentation-property-connector.directive.ts
@@ -12,7 +12,7 @@ import {
 import type {Params} from '@angular/router';
 import {ActivatedRoute, UrlSerializer} from '@angular/router';
 import {TUI_DOC_URL_STATE_HANDLER} from '@taiga-ui/addon-doc/tokens';
-import {tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
+import {tuiCleanObject, tuiCoerceValue, tuiInspectAny} from '@taiga-ui/addon-doc/utils';
 import {tuiIsNumber} from '@taiga-ui/cdk/utils/miscellaneous';
 import {TuiAlertService} from '@taiga-ui/core/components/alert';
 import {Subject} from 'rxjs';
@@ -132,22 +132,33 @@ export class TuiDocDocumentationPropertyConnector<T> implements OnInit, OnChange
         this.onValueChange(value as T);
     }
 
-    private setQueryParam(value: T | boolean | number | string | null): void {
+    private setQueryParam(value: unknown): void {
         const tree = this.urlSerializer.parse(this.locationRef.path());
-
         const isValueAvailableByKey = value instanceof Object;
+        const name = this.documentationPropertyName;
+        const nameWithSuffix = `${name}${SERIALIZED_SUFFIX}`;
+
         const computedValue =
             isValueAvailableByKey && this.documentationPropertyValues
                 ? this.documentationPropertyValues.indexOf(value as T)
                 : value;
 
-        const suffix = isValueAvailableByKey ? SERIALIZED_SUFFIX : '';
-        const propName = this.documentationPropertyName + suffix;
-
-        tree.queryParams = {
+        tree.queryParams = tuiCleanObject({
             ...tree.queryParams,
-            [propName]: computedValue,
-        };
+            /**
+             * Caretaker note: reset previous conflicted param in route
+             * issue: https://github.com/taiga-family/taiga-ui/issues/9764
+             */
+            ...(isValueAvailableByKey
+                ? {
+                      [nameWithSuffix]: computedValue,
+                      [name]: undefined,
+                  }
+                : {
+                      [nameWithSuffix]: undefined,
+                      [name]: computedValue,
+                  }),
+        });
 
         this.locationRef.go(this.urlStateHandler(tree));
     }

diff --git a/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts b/projects/demo-playwright/tests/core/hint/hint.pw.spec.ts
@@ -32,8 +32,7 @@ test.describe('TuiHint', () => {
 
         directions.forEach((direction, directionIndex) => {
             [256, 1280].forEach((width) => {
-                // TODO: need fix https://github.com/taiga-family/taiga-ui/issues/9764 before
-                test.skip(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
+                test(`tuiHintDirection is ${direction}, viewport width is ${width}px`, async ({
                     page,
                 }) => {
                     await page.setViewportSize({width, height: 300});
@@ -44,7 +43,7 @@ test.describe('TuiHint', () => {
                     await new TuiDocumentationPagePO(page).prepareBeforeScreenshot();
 
                     await expect(page).toHaveScreenshot(
-                        `02-hint-manual-direction__${direction}-and-width__${width}.png`,
+                        `02-hint-manual-direction-${directionIndex}__${direction}-and-width__${width}.png`,
                     );
                 });
             });