Issue/43/use alienstore

.eslintrc

@@ -10,12 +10,12 @@
     "plugin:@typescript-eslint/recommended", 
     "plugin:react/recommended",
     // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:import/errors",
     "plugin:import/warnings",
-    "plugin:import/typescript"
+    "plugin:import/typescript",
+    "prettier/@typescript-eslint",
+    "plugin:prettier/recommended"
   ],
   "plugins": [
     "import",
@@ -39,7 +39,6 @@
     "sourceType": "module"  // Allows for the use of imports
   },
   "rules": {
-    "@typescript-eslint/indent": ["error", 2],
     "@typescript-eslint/explicit-function-return-type": ["error", {
       // "allowExpressions": true,
       "allowTypedFunctionExpressions": true
@@ -53,6 +52,13 @@
       {
         "devDependencies": true
       }
-    ]
+    ],
+    "import/extensions": [
+      2,
+      {
+        "scss": "always"
+      }
+    ],
+    "@typescript-eslint/no-empty-function": "off"
   }
 }

jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
     '<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs,ts,tsx}',
     '<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs,ts,tsx}',
   ],
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   testURL: 'http://localhost',
   modulePaths: ['src'],
   moduleNameMapper: {

package.json

@@ -51,6 +51,7 @@
     "@loadable/babel-plugin": "5.10.3",
     "@loadable/webpack-plugin": "5.7.1",
     "@testing-library/react": "9.3.0",
+    "@testing-library/react-hooks": "3.1.0",
     "@types/axios": "0.14.0",
     "@types/cors": "2.8.6",
     "@types/express": "4.17.1",
@@ -59,15 +60,15 @@
     "@types/loadable__server": "5.9.1",
     "@types/node": "12.7.12",
     "@types/ramda": "0.26.28",
-    "@types/react": "16.9.5",
-    "@types/react-dom": "16.9.1",
+    "@types/react": "16.9.19",
+    "@types/react-dom": "16.9.5",
     "@types/react-helmet": "5.0.11",
-    "@types/react-redux": "7.1.4",
-    "@types/react-router-dom": "5.1.0",
+    "@types/react-redux": "7.1.7",
+    "@types/react-router-dom": "5.1.3",
     "@types/redux-mock-store": "1.0.1",
     "@types/testing-library__react": "9.1.2",
-    "@typescript-eslint/eslint-plugin": "2.3.3",
-    "@typescript-eslint/parser": "2.3.3",
+    "@typescript-eslint/eslint-plugin": "2.14.0",
+    "@typescript-eslint/parser": "2.14.0",
     "autoprefixer": "9.6.4",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.3",
@@ -86,18 +87,17 @@
     "cz-conventional-changelog": "3.0.2",
     "dotenv": "8.1.0",
     "escape-string-regexp": "2.0.0",
-    "eslint": "6.5.1",
+    "eslint": "6.8.0",
     "eslint-config-airbnb-base": "14.0.0",
-    "eslint-config-prettier": "6.3.0",
-    "eslint-import-resolver-webpack": "0.11.1",
-    "eslint-loader": "3.0.2",
+    "eslint-config-prettier": "6.10.0",
+    "eslint-import-resolver-webpack": "0.12.0",
+    "eslint-loader": "3.0.3",
     "eslint-plugin-class-property": "1.1.0",
-    "eslint-plugin-flowtype": "4.3.0",
-    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-import": "2.19.1",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-prettier": "3.1.1",
-    "eslint-plugin-react": "7.16.0",
-    "eslint-plugin-react-hooks": "2.1.2",
+    "eslint-plugin-prettier": "3.1.2",
+    "eslint-plugin-react": "7.17.0",
+    "eslint-plugin-react-hooks": "2.3.0",
     "express": "4.17.1",
     "express-manifest-helpers": "0.6.0",
     "file-loader": "4.2.0",
@@ -126,7 +126,7 @@
     "sass-loader": "8.0.0",
     "semantic-release": "15.13.24",
     "style-loader": "1.0.0",
-    "typescript": "3.6.3",
+    "typescript": "3.7.4",
     "url-loader": "2.2.0",
     "webpack": "4.41.0",
     "webpack-bundle-analyzer": "3.5.2",
@@ -149,13 +149,13 @@
     "lodash.throttle": "4.1.1",
     "node-uuid": "1.4.8",
     "ramda": "0.26.1",
-    "react": "16.10.1",
-    "react-dom": "16.10.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
     "react-helmet": "5.2.1",
-    "react-redux": "7.1.1",
+    "react-redux": "7.1.3",
     "react-router": "5.1.2",
     "react-router-dom": "5.1.2",
-    "redux": "4.0.4",
+    "redux": "4.0.5",
     "redux-thunk": "2.3.0"
   }
 }

src/app/App.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import Routing from '~/components/routing';
 
 import './assets/scss/styles.scss';
 
-const App = (): React.ReactElement => <Routing />;
+const App = (): ReactElement => <Routing />;
 
 export default App;

src/app/components/base/Icon/Icon.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-ignore */
 import React from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react-test-renderer';
 import { render, cleanup, RenderResult } from '@testing-library/react';
 
 import Icon from './Icon';

src/app/components/base/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, FunctionComponent } from 'react';
 
 import './Icon.scss';
 
@@ -8,13 +8,14 @@ type PropsType = {
   size: number | string;
 };
 
-const Icon = ({ path, size }: PropsType): JSX.Element => {
+const Icon: FunctionComponent<PropsType> = ({ path, size }: PropsType) => {
   const [iconPath, setIconPath] = useState('');
 
   useEffect(() => {
     (async (): Promise<void> => {
       try {
-        const icon = await import('~/assets/svg/' + path + '.svg'); // eslint-disable-line prefer-template
+        // eslint-disable-next-line prettier/prettier
+        const icon = await import(/* webpackChunkName: "ShopIcon" */ '~/assets/svg/' + path + '.svg'); // eslint-disable-line prefer-template
         setIconPath(icon.default);
         // eslint-disable-next-line no-empty
       } catch (err) {}

src/app/components/common/ImgLoader/ImgLoader.test.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { cleanup, render, RenderResult } from '@testing-library/react';
+import { cleanup, render, RenderResult, act } from '@testing-library/react';
 
 import ImgLoader from './ImgLoader';
 

src/app/components/common/ImgLoader/ImgLoader.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { useState, useEffect, memo, ReactElement } from 'react';
 
 import Spinner from '~/components/base/Spinner';
 
@@ -11,7 +11,7 @@ type PropsType = {
   onError?: (error: string | Event) => void;
 };
 
-function ImgLoader({ src, onError }: PropsType): React.ReactElement {
+function ImgLoader({ src, onError }: PropsType): ReactElement {
   const [imgObj, setImg] = useState({ img: '', isLoading: true });
 
   const image = new Image();

src/app/components/common/ProductCard/ProductCard.test.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 
 import ProductCard from './ProductCard';
-import { ProductType } from '~/store/modules/products/types';
+import { Product } from '~/store/modules/products/types';
 
 afterEach(cleanup);
 
 describe('ProductCard', () => {
-  const product: ProductType = {
+  const product: Product = {
     _id: '5cc2def690118411e1311e92',
     name: 'Nike Air Jordan',
     image:

src/app/components/common/ProductCard/ProductCard.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement } from 'react';
 
 import ImgLoader from '~/components/common/ImgLoader';
 
-import { ProductType } from '~/store/modules/products/types';
+import { Product } from '~/store/modules/products/types';
 
 import './ProductCard.scss';
 
 type PropsType = {
-  product: ProductType;
+  product: Product;
   hasOverlay: boolean;
   hasHover: boolean;
   width: string;

src/app/components/common/Sidebar/Sidebar.test.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { act } from 'react-dom/test-utils';
+import { act } from 'react-test-renderer';
 import { render, cleanup, fireEvent, RenderResult } from '@testing-library/react';
 
 import Sidebar from './Sidebar';

src/app/components/core/Footer/Footer.test.tsx

@@ -1,33 +1,29 @@
-import React from 'react';
+import { cleanup, render, RenderResult } from '@testing-library/react';
 
-import { cleanup } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import renderFromAlien from '~/shared/utils/testing/renderFromAlien';
+import Footer from './index';
 
-import renderWithRedux from '~/shared/utils/testing/renderWithRedux';
+afterEach(cleanup);
 
-import Footer from './Footer';
+let testRenderer = {} as RenderResult;
 
-afterEach(cleanup);
+beforeEach(async () => {
+  const { result, wrapper } = await renderFromAlien(Footer);
+  const FooterComponent = result.current;
+
+  testRenderer = render(FooterComponent, { wrapper });
+});
 
 describe('Footer test', () => {
   it('should have only one social network', async () => {
-    let testRenderer = {};
-    await act(async () => {
-      testRenderer = renderWithRedux(<Footer />);
-    });
     const { getByTestId } = testRenderer;
     const social = getByTestId('social');
     expect(social.children.length).toBe(1);
   });
 
   it('should copyright text properly', async () => {
-    let testRenderer = {};
-
-    await act(async () => {
-      testRenderer = renderWithRedux(<Footer />);
-    });
     const { getByTestId } = testRenderer;
     const copyright = getByTestId('copyright');
-    expect(copyright.textContent).toBe('Copyright © 2019. All Rights Reserved');
+    expect(copyright.textContent).toBe('Copyright © 2020. All Rights Reserved');
   });
 });

src/app/components/core/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { useSelector } from 'react-redux';
 
@@ -9,7 +9,7 @@ import Icon from '~/components/base/Icon';
 
 import './Footer.scss';
 
-const Footer = (): React.ReactElement => {
+const Footer = (): ReactElement => {
   const { social }: FooterType = useSelector(getFooter);
 
   return (

src/app/components/core/Footer/index.tsx

@@ -1 +1,12 @@
-export { default } from './Footer';
+import { ReactElement } from 'react';
+
+import withAlien from '~/store/config/alienStore/withAlien';
+import FooterComponent from './Footer';
+
+type FooterModule = Promise<typeof import('~/store/modules/footer/footer.module')>;
+
+export default (): ReactElement =>
+  withAlien(FooterComponent, [
+    (): FooterModule =>
+      import(/* webpackChunkName: "ReduxModule" */ '~/store/modules/footer/footer.module'),
+  ]);