refactor: added tests

openedx · Oct 16, 2023 · acad78f · acad78f
1 parent b7b8bc3
commit acad78f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 10 deletions.
diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
@@ -77,5 +77,23 @@ describe('<Chip />', () => {
       await userEvent.type(iconAfter, '{enter}');
       expect(func).toHaveBeenCalled();
     });
+    it('onIconBeforeClick is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.click(iconBefore);
+      expect(func).toHaveBeenCalled();
+    });
+    it('onIconBeforeKeyDown is triggered', async () => {
+      const func = jest.fn();
+      render(
+        <TestChip iconBefore={Close} onIconBeforeClick={func} />,
+      );
+      const iconBefore = screen.getByTestId('icon-before');
+      await userEvent.type(iconBefore, '{enter}');
+      expect(func).toHaveBeenCalled();
+    });
   });
 });
diff --git a/src/Chip/__snapshots__/Chip.test.jsx.snap b/src/Chip/__snapshots__/Chip.test.jsx.snap
@@ -3,6 +3,10 @@
 exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label p-after"
@@ -11,9 +15,6 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -41,6 +42,10 @@ exports[`<Chip /> snapshots renders with props iconAfter 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -76,6 +81,10 @@ exports[`<Chip /> snapshots renders with props iconBefore 1`] = `
 exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__icon-before"
@@ -107,9 +116,6 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
   </div>
   <div
     className="pgn__chip__icon-after"
-    data-testid="icon-after"
-    role="button"
-    tabIndex={0}
   >
     <span
       className="pgn__icon"
@@ -137,6 +143,10 @@ exports[`<Chip /> snapshots renders with props iconBefore and iconAfter 1`] = `
 exports[`<Chip /> snapshots renders without props 1`] = `
 <div
   className="pgn__chip pgn__chip-light"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
 >
   <div
     className="pgn__chip__label"

diff --git a/src/Chip/index.scss b/src/Chip/index.scss
@@ -85,7 +85,7 @@
 
         &.active {
           &:hover .btn-icon .pgn__icon {
-              color: $dark-500;
+            color: $dark-500;
           }
 
           .btn-icon:focus {

diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
@@ -68,6 +68,7 @@ const Chip = React.forwardRef(({
               iconAs={Icon}
               alt="Chip icon before"
               invertColors
+              data-testid="icon-before"
             />
           ) : (
             <Icon src={iconBefore} />
@@ -83,7 +84,7 @@ const Chip = React.forwardRef(({
         {children}
       </div>
       {iconAfter && (
-        <div data-testid="icon-after" className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
+        <div className={classNames('pgn__chip__icon-after', { active: onIconAfterClick })}>
           {onIconAfterClick ? (
             <IconButton
               onClick={onIconAfterClick}
@@ -92,6 +93,7 @@ const Chip = React.forwardRef(({
               iconAs={Icon}
               alt="Chip icon after"
               invertColors
+              data-testid="icon-after"
             />
           ) : (
             <Icon src={iconAfter} />

diff --git a/src/Chip/mixins.scss b/src/Chip/mixins.scss
@@ -1,6 +1,6 @@
 @mixin chip-outline($ring-color: $white, $distance-to-border: 0, $border-radius: 50%, $border-width: .125rem) {
-  &:before {
-    content: '';
+  &::before {
+    content: "";
     position: absolute;
     top: $distance-to-border;
     right: $distance-to-border;

diff --git a/src/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/SelectableBox/tests/SelectableBoxSet.test.jsx
@@ -68,10 +68,13 @@ describe('<SelectableBox.Set />', () => {
       expect(screen.getByTestId('checkbox-set')).toBeInTheDocument();
     });
     it('renders with radio type if neither checkbox nor radio is passed', () => {
+      // eslint-disable-next-line no-console
       const originalError = console.error;
+      // eslint-disable-next-line no-console
       console.error = jest.fn();
       render(<SelectableCheckboxSet type="text" data-testid="radio-set" />);
       expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+      // eslint-disable-next-line no-console
       console.error = originalError;
     });
     it('renders with radio type', () => {