From caef460a3e245187e19f42027b085b2af004be81 Mon Sep 17 00:00:00 2001
From: tarashaliuk <43376934+tarashaliuk@users.noreply.github.com>
Date: Mon, 28 Aug 2023 09:42:36 +0300
Subject: [PATCH] test(product): integrate facet rating component in storybook
 (#724)

---
 .../product-list/mock-product-list.adapter.ts |  6 +-
 .../facet-rating/stories/demo.stories.ts      | 36 ++++++++++++
 .../stories/static/static.stories.ts          | 55 +++++++++++++++++++
 3 files changed, 96 insertions(+), 1 deletion(-)
 create mode 100644 libs/domain/search/facet-rating/stories/demo.stories.ts
 create mode 100644 libs/domain/search/facet-rating/stories/static/static.stories.ts

diff --git a/libs/domain/product/src/mocks/src/product-list/mock-product-list.adapter.ts b/libs/domain/product/src/mocks/src/product-list/mock-product-list.adapter.ts
index 2122f7a09e..7c4fcfd8ce 100644
--- a/libs/domain/product/src/mocks/src/product-list/mock-product-list.adapter.ts
+++ b/libs/domain/product/src/mocks/src/product-list/mock-product-list.adapter.ts
@@ -3,7 +3,10 @@ import {
   ProductListAdapter,
   ProductListQualifier,
 } from '@spryker-oryx/product';
-import { generateFacet } from '@spryker-oryx/product/mocks';
+import {
+  generateFacet,
+  generateRatingFacet,
+} from '@spryker-oryx/product/mocks';
 import { Observable, of } from 'rxjs';
 import { createProductListMock } from './mock-product-list.generator';
 
@@ -61,6 +64,7 @@ export class MockProductListAdapter implements ProductListAdapter {
           [],
           true
         ),
+        generateRatingFacet(),
         generateFacet('Color', 'color', 6, qualifier.color?.split(',')),
       ],
     });
diff --git a/libs/domain/search/facet-rating/stories/demo.stories.ts b/libs/domain/search/facet-rating/stories/demo.stories.ts
new file mode 100644
index 0000000000..d137d66567
--- /dev/null
+++ b/libs/domain/search/facet-rating/stories/demo.stories.ts
@@ -0,0 +1,36 @@
+import { resolve } from '@spryker-oryx/di';
+import { MockRouterService } from '@spryker-oryx/experience/mocks';
+import { RouterService } from '@spryker-oryx/router';
+import { FacetListService } from '@spryker-oryx/search';
+import { SearchFacetComponentAttributes } from '@spryker-oryx/search/facet';
+import { Story } from '@storybook/web-components';
+import { TemplateResult, html } from 'lit';
+import { storybookPrefix } from '../../.constants';
+
+export default {
+  title: `${storybookPrefix}/Facet Rating`,
+  args: {
+    open: true,
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};
+
+const Template: Story<SearchFacetComponentAttributes> = (
+  attrs
+): TemplateResult => {
+  resolve(FacetListService);
+
+  const router = resolve(RouterService) as unknown as MockRouterService;
+  router.params$.next({});
+
+  return html`<oryx-search-facet-rating
+    name="Rating"
+    ?open=${attrs.open}
+  ></oryx-search-facet-rating>`;
+};
+
+export const Demo = Template.bind({});
diff --git a/libs/domain/search/facet-rating/stories/static/static.stories.ts b/libs/domain/search/facet-rating/stories/static/static.stories.ts
new file mode 100644
index 0000000000..0cf6b04d3d
--- /dev/null
+++ b/libs/domain/search/facet-rating/stories/static/static.stories.ts
@@ -0,0 +1,55 @@
+import { resolve } from '@spryker-oryx/di';
+import { MockRouterService } from '@spryker-oryx/experience/mocks';
+import { RouterService } from '@spryker-oryx/router';
+import { FacetListService } from '@spryker-oryx/search';
+import { Story } from '@storybook/web-components';
+import { TemplateResult, html } from 'lit';
+import { storybookPrefix } from '../../../.constants';
+
+export default {
+  title: `${storybookPrefix}/Facet Rating`,
+};
+
+const Template: Story = (): TemplateResult => {
+  resolve(FacetListService);
+
+  const router = resolve(RouterService) as unknown as MockRouterService;
+  router.params$.next({});
+
+  return html`<oryx-search-facet-rating
+      name="Rating"
+      open
+    ></oryx-search-facet-rating>
+    <script>
+      document.addEventListener(
+        'DOMContentLoaded',
+        () => {
+          const component = document.querySelector('oryx-search-facet-rating');
+          if (!component) {
+            return;
+          }
+          const observer = new MutationObserver((mutation) => {
+            mutation.forEach((mutation) => {
+              if (mutation) {
+                const inputs = document
+                  .querySelector('oryx-search-facet-rating')
+                  .shadowRoot?.querySelector(
+                    'oryx-search-facet-value-navigation'
+                  )
+                  .querySelectorAll('input');
+                inputs[1]?.setAttribute('checked', '');
+              }
+            });
+          });
+          observer.observe(component, {
+            childList: true,
+            attributes: true,
+            subtree: true,
+          });
+        },
+        { once: true }
+      );
+    </script> `;
+};
+
+export const Static = Template.bind({});