chore: Adds old selector

cloudscape-design · Feb 21, 2025 · aa29a6c · aa29a6c
1 parent 2b93396
commit aa29a6c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/core/selectors.ts b/src/core/selectors.ts
@@ -3,8 +3,13 @@
 import { IElementWrapper } from './interfaces';
 import { appendSelector, isScopedSelector, substituteScope, getUnscopedClassName } from './utils';
 
-const getRootSelector = (selector: string, root: string): string => {
-  const rootSelector = isScopedSelector(selector) ? substituteScope(selector, root) : `${root} ${selector}`;
+const getRootSelector = (root: string, selector: string, oldSelector?: string): string => {
+  const backwardCompatibleSelector = oldSelector ? `:is(${selector}, ${oldSelector})` : selector;
+
+  const rootSelector = isScopedSelector(backwardCompatibleSelector)
+    ? substituteScope(backwardCompatibleSelector, root)
+    : `${root} ${backwardCompatibleSelector}`;
+
   return getUnscopedClassName(rootSelector);
 };
 
@@ -27,12 +32,15 @@ export class AbstractWrapper implements IElementWrapper<string, MultiElementWrap
     return new ElementWrapper(appendSelector(this.root, getUnscopedClassName(selector)));
   }
 
-  find(selector: string): ElementWrapper {
-    return new ElementWrapper(getRootSelector(selector, this.root));
+  find(selector: string, oldSelector?: string): ElementWrapper {
+    return new ElementWrapper(getRootSelector(this.root, selector, oldSelector));
   }
 
-  findAll(selector: string): MultiElementWrapper<ElementWrapper> {
-    return new MultiElementWrapper(getRootSelector(selector, this.root), selector => new ElementWrapper(selector));
+  findAll(selector: string, oldSelector?: string): MultiElementWrapper<ElementWrapper> {
+    return new MultiElementWrapper(
+      getRootSelector(this.root, selector, oldSelector),
+      selector => new ElementWrapper(selector),
+    );
   }
 
   findByClassName(className: string) {
@@ -65,13 +73,13 @@ export class AbstractWrapper implements IElementWrapper<string, MultiElementWrap
    */
   findAllComponents<Wrapper extends ComponentWrapper>(
     ComponentClass: ComponentWrapperClass<Wrapper>,
-    selector?: string
+    selector?: string,
   ): MultiElementWrapper<Wrapper> {
     const componentRootSelector = `.${ComponentClass.rootSelector}`;
     const componentCombinedSelector = selector
       ? appendSelector(componentRootSelector, selector)
       : componentRootSelector;
-    const rootSelector = getRootSelector(componentCombinedSelector, this.root);
+    const rootSelector = getRootSelector(this.root, componentCombinedSelector);
     return new MultiElementWrapper(rootSelector, selector => new ComponentClass(selector));
   }
 

diff --git a/src/core/test/selectors.test.ts b/src/core/test/selectors.test.ts
@@ -40,14 +40,22 @@ describe('CSS-selectors test utils', () => {
     expect(wrapper.find('.header').toSelector()).toEqual('.awsui-component .header');
   });
 
-  it('allows use of :scope to combine parent and child selectors', () => {
-    expect(wrapper.find(':scope > .header').toSelector()).toEqual('.awsui-component > .header');
+  it('builds backward-compatible selector if old selector is provided', () => {
+    expect(wrapper.find('.header-wrapper .new-header', '.header').toSelector()).toBe(
+      '.awsui-component :is(.header-wrapper .new-header, .header)',
+    );
   });
 
   it('builds :nth-child selector for multiple elements', () => {
     expect(wrapper.findAll('.item').get(2).toSelector()).toEqual('.awsui-component .item:nth-child(2)');
   });
 
+  it('builds backward-compatible :nth-child selector for multiple elements if old selector is provided', () => {
+    expect(wrapper.findAll('.item', '.item-old').get(2).toSelector()).toBe(
+      '.awsui-component :is(.item, .item-old):nth-child(2)',
+    );
+  });
+
   it('builds selectors using class names', () => {
     const CLASS_NAME = 'element';
     expect(wrapper.findByClassName(CLASS_NAME).toSelector()).toEqual('.awsui-component .element');