add some unit test

Author: marianapatcosta

__mocks__/file-mock.ts

@@ -0,0 +1,2 @@
+const fileMock = 'test-file-stub';
+export default fileMock;

__mocks__/i18next-mock.ts

@@ -0,0 +1,8 @@
+const i18n = {
+  init: () => {},
+  t: (k: string) => k,
+  use: () => {
+    return i18n;
+  },
+};
+export default i18n;

__mocks__/match-media-mock.ts

@@ -0,0 +1,13 @@
+export default Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

__mocks__/nanoid-mock.ts

@@ -0,0 +1,4 @@
+const nanoid = {
+  nanoid: () => '',
+};
+export default nanoid;

__mocks__/react-i18next-mock.ts

@@ -0,0 +1,12 @@
+const reactI18Next: any = jest.createMockFromModule('react-i18next');
+
+reactI18Next.useTranslation = () => {
+  return {
+    t: (str: string) => str,
+    i18n: {
+      changeLanguage: () => new Promise(() => {}),
+    },
+  };
+};
+
+export default reactI18Next;

__mocks__/style-mock.ts

@@ -0,0 +1 @@
+export {};

src/components/game/Controllers/index.tsx

@@ -77,7 +77,7 @@ const Controllers: React.FC<ControllersProps> = ({ isSpinning, onSpin }) => {
   );
 
   return (
-    <div className={styles.controllers}>
+    <div className={styles.controllers} data-cy="controllers">
       <div className={styles['controllers__settings']}>
         <ButtonIcon
           icon={InfoSvg}

src/components/game/Reel/index.tsx

@@ -16,7 +16,7 @@ interface ReelProps {
   animationDuration: number;
 }
 
-const Reel: React.FC<ReelProps> = ({ symbols: reel, reelIndex, animationDuration }) => {
+const Reel: React.FC<ReelProps> = ({ symbols, reelIndex, animationDuration }) => {
   const areSlotsSpinning = useSelector((state: State) => state.slotMachine.isSpinning);
   const [isReelSpinning, setIsReelsSpinning] = useState<boolean>(false);
   const reelRef = useRef<HTMLDivElement>(null);
@@ -52,7 +52,7 @@ const Reel: React.FC<ReelProps> = ({ symbols: reel, reelIndex, animationDuration
       y: (index: number) => index * symbolSizeInPx,
     });
 
-    const reelHeight: number = reel.length * symbolSizeInPx;
+    const reelHeight: number = symbols.length * symbolSizeInPx;
     const wrapOffsetTop: number = -symbolSizeInPx;
     const wrapOffsetBottom: number = reelHeight + wrapOffsetTop;
     const wrap = gsap.utils.wrap(wrapOffsetTop, wrapOffsetBottom);
@@ -75,8 +75,8 @@ const Reel: React.FC<ReelProps> = ({ symbols: reel, reelIndex, animationDuration
   }, []);
 
   return (
-    <div className={styles.reel} ref={reelRef}>
-      {reel.map((symbol, index) => (
+    <div className={styles.reel} ref={reelRef} data-cy="reel">
+      {symbols.map((symbol, index) => (
         <SymbolComponent
           symbol={symbol}
           isSpinning={isReelSpinning}

src/components/game/Reels/index.tsx

@@ -15,7 +15,7 @@ const Reels: React.FunctionComponent<ReelsProps> = ({ reels }) => {
     getRandomNumber(MIN_SPIN_ANIMATION_DURATION, MAX_SPIN_ANIMATION_DURATION) * Math.random();
 
   return (
-    <div className={styles.reels}>
+    <div className={styles.reels} data-cy="reels">
       {reels.map((reel, index) => (
         <Reel
           symbols={reel}

src/components/game/ResetGame/index.tsx

@@ -0,0 +1,70 @@
+import { ChangeEvent, useContext, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox } from '@/components';
+import { GAME_RESET, RESET_MODAL_DISMISSED } from '@/store/action-types';
+import { ModalContext, ModalContextData } from '@/context/ModalContext';
+import styles from './styles.module.scss';
+
+const ResetGame: React.FC = () => {
+  const [t] = useTranslation();
+  const dispatch = useDispatch();
+  const { modalProps, closeModal } = useContext<ModalContextData>(ModalContext);
+  const [doNotShowAgain, setDoNotShowAgain] = useState<boolean>(false);
+  const buttonLabel: string = modalProps?.hasNoCredits ? t('global.ok') : t('global.yes');
+
+  const handleConfirmDiscard = (): void => {
+    dispatch({ type: GAME_RESET });
+    if (doNotShowAgain) {
+      dispatch({ type: RESET_MODAL_DISMISSED, payload: true });
+    }
+    closeModal();
+  };
+
+  const handleDeclineReset = (): void => {
+    if (doNotShowAgain) {
+      dispatch({ type: RESET_MODAL_DISMISSED, payload: false });
+    }
+    closeModal();
+  };
+
+  const handleOnChange = (event: ChangeEvent) => {
+    const target = event.target as HTMLInputElement;
+    setDoNotShowAgain(target.checked);
+  };
+
+  return (
+    <div className={styles.reset}>
+      <p>{modalProps?.hasNoCredits ? t('reset.resetGame') : t('reset.resetGame')}</p>
+      <div className={styles['reset__buttons']}>
+        {!modalProps?.hasNoCredits && (
+          <Button
+            label={t('global.no')}
+            aria-label={t('reset.clickDeclineDiscard')}
+            title={t('reset.clickDeclineDiscard')}
+            onClick={handleDeclineReset}
+          />
+        )}
+        <Button
+          label={buttonLabel}
+          aria-label={t('reset.clickDiscard', {
+            buttonLabel,
+          })}
+          title={t('reset.clickDiscard', {
+            buttonLabel,
+          })}
+          onClick={handleConfirmDiscard}
+        />
+      </div>
+      {!modalProps?.hasNoCredits && (
+        <Checkbox
+          label={t('reset.doNotShowAgain')}
+          checked={doNotShowAgain}
+          onChange={handleOnChange}
+        />
+      )}
+    </div>
+  );
+};
+
+export { ResetGame };

src/components/game/ResetGame/styles.module.scss

@@ -0,0 +1,27 @@
+.reset {
+  padding: 2rem 2rem 1rem;
+  color: $color-blue;
+  text-align: center;
+  line-height: 1.25rem;
+
+  &__buttons {
+    display: flex;
+    justify-content: center;
+    gap: 0.7rem;
+    margin: 2rem 0;
+
+    // for safari below 14.1 that not supports gap with flexbox
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) {
+        margin: -0.35rem;
+        & > * {
+          margin: 0.35rem;
+        }
+      }
+    }
+
+    button {
+      min-width: 3.25rem;
+    }
+  }
+}

src/components/game/ResetGame/styles.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'reset': string;
+  'reset__buttons': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

src/components/game/Symbol/index.tsx

@@ -69,6 +69,7 @@ const Symbol: React.FC<SymbolProps> = ({
   return (
     <div
       id={isBonusWildCard ? undefined : `symbol-${reelIndex}`}
+      data-cy="symbol"
       className={`${styles.symbol} ${isSpinning ? styles['symbol--spinning'] : ''} ${
         willBeReplacedByBonusWildCardSymbol ? styles['symbol--hidden'] : ''
       } ${isBonusWildCard ? styles['symbol--showing'] : ''} ${

src/components/ui/Button/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button renders without errors and matches snapshot 1`] = `
+<button
+  class="button  "
+>
+  Button
+</button>
+`;

src/components/ui/Button/index.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './index';
+
+describe('Button', () => {
+  const onClickMock = jest.fn();
+  const defaultProps = {
+    label: 'Button',
+    onClick: onClickMock,
+  };
+  it('renders without errors and matches snapshot', () => {
+    const {
+      container: { firstChild },
+    } = render(<Button {...defaultProps} />);
+
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  it('should display label', () => {
+    render(<Button {...defaultProps} />);
+    screen.getByText('Button');
+  });
+
+  it('should handle click events', () => {
+    const onClickMock = jest.fn();
+    const {
+      container: { firstChild },
+    } = render(<Button {...defaultProps} onClick={onClickMock} />);
+
+    firstChild && fireEvent.click(firstChild);
+
+    expect(onClickMock).toBeCalled();
+  });
+
+  describe('Disabled Button', () => {
+    test('should display text', () => {
+      render(<Button {...defaultProps} disabled={true} />);
+      screen.getByText('Button');
+    });
+
+    it('should be disabled', () => {
+      const {
+        container: { firstChild },
+      } = render(<Button {...defaultProps} disabled={true} />);
+
+      expect(firstChild).toHaveAttribute('disabled');
+    });
+
+    it('should not handle click events', () => {
+      const {
+        container: { firstChild },
+      } = render(<Button {...defaultProps} disabled />);
+
+      firstChild && fireEvent.click(firstChild);
+
+      expect(onClickMock).not.toBeCalled();
+    });
+  });
+
+  it('should play sound on click', () => {
+    const sound = new Audio() as HTMLAudioElement;
+    const playMock = jest.fn();
+    Object.defineProperty(global.window.HTMLMediaElement.prototype, 'play', {
+      configurable: true,
+      get() {
+        return playMock;
+      },
+    });
+    const {
+      container: { firstChild },
+    } = render(<Button {...defaultProps} buttonSound={sound} />);
+
+    firstChild && fireEvent.click(firstChild);
+
+    expect(playMock).toBeCalled();
+  });
+});

src/components/ui/ButtonIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonIcon renders without errors and matches snapshot 1`] = `
+<button
+  class="button "
+>
+  <svg
+    aria-hidden="true"
+    data-testid="button-icon"
+    height="50"
+    viewBox="-11.5 -10.232 23 20.463"
+    width="50"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      fill="#61dafb"
+      r="2.05"
+    />
+    <g
+      fill="none"
+      stroke="#61dafb"
+    >
+      <ellipse
+        id="e1"
+        rx="11"
+        ry="4.2"
+      />
+      <ellipse
+        rx="11"
+        ry="4.2"
+        transform="rotate(60)"
+      />
+      <ellipse
+        rx="11"
+        ry="4.2"
+        transform="rotate(120)"
+      />
+    </g>
+  </svg>
+</button>
+`;

src/components/ui/ButtonIcon/index.test.tsx

@@ -0,0 +1,53 @@
+import { ReactSvg } from '@/assets/svg';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ButtonIcon } from './index';
+
+describe('ButtonIcon', () => {
+  const sound = new Audio() as HTMLAudioElement;
+  const onClickMock = jest.fn();
+  const defaultProps = {
+    icon: ReactSvg,
+    buttonSound: sound,
+    onClick: onClickMock,
+  };
+  it('renders without errors and matches snapshot', () => {
+    const {
+      container: { firstChild },
+    } = render(<ButtonIcon {...defaultProps} />);
+
+    expect(firstChild).toMatchSnapshot();
+  });
+
+  it('should display icon', () => {
+    render(<ButtonIcon {...defaultProps} />);
+    const icon = screen.getByTestId('button-icon');
+    expect(icon).toBeTruthy();
+  });
+
+  it('should handle click events', () => {
+    const {
+      container: { firstChild },
+    } = render(<ButtonIcon {...defaultProps} />);
+
+    firstChild && fireEvent.click(firstChild);
+
+    expect(onClickMock).toBeCalled();
+  });
+
+  it('should play sound on click', () => {
+    const playMock = jest.fn();
+    Object.defineProperty(global.window.HTMLMediaElement.prototype, 'play', {
+      configurable: true,
+      get() {
+        return playMock;
+      },
+    });
+    const {
+      container: { firstChild },
+    } = render(<ButtonIcon {...defaultProps} />);
+
+    firstChild && fireEvent.click(firstChild);
+
+    expect(playMock).toBeCalled();
+  });
+});