Merge branch 'master' of https://github.com/fliotta/tiquet into master

client/jest.config.ts

@@ -0,0 +1,20 @@
+import { defaults } from 'jest-config';
+
+export default {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    "^.+\\.svg$": "<rootDir>/svgTransform.ts"
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  roots: ["<rootDir>/src"],
+  setupFilesAfterEnv: [
+    "@testing-library/jest-dom/extend-expect"
+  ],
+  moduleNameMapper: {
+    "\\.(css|less|scss|sss|styl)$": "<rootDir>/node_modules/jest-css-modules",
+    '^@backend/(.*)$': '<rootDir>/../server/src/api/$1',
+  },
+};

client/package.json

@@ -5,15 +5,16 @@
   "main": "index.js",
   "scripts": {
     "bundle": "webpack --mode production",
-    "start": "webpack-dev-server"
+    "start": "webpack-dev-server",
+    "test": "jest"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.12.1",
     "@types/jest": "^26.0.13",
     "@types/node": "^14.10.1",
     "@types/react": "^16.9.49",
@@ -30,6 +31,8 @@
     "dayjs": "^1.8.31",
     "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.2.0",
+    "jest": "^26.6.1",
+    "jest-css-modules": "^2.1.0",
     "live-server": "^1.2.1",
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
@@ -53,7 +56,9 @@
     "sass": "^1.24.0",
     "sass-loader": "^8.0.0",
     "style-loader": "^1.0.0",
+    "ts-jest": "^26.4.3",
     "ts-loader": "^8.0.3",
+    "ts-node": "^9.0.0",
     "typescript": "^4.0.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "universal-cookie": "^4.0.3",
@@ -62,5 +67,9 @@
     "webpack-bundle-analyzer": "^3.6.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.8.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0"
   }
 }

client/src/components/BoardCard/index.tsx

@@ -12,7 +12,7 @@ import './styles.scss';
 // Declarations
 const boardService = new BoardsService();
 
-interface BoardCardProps {
+export interface BoardCardProps {
   className?: string,
   onDelete?: Function,
   boardInfo: {

client/src/components/EditableText/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EditableText /> Matches snapshot 1`] = `
+<div
+  class="editable-text"
+>
+  <p
+    class="editable-text__title"
+  >
+    test text
+     
+    <i
+      class="fas fa-pencil-alt editable-text__icon"
+    />
+  </p>
+</div>
+`;

client/src/components/EditableText/__test__/index.test.tsx

@@ -0,0 +1,115 @@
+// Packages
+import * as React from 'react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
+
+// Project
+import EditableText from '../index';
+
+
+describe('<EditableText />', () => {
+  it('Matches snapshot', () => {
+    const { container } = render(
+      <EditableText
+        text="test text"
+        tag="p"
+        onSuccess={jest.fn()}
+      />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('Receives text', () => {
+    const testText = 'testText';
+
+    const { container } = render(
+      <EditableText
+        text={testText}
+        tag='p'
+        onSuccess={jest.fn()}
+      />
+    );
+
+    expect(container.firstChild).toHaveTextContent(testText);
+  });
+
+  it('Receives tag', () => {
+    const testTag = 'p';
+
+    const { container } = render(
+      <EditableText
+        text='testText'
+        tag={testTag}
+        onSuccess={jest.fn()}
+      />
+    );
+
+    expect(container.firstChild.firstChild.nodeName.toLowerCase()).toBe(testTag);
+  });
+
+  it('Editable mode', () => {
+    const { container } = render(
+      <EditableText
+        text='testText'
+        tag='p'
+        onSuccess={jest.fn()}
+      />
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  });
+
+  it('Input receives classname', () => {
+    const inputClassName = 'testClassname';
+
+    const { container } = render(
+      <EditableText
+        text='testText'
+        inputClassName={inputClassName}
+        tag='p'
+        onSuccess={jest.fn()}
+      />
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(screen.getByRole('textbox')).toHaveClass(inputClassName);
+  });
+
+  it('Input receives default text', () => {
+    const textValue = 'Some test value';
+
+    const { container } = render(
+      <EditableText
+        text={textValue}
+        tag='p'
+        onSuccess={jest.fn()}
+      />
+    );
+
+    fireEvent.click(container.firstChild);
+
+    expect(screen.getByRole('textbox').getAttribute('value')).toBe(textValue);
+  });
+
+  it('onSuccess called', async () => {
+    const onSuccess = jest.fn();
+
+    const { container } = render(
+      <EditableText
+        text='testtext'
+        tag='p'
+        onSuccess={onSuccess}
+      />
+    );
+
+    fireEvent.click(container.firstChild);
+    await act(async () => {
+      fireEvent.submit(screen.getByRole('form'));
+    });
+
+    expect(onSuccess).toBeCalledTimes(1);
+  });
+});

client/src/components/EditableText/index.tsx

@@ -1,5 +1,6 @@
 // Packages
 import React, { useState } from 'react';
+import { useForm } from 'react-hook-form';
 import cn from 'classnames';
 import useOnclickOutside from "react-cool-onclickoutside";
 
@@ -22,14 +23,13 @@ const EditableText = ({
   inputClassName,
   onSuccess,
   onCancel,
+  ...rest
 }: IProps): JSX.Element => {
+  const { handleSubmit, register, errors } = useForm();
   const [editing, setEditing] = useState(false);
 
-  const handleSubmit = e => {
-    e.preventDefault();
-    const value = e.target[`editable_text_${text}`].value;
-
-    onSuccess(value, () => {
+  const handleSubmitSuccess = ({ newValue }) => {
+    onSuccess(newValue, () => {
       setEditing(false);
     });
   };
@@ -44,19 +44,21 @@ const EditableText = ({
   const clickOutsideRef = useOnclickOutside(cancel);
 
   return (
-    <div ref={clickOutsideRef} className="editable-text" onClick={() => setEditing(true)}>
+    <div {...rest} ref={clickOutsideRef} className="editable-text" onClick={() => setEditing(true)}>
       {!editing
         ? React.createElement(tag, { className: cn("editable-text__title", textClassName) }, (
           <>
             {text} <i className="fas fa-pencil-alt editable-text__icon"></i>
           </>
         ))
         : (
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit(handleSubmitSuccess)} role="form">
             <input
               type="text"
+              role="textbox"
+              name="newValue"
               className={cn(inputClassName)}
-              id={`editable_text_${text}`}
+              ref={register({ required: "Required" })}
               defaultValue={text}
             />
           </form>

client/src/components/Loading/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Loading /> Matches snapshot 1`] = `
+<div
+  class="loading"
+>
+  <img
+    src="[object Object]"
+  />
+</div>
+`;

client/src/components/Loading/__test__/index.test.tsx

@@ -0,0 +1,24 @@
+// Packages
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+// Project
+import Loading from '../index';
+
+
+describe('<Loading />', () => {
+  it('Matches snapshot', () => {
+    const { container } = render(
+      <Loading display />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('Not visible when false display prop', () => {
+    const { container } = render(
+      <Loading />
+    );
+    expect(container.firstChild).toHaveClass('loading--hidden');
+  });
+});

client/src/components/Loading/index.tsx

@@ -7,7 +7,7 @@ import Spinner from '../../assets/images/spinner.svg';
 import './styles.scss'
 
 interface LoadingProps {
-  display: Boolean
+  display?: Boolean
 };
 
 const Loading = ({ display }: LoadingProps): JSX.Element => (

client/src/components/OAuth/Github/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GithubOAuth /> Matches snapshot 1`] = `
+<div
+  class="oauth-github"
+>
+  <i
+    aria-hidden="true"
+    class="oauth-github__icon fab fa-github"
+  />
+  <p
+    class="oauth-github__text"
+  >
+    Auth with Github
+  </p>
+</div>
+`;

client/src/components/OAuth/Github/__test__/index.test.tsx

@@ -0,0 +1,27 @@
+// Packages
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+// Project
+import GithubOAuth from '../index';
+
+
+describe('<GithubOAuth />', () => {
+  it('Matches snapshot', () => {
+    const { container } = render(
+      <GithubOAuth onSuccess={jest.fn()} />
+    );
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('Receives text', () => {
+    const testText = 'testText';
+
+    const { container } = render(
+      <GithubOAuth onSuccess={jest.fn()} text={testText} />
+    );
+
+    expect(container.firstChild).toHaveTextContent('testText');
+  });
+});

client/src/setupTest.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

client/svgTransform.ts

@@ -0,0 +1,8 @@
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    return 'svgTransform';
+  },
+}

client/tsconfig.json

@@ -6,10 +6,12 @@
     "jsx": "react",
     "noImplicitAny": false,
     "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "moduleResolution": "node",
     "lib": [
       "es2019",
-      "dom"
-    ]
-  }
+      "dom",
+    ],
+  },
+  "exclude": ["node_modules"]
 }