From acad78f5dcb4ad0b3e8fd3dd2d8acca52f13c7a5 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Mon, 16 Oct 2023 15:01:14 +0300
Subject: [PATCH] refactor: added tests

---
 src/Chip/Chip.test.jsx                        | 18 +++++++++++++++
 src/Chip/__snapshots__/Chip.test.jsx.snap     | 22 ++++++++++++++-----
 src/Chip/index.scss                           |  2 +-
 src/Chip/index.tsx                            |  4 +++-
 src/Chip/mixins.scss                          |  4 ++--
 .../tests/SelectableBoxSet.test.jsx           |  3 +++
 6 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/Chip/Chip.test.jsx b/src/Chip/Chip.test.jsx
index fd933621fbf..6a28153f822 100644
--- 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
index 4b706e50dbe..f1982430b7e 100644
--- 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
index 2b308019b8e..dde4a0290b3 100644
--- 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
index 1763e2de6e5..e61b5ba7a1b 100644
--- 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
index 9f2cc9d09f7..5611132d101 100644
--- 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
index 934220403b3..e010d69d69b 100644
--- 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', () => {