test(product): integrate facet rating component in storybook (#724)

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(',')),
       ],
     });

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({});

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({});