Merge pull request #59 from Nazeh/fix-linting-generated-containers

Can-Sahin · web-flow · commit adadd55154f2 · 2020-02-20T13:46:56.000+03:00
Fixing linting issues for generated containers
diff --git a/.travis.yml b/.travis.yml
@@ -1,8 +1,8 @@
 language: node_js
 
 node_js:
-  - 'node'
-  - 'lts/*'
+  - "node"
+  - "lts/*"
 
 services:
   - xvfb
@@ -20,7 +20,7 @@ notifications:
   email:
     on_failure: change
 
-after_success: 'npm run coveralls'
+after_success: "npm run coveralls"
 
 cache:
   directories:
diff --git a/app/components/Button/tests/index.test.tsx b/app/components/Button/tests/index.test.tsx
@@ -12,7 +12,6 @@ const href = 'http://mxstbr.com';
 const children = <h1>Test</h1>;
 const renderComponent = (props: Props & { type?: any } = {}) => {
   const utils = render(
-    // tslint:disable-next-line: jsx-wrap-multiline
     <Button href={href} {...props}>
       {children}
     </Button>,
diff --git a/app/components/Footer/tests/index.test.tsx b/app/components/Footer/tests/index.test.tsx
@@ -17,7 +17,6 @@ describe('<Footer />', () => {
   it('should render and match the snapshot', () => {
     const renderedComponent = renderer
       .create(
-        // tslint:disable-next-line: jsx-wrap-multiline
         <Provider store={store}>
           <IntlProvider locale="en">
             <Footer />
diff --git a/app/components/Header/tests/index.test.tsx b/app/components/Header/tests/index.test.tsx
@@ -14,7 +14,6 @@ describe('<Header />', () => {
 
   it('should render a div', () => {
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <IntlProvider locale="en">
           <ConnectedRouter history={history}>
diff --git a/app/components/ReposList/tests/index.test.tsx b/app/components/ReposList/tests/index.test.tsx
@@ -16,7 +16,6 @@ describe('<ReposList />', () => {
 
   it('should render an error if loading failed', () => {
     const { queryByText } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <ReposList loading={false} error={{ message: 'Loading failed!' }} />
       </IntlProvider>,
@@ -52,7 +51,6 @@ describe('<ReposList />', () => {
       },
     ] as Repo[];
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <IntlProvider locale="en">
           <ReposList repos={repos} error={false} loading={false}/>
diff --git a/app/components/Toggle/tests/index.test.tsx b/app/components/Toggle/tests/index.test.tsx
@@ -19,7 +19,6 @@ describe('<Toggle />', () => {
       },
     });
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <Toggle values={['en', 'de']} messages={messages} />
       </IntlProvider>,
diff --git a/app/components/ToggleOption/tests/index.test.tsx b/app/components/ToggleOption/tests/index.test.tsx
@@ -14,7 +14,6 @@ describe('<ToggleOption />', () => {
       },
     });
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <ToggleOption value="en" message={message.enMessage} />
       </IntlProvider>,
@@ -24,7 +23,6 @@ describe('<ToggleOption />', () => {
 
   it('should display `value`(two letter language code) when `message` is absent', () => {
     const { queryByText } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="de">
         <ToggleOption value="de" />
       </IntlProvider>,
diff --git a/app/containers/FeaturePage/tests/index.test.tsx b/app/containers/FeaturePage/tests/index.test.tsx
@@ -9,7 +9,6 @@ describe('<FeaturePage />', () => {
     const {
       container: { firstChild },
     } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <FeaturePage />
       </IntlProvider>,
diff --git a/app/containers/HomePage/tests/index.test.tsx b/app/containers/HomePage/tests/index.test.tsx
@@ -18,7 +18,6 @@ jest.mock('containers/App/actions');
 
 const renderHomePage = store =>
   render(
-    // tslint:disable-next-line: jsx-wrap-multiline
     <Provider store={store}>
       <IntlProvider locale="en">
         <HomePage />
diff --git a/app/containers/LanguageProvider/tests/index.test.tsx b/app/containers/LanguageProvider/tests/index.test.tsx
@@ -28,7 +28,6 @@ describe('<LanguageProvider />', () => {
     const text = 'Test';
     const children = <h1>{text}</h1>;
     const { queryByText } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <LanguageProvider messages={messages}>
           {children}
@@ -40,7 +39,6 @@ describe('<LanguageProvider />', () => {
 
   it('should render the default language messages', () => {
     const { queryByText } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <LanguageProvider messages={translationMessages}>
           <FormattedMessage {...messages.someMessage} />
diff --git a/app/containers/LocaleToggle/tests/index.test.tsx b/app/containers/LocaleToggle/tests/index.test.tsx
@@ -27,7 +27,6 @@ describe('<LocaleToggle />', () => {
 
   it('should match the snapshot', () => {
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <LanguageProvider messages={translationMessages}>
           <LocaleToggle />
@@ -39,7 +38,6 @@ describe('<LocaleToggle />', () => {
 
   it('should present the default `en` english language option', () => {
     const { queryByDisplayValue } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <LanguageProvider messages={translationMessages}>
           <LocaleToggle />
@@ -51,7 +49,6 @@ describe('<LocaleToggle />', () => {
 
   it('should dispatch changeLocale when user selects a new option', () => {
     const { container } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <LanguageProvider messages={translationMessages}>
           <LocaleToggle />
diff --git a/app/containers/NotFoundPage/tests/index.test.tsx b/app/containers/NotFoundPage/tests/index.test.tsx
@@ -12,7 +12,6 @@ import messages from '../messages';
 describe('<NotFound />', () => {
   it('should render the Page Not Found text', () => {
     const { queryByText } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <NotFound />
       </IntlProvider>,
diff --git a/app/containers/RepoListItem/tests/index.test.tsx b/app/containers/RepoListItem/tests/index.test.tsx
@@ -26,7 +26,6 @@ const renderComponent = (item, currentUser) => {
     initialState, history);
 
   return render(
-    // tslint:disable-next-line: jsx-wrap-multiline
     <Provider store={store}>
       <IntlProvider locale="en">
         <RepoListItem item={item} />
diff --git a/app/types/index.d.ts b/app/types/index.d.ts
@@ -3,6 +3,7 @@ import { RouterState } from 'connected-react-router';
 import { ContainerState as LanguageProviderState } from 'containers/LanguageProvider/types';
 import { ContainerState as AppState } from 'containers/App/types';
 import { ContainerState as HomeState } from 'containers/HomePage/types';
+// [IMPORT NEW CONTAINERSTATE ABOVE] < Needed for generating containers seamlessly
 
 export interface InjectedStore extends Store {
   injectedReducers: any;
@@ -30,6 +31,8 @@ export interface ApplicationRootState {
   readonly global: AppState;
   readonly language: LanguageProviderState;
   readonly home: HomeState;
+  // [INSERT NEW REDUCER KEY ABOVE] < Needed for generating containers seamlessly
+
   // for testing purposes
   readonly test: any;
 }
diff --git a/app/utils/tests/injectReducer.test.tsx b/app/utils/tests/injectReducer.test.tsx
@@ -108,7 +108,6 @@ describe('useInjectReducer hook', () => {
 
   it('should inject a given reducer', () => {
     render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithReducer />
       </Provider>,
diff --git a/app/utils/tests/injectSaga.test.tsx b/app/utils/tests/injectSaga.test.tsx
@@ -54,7 +54,6 @@ describe('injectSaga decorator', () => {
   it('should inject given saga, mode, and props', () => {
     const props = { test: 'test' };
     renderer.create(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithSaga {...props} />
       </Provider>,
@@ -71,7 +70,6 @@ describe('injectSaga decorator', () => {
   it('should eject on unmount with a correct saga key', () => {
     const props = { test: 'test' };
     const renderedComponent = renderer.create(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithSaga {...props} />
       </Provider>,
@@ -92,7 +90,6 @@ describe('injectSaga decorator', () => {
   it('should propagate props', () => {
     const props = { testProp: 'test' };
     const renderedComponent = renderer.create(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithSaga {...props} />
       </Provider>,
@@ -136,7 +133,6 @@ describe('useInjectSaga hook', () => {
   it('should inject given saga and mode', () => {
     const props = { test: 'test' };
     render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithSaga {...props} />
       </Provider>,
@@ -152,7 +148,6 @@ describe('useInjectSaga hook', () => {
   it('should eject on unmount with a correct saga key', () => {
     const props = { test: 'test' };
     const { unmount } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <Provider store={store}>
         <ComponentWithSaga {...props} />
       </Provider>,
diff --git a/internals/generators/container/appendApplicationRootState.hbs b/internals/generators/container/appendApplicationRootState.hbs
@@ -0,0 +1,2 @@
+readonly {{ camelCase name }}: {{ properCase name }}State;
+// [INSERT NEW REDUCER KEY ABOVE] < Needed for generating containers seamlessly
diff --git a/internals/generators/container/importContainerState.hbs b/internals/generators/container/importContainerState.hbs
@@ -0,0 +1,2 @@
+import { ContainerState as {{ properCase name }}State } from 'containers/{{ properCase name }}/types';
+// [IMPORT NEW CONTAINERSTATE ABOVE] < Needed for generating containers seamlessly
diff --git a/internals/generators/container/index.js b/internals/generators/container/index.js
@@ -67,7 +67,7 @@ module.exports = {
     },
   ],
   actions: data => {
-    // Generate index.js and index.test.js
+    // Generate index.ts and index.test.tsx
     const actions = [
       {
         type: 'add',
@@ -97,8 +97,8 @@ module.exports = {
       });
     }
 
-    // If they want actions and a reducer, generate actions.js, constants.js,
-    // reducer.js and the corresponding tests for actions and the reducer
+    // If they want actions and a reducer, generate actions.ts, constants.ts,
+    // reducer.ts and the corresponding tests for actions and the reducer
     if (data.wantActionsAndReducer) {
       // Actions
       actions.push({
@@ -184,6 +184,20 @@ module.exports = {
         templateFile: './container/types.d.hbs',
         abortOnFail: true,
       });
+      actions.push({
+        type: 'modify',
+        path: '../../app/types/index.d.ts',
+        pattern: new RegExp(/.*\/\/.*\[IMPORT NEW CONTAINERSTATE ABOVE\].+\n/),
+        templateFile: './container/importContainerState.hbs',
+        abortOnFail: true,
+      });
+      actions.push({
+        type: 'modify',
+        path: '../../app/types/index.d.ts',
+        pattern: new RegExp(/.*\/\/.*\[INSERT NEW REDUCER KEY ABOVE\].+\n/),
+        templateFile: './container/appendApplicationRootState.hbs',
+        abortOnFail: true,
+      });
     }
 
     actions.push({
diff --git a/internals/generators/container/index.tsx.hbs b/internals/generators/container/index.tsx.hbs
@@ -45,7 +45,6 @@ interface Props {}
 
 function {{ properCase name }}(props: Props) {
   {{#if wantActionsAndReducer}}
-  // Warning: Add your key to RootState in types/index.d.ts file
   useInjectReducer({ key: '{{ camelCase name }}', reducer: reducer });
   {{/if}}
   {{#if wantSaga}}
diff --git a/internals/generators/container/test.tsx.hbs b/internals/generators/container/test.tsx.hbs
@@ -12,7 +12,7 @@ import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 {{/if}}
 import { Provider } from 'react-redux';
-import { browserHistory } from 'react-router-dom';
+import history from 'utils/history';
 
 import {{ properCase name }} from '../index';
 {{#if wantMessages}}
@@ -23,7 +23,7 @@ describe('<{{ properCase name }} />', () => {
   let store;
 
   beforeEach(() => {
-    store = configureStore({}, browserHistory);
+    store = configureStore({}, history);
   });
 
   it('Expect to not log errors in console', () => {
diff --git a/internals/scripts/generate-templates-for-linting.js b/internals/scripts/generate-templates-for-linting.js
@@ -175,6 +175,29 @@ function removeFile(filePath) {
   });
 }
 
+/**
+ * Copy file
+ * @param {string} filePath
+ * @param {string} [backupFileExtension=BACKUPFILE_EXTENSION]
+ * @returns {Promise<*>}
+ */
+async function backupFile(
+  filePath,
+  backupFileExtension = BACKUPFILE_EXTENSION,
+) {
+  return new Promise((resolve, reject) => {
+    const targetFile = filePath.concat(`.${backupFileExtension}`)
+    try {
+      fs.copyFile(filePath, targetFile, err => {
+        if (err) throw err;
+      });
+      resolve(targetFile);
+    } catch (err) {
+      reject(err);
+    }
+  });
+}
+
 /**
  * Overwrite file from copy
  * @param {string} filePath
@@ -230,6 +253,7 @@ async function generateComponent({ name, memo }) {
   return component;
 }
 
+
 /**
  * Test the container generator and rollback when successful
  * @param {string} name - Container name
@@ -271,6 +295,8 @@ async function generateContainer({ name, memo }) {
  * @returns {Promise<[string]>}
  */
 async function generateComponents(components) {
+  const typesPath = '../../app/types/index.d.ts'
+
   const promises = components.map(async component => {
     let result;
 
@@ -283,8 +309,20 @@ async function generateComponents(components) {
     return result;
   });
 
+  const backupTypes = await backupFile(typesPath)
+    .then(feedbackToUser("Generated 'types/index.ds.ts.rbgen'"))
+    .catch(reason => reportErrors(reason));
+
   const results = await Promise.all(promises);
 
+  await restoreModifiedFile(backupTypes)
+    .then(feedbackToUser(`Restored: ${typesPath}`))
+    .catch(reason => reportErrors(reason));
+
+  await removeFile(backupTypes)
+    .then(feedbackToUser(`Removed: ${backupTypes}`))
+    .catch(reason => reportErrors(reason));
+
   return results;
 }
 
diff --git a/internals/templates/containers/HomePage/tests/index.test.tsx b/internals/templates/containers/HomePage/tests/index.test.tsx
@@ -13,7 +13,6 @@ describe('<HomePage />', () => {
     const {
       container: { firstChild },
     } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <HomePage />
       </IntlProvider>,
diff --git a/internals/templates/containers/NotFoundPage/tests/index.test.tsx b/internals/templates/containers/NotFoundPage/tests/index.test.tsx
@@ -12,7 +12,6 @@ describe('<NotFound />', () => {
     const {
       container: { firstChild },
     } = render(
-      // tslint:disable-next-line: jsx-wrap-multiline
       <IntlProvider locale="en">
         <NotFound />
       </IntlProvider>,
diff --git a/internals/templates/types/index.d.ts b/internals/templates/types/index.d.ts
diff --git a/internals/templates/utils/tests/injectReducer.test.tsx b/internals/templates/utils/tests/injectReducer.test.tsx
diff --git a/internals/templates/utils/tests/injectSaga.test.tsx b/internals/templates/utils/tests/injectSaga.test.tsx
diff --git a/internals/webpack/webpack.base.babel.js b/internals/webpack/webpack.base.babel.js
diff --git a/tslint.json b/tslint.json
