chore(atomic): migrate atomic-automatic-facet to Lit

packages/atomic-react/src/components/search/components.ts

@@ -1,5 +1,6 @@
 import {
   AtomicAriaLive as LitAtomicAriaLive,
+  AtomicAutomaticFacet as LitAtomicAutomaticFacet,
   AtomicComponentError as LitAtomicComponentError,
   AtomicExternal as LitAtomicExternal,
   AtomicFacet as LitAtomicFacet,
@@ -49,6 +50,12 @@ export const AtomicAriaLive = createComponent({
   elementClass: LitAtomicAriaLive,
 });
 
+export const AtomicAutomaticFacet = createComponent({
+  tagName: 'atomic-automatic-facet',
+  react: React,
+  elementClass: LitAtomicAutomaticFacet,
+});
+
 export const AtomicComponentError = createComponent({
   tagName: 'atomic-component-error',
   react: React,

packages/atomic/cypress/e2e/breadbox.cypress.ts

@@ -7,8 +7,6 @@ import {
 import * as BreadboxAssertions from './breadbox-assertions';
 import {breadboxComponent, BreadboxSelectors} from './breadbox-selectors';
 import * as CommonAssertions from './common-assertions';
-import {addAutomaticFacetGenerator} from './facets/automatic-facet-generator/automatic-facet-generator-actions';
-import {AutomaticFacetSelectors} from './facets/automatic-facet/automatic-facet-selectors';
 import {
   addCategoryFacet,
   canadaHierarchy,
@@ -59,64 +57,6 @@ describe('Breadbox Test Suites', () => {
       .init();
   }
 
-  // When an automatic facet generator is used with other facets, if the query is too narrow, there won't be any automatic facet.
-  describe('when selecting an automatic facet', () => {
-    const selectionIndex = 2;
-    function setupBreadboxWithMultipleSelectedFacets() {
-      new TestFixture()
-        .withTranslation({'a.translated.label': 'This is a translated label'})
-        .with(addBreadbox())
-        .with(
-          addAutomaticFacetGenerator({
-            'desired-count': '1',
-          })
-        )
-        .init();
-      selectIdleCheckboxValueAt(AutomaticFacetSelectors, selectionIndex);
-    }
-
-    describe('verify rendering', () => {
-      beforeEach(() => setupBreadboxWithMultipleSelectedFacets());
-      BreadboxAssertions.assertDisplayBreadcrumb(true);
-      CommonAssertions.assertAccessibility(breadboxComponent);
-      BreadboxAssertions.assertDisplayBreadcrumbClearAllButton(true);
-      BreadboxAssertions.assertBreadcrumbLabel(breadboxLabel);
-      it('should display the selected checkbox facets in the breadcrumbs', () => {
-        AutomaticFacetSelectors.labelButton()
-          .invoke('text')
-          .then((facetLabel) => {
-            BreadboxAssertions.assertSelectedCheckboxFacetsInBreadcrumbAssertions(
-              AutomaticFacetSelectors,
-              facetLabel
-            );
-          });
-      });
-      BreadboxAssertions.assertDisplayBreadcrumbClearIcon();
-      BreadboxAssertions.assertBreadcrumbDisplayLength(1);
-    });
-
-    describe('when selecting "Clear all" button', () => {
-      function setupClearAllBreadcrumb() {
-        setupBreadboxWithMultipleSelectedFacets();
-        deselectAllBreadcrumbs();
-      }
-
-      describe('verify rendering', () => {
-        beforeEach(setupClearAllBreadcrumb);
-        BreadboxAssertions.assertDisplayBreadcrumb(false);
-        CommonFacetAssertions.assertNumberOfSelectedCheckboxValues(
-          AutomaticFacetSelectors,
-          0
-        );
-      });
-
-      describe('verify analytics', () => {
-        beforeEach(setupClearAllBreadcrumb);
-        BreadboxAssertions.assertLogBreadcrumbClearAll();
-      });
-    });
-  });
-
   describe('when selecting a standard facet, a numeric facet', () => {
     const selectionIndex = 2;
     function setupBreadboxWithMultipleSelectedFacets(props: TagProps = {}) {