chore: Make consisent class names and expand coverage

cloudscape-design · Sep 20, 2023 · d36a5e0 · d36a5e0
1 parent d3a0893
commit d36a5e0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 33 deletions.
diff --git a/src/anchor-navigation/__integ__/anchor-navigation.test.ts b/src/anchor-navigation/__integ__/anchor-navigation.test.ts
@@ -24,18 +24,11 @@ describe('AnchorNavigation', () => {
     });
   }
 
-  test(
-    'AnchorNavigation is defined',
-    setupTest(async () => {
-      return expect(await wrapper).toBeTruthy();
-    })
-  );
-
   test(
     'the first anchor item is active on initial render',
     setupTest(async page => {
-      const firstAnchor = wrapper.findAnchorByIndex(0).findLink();
-      return expect(await page.getElementAttribute(firstAnchor.toSelector(), 'aria-current')).toBe('true');
+      const firstAnchorLink = wrapper.findAnchorByIndex(1).findLink();
+      return expect(await page.getElementAttribute(firstAnchorLink.toSelector(), 'aria-current')).toBe('true');
     })
   );
 
@@ -50,7 +43,7 @@ describe('AnchorNavigation', () => {
     'clicking in a anchor link makes the respective anchor item active',
     setupTest(async page => {
       // Get element position in page
-      const targetAnchorLink = await wrapper.findAnchorLinkByHref('#section-1-1-1');
+      const targetAnchorLink = wrapper.findAnchorLinkByHref('#section-1-1-1');
       expect(await page.getElementAttribute(targetAnchorLink.toSelector(), 'aria-current')).toBeNull;
       await page.click(targetAnchorLink.toSelector());
       await page.waitForVisible('#section-1-1-1');
@@ -64,15 +57,15 @@ describe('AnchorNavigation', () => {
       const sectionSelector = '#section-1-2';
       await page.windowScrollTo({ top: await page.getElementYPosition(sectionSelector) });
       await page.waitForVisible(sectionSelector);
-      const targetAnchorLink = await wrapper.findAnchorLinkByHref(sectionSelector);
+      const targetAnchorLink = wrapper.findActiveAnchor().findLink();
       return expect(await page.getElementAttribute(targetAnchorLink.toSelector(), 'aria-current')).toBe('true');
     })
   );
 
   test(
     'scrolling to the end of the page makes the last anchor item active',
     setupTest(async page => {
-      const lastAnchorLink = await wrapper.findAnchorLinkByHref('#section-1-2-1-1');
+      const lastAnchorLink = wrapper.findAnchorLinkByHref('#section-1-2-1-1');
       await page.windowScrollTo({ top: 99999 }); // Very high value to ensure we are scrolled to the end
       return expect(await page.getElementAttribute(lastAnchorLink.toSelector(), 'aria-current')).toBe('true');
     })

diff --git a/src/anchor-navigation/__tests__/anchor-navigation.test.tsx b/src/anchor-navigation/__tests__/anchor-navigation.test.tsx
@@ -75,7 +75,7 @@ describe('AnchorNavigation', () => {
       anchors: [{ text: 'Section 1', href: '#section1', level: 1 }],
       onFollow,
     });
-    wrapper.findAnchorLinkByHref('#section1')?.getElement().click();
+    wrapper.findAnchorByIndex(1)?.findLink()!.getElement().click();
     expect(onFollow).toHaveBeenCalledTimes(1);
     expect(onFollow).toHaveBeenCalledWith({
       cancelBubble: false,
@@ -85,6 +85,18 @@ describe('AnchorNavigation', () => {
     });
   });
 
+  it('activeHref sets the right item as active', () => {
+    const wrapper = renderAnchorNavigation({
+      anchors: [
+        { text: 'Section 1', href: '#section1', level: 1 },
+        { text: 'Section 2', href: '#section2', level: 1 },
+      ],
+      activeHref: '#section2',
+    });
+    expect(wrapper.findAnchorByIndex(1)!.isActive()).toBe(false);
+    expect(wrapper.findAnchorByIndex(2)!.isActive()).toBe(true);
+  });
+
   it('calls onActiveHrefChange when a new anchor is active', () => {
     const onActiveHrefChange = jest.fn();
 

diff --git a/src/anchor-navigation/internal.tsx b/src/anchor-navigation/internal.tsx
@@ -88,29 +88,28 @@ const Anchor = ({ anchor, onFollow, isActive, index }: AnchorProps) => {
     [onFollow, anchor]
   );
 
+  const activeItemClasses = clsx(styles['anchor-item--active'], testUtilsStyles['anchor-item--active']);
+
   return (
-    <li
-      data-itemid={`anchor-item-${index + 1}`}
-      className={clsx(styles['anchor-item'], {
-        [(styles['anchor-item--active'], testUtilsStyles['anchor-item--active'])]: isActive,
-      })}
-    >
+    <li data-itemid={`anchor-item-${index + 1}`} className={clsx(styles['anchor-item'], isActive && activeItemClasses)}>
       <a
         onClick={onClick}
-        className={clsx(styles['anchor-link'], testUtilsStyles.link, {
-          [styles['anchor-link--active']]: isActive,
-        })}
+        className={clsx(
+          styles['anchor-link'],
+          testUtilsStyles['anchor-link'],
+          isActive && styles['anchor-link--active']
+        )}
         {...(isActive ? { 'aria-current': true } : {})}
         href={anchor.href}
       >
         <span
-          className={clsx(styles['anchor-link-text'], testUtilsStyles['link-text'])}
+          className={clsx(styles['anchor-link-text'], testUtilsStyles['anchor-link-text'])}
           style={{ paddingLeft: `${anchor.level * 16 + 2}px` }}
         >
           {anchor.text}
         </span>
         {anchor.info && (
-          <span className={clsx(styles['anchor-link-info'], testUtilsStyles['link-info'])}>{anchor.info}</span>
+          <span className={clsx(styles['anchor-link-info'], testUtilsStyles['anchor-link-info'])}>{anchor.info}</span>
         )}
       </a>
     </li>

diff --git a/src/anchor-navigation/test-classes/styles.scss b/src/anchor-navigation/test-classes/styles.scss
@@ -15,14 +15,14 @@
   /* used in test-utils */
 }
 
-.link {
+.anchor-link {
   /* used in test-utils */
 }
 
-.link-text {
+.anchor-link-text {
   /* used in test-utils */
 }
 
-.link-info {
+.anchor-link-info {
   /* used in test-utils */
 }
diff --git a/src/test-utils/dom/anchor-navigation/index.ts b/src/test-utils/dom/anchor-navigation/index.ts
@@ -25,29 +25,29 @@ export default class AnchorNavigationWrapper extends ComponentWrapper {
   }
 
   findActiveAnchor(): AnchorItemWrapper | null {
-    return this.findComponent(testUtilStyles['anchor-item--active'], AnchorItemWrapper);
+    return this.findComponent(`.${testUtilStyles['anchor-item--active']}`, AnchorItemWrapper);
   }
 
   findAnchorLinkByHref(href: string): ElementWrapper<HTMLAnchorElement> | null {
-    return this.find(`.${testUtilStyles.link}[href="${href}"]`);
+    return this.find(`.${testUtilStyles['anchor-link']}[href="${href}"]`);
   }
 }
 
 export class AnchorItemWrapper extends ElementWrapper {
   findLink(): ElementWrapper<HTMLAnchorElement> | null {
-    return this.findByClassName(testUtilStyles.link);
+    return this.findByClassName(testUtilStyles['anchor-link']);
   }
 
   findText(): ElementWrapper | null {
-    return this.findByClassName(testUtilStyles['link-text']);
+    return this.findByClassName(testUtilStyles['anchor-link-text']);
   }
 
   findInfo(): ElementWrapper | null {
-    return this.findByClassName(testUtilStyles['link-info']);
+    return this.findByClassName(testUtilStyles['anchor-link-info']);
   }
 
   @usesDom
   isActive(): boolean {
-    return this.getElement().getAttribute('aria-current') === 'true';
+    return this.findByClassName(testUtilStyles['anchor-link'])?.getElement().getAttribute('aria-current') === 'true';
   }
 }