Redux logic errors

src/logic/__tests__/validateCurrentProject.test.js

@@ -0,0 +1,72 @@
+import {fromJS} from 'immutable';
+
+import {
+  projectRestoredFromLastSession as projectRestoredFromLastSessionAction,
+  snapshotImported as snapshotImportedAction,
+} from '../../actions/clients';
+import {validatedSource} from '../../actions/errors';
+import {
+  changeCurrentProject as changeCurrentProjectAction,
+  gistImported as gistImportedAction,
+  toggleLibrary as toggleLibraryAction,
+} from '../../actions/projects';
+import validateCurrentProject from '../validateCurrentProject';
+
+import {makeTestLogic} from './helpers';
+
+jest.mock('../../analyzers');
+
+const mockCssValidationErrors = [
+  {
+    text: 'You have a starting { but no ending } to go with it.',
+  },
+];
+
+const mockHtmlValidationErrors = [
+  {
+    text: 'Closing tag missing',
+  },
+];
+
+jest.mock('../../util/retryingFailedImports', () =>
+  jest.fn(() => ({
+    css: jest.fn(() => mockCssValidationErrors),
+    html: jest.fn(() => mockHtmlValidationErrors),
+    javascript: jest.fn(() => []),
+  })),
+);
+
+test('should validate current project', async () => {
+  const state = fromJS({
+    currentProject: {projectKey: '123'},
+    projects: {
+      123: {
+        sources: {
+          html: '',
+          css: '',
+          javascript: '',
+        },
+      },
+    },
+  });
+  const testLogic = makeTestLogic(validateCurrentProject);
+
+  [
+    changeCurrentProjectAction,
+    gistImportedAction,
+    snapshotImportedAction,
+    projectRestoredFromLastSessionAction,
+    toggleLibraryAction,
+  ].forEach(async action => {
+    const dispatch = await testLogic(action('123'), {
+      state,
+    });
+
+    expect(dispatch).toHaveBeenCalledWith(
+      validatedSource('html', mockHtmlValidationErrors),
+    );
+    expect(dispatch).toHaveBeenCalledWith(
+      validatedSource('css', mockCssValidationErrors),
+    );
+  });
+});

src/logic/__tests__/validateProjectOnChange.test.js

@@ -0,0 +1,48 @@
+import {fromJS} from 'immutable';
+
+import {validatedSource} from '../../actions/errors';
+import {updateProjectSource as updateProjectSourceAction} from '../../actions/projects';
+import validateProjectOnChange from '../validateProjectOnChange';
+
+import {makeTestLogic} from './helpers';
+
+jest.mock('../../analyzers');
+
+const mockCssValidationErrors = [
+  {
+    text: 'You have a starting { but no ending } to go with it.',
+  },
+];
+
+jest.mock('../../util/retryingFailedImports', () =>
+  jest.fn(() => ({
+    css: jest.fn(() => mockCssValidationErrors),
+    html: jest.fn(() => []),
+    javascript: jest.fn(() => []),
+  })),
+);
+
+test('should validate project on change', async () => {
+  const state = fromJS({
+    currentProject: {projectKey: '123'},
+    projects: {
+      123: {
+        sources: {
+          html: '',
+          css: 'div {',
+          javascript: '',
+        },
+      },
+    },
+  });
+
+  const testLogic = makeTestLogic(validateProjectOnChange);
+  const dispatch = await testLogic(
+    updateProjectSourceAction('123', 'css', 'div {'),
+    {state},
+  );
+
+  expect(dispatch).toHaveBeenCalledWith(
+    validatedSource('css', mockCssValidationErrors),
+  );
+});

src/logic/helpers/validateSource.js

@@ -0,0 +1,27 @@
+import {validatedSource} from '../../actions/errors';
+import {getCurrentProject} from '../../selectors';
+import retryingFailedImports from '../../util/retryingFailedImports';
+
+function importValidations() {
+  return retryingFailedImports(() =>
+    import(
+      /* webpackChunkName: "mainAsync" */
+      '../../validations'
+    ),
+  );
+}
+
+export default async function validateSource(
+  {language, source, projectAttributes},
+  dispatch,
+  getState,
+) {
+  const validations = await importValidations();
+  const validate = validations[language];
+  const validationErrors = await validate(source, projectAttributes);
+  const state = getState();
+  const currentProject = getCurrentProject(state);
+  if (currentProject.sources[language] === source) {
+    dispatch(validatedSource(language, validationErrors));
+  }
+}

src/logic/index.js

@@ -6,14 +6,18 @@ import projectSuccessfullySaved from './projectSuccessfullySaved';
 import saveProject from './saveProject';
 import startAccountMigration from './startAccountMigration';
 import unlinkGithubIdentity from './unlinkGithubIdentity';
+import validateCurrentProject from './validateCurrentProject';
+import validateProjectOnChange from './validateProjectOnChange';
 
 export default [
   instrumentApplicationLoaded,
   instrumentEnvironmentReady,
   linkGithubIdentity,
   logout,
-  startAccountMigration,
-  unlinkGithubIdentity,
   projectSuccessfullySaved,
   saveProject,
+  startAccountMigration,
+  unlinkGithubIdentity,
+  validateCurrentProject,
+  validateProjectOnChange,
 ];

src/logic/validateCurrentProject.js

@@ -0,0 +1,40 @@
+import map from 'lodash-es/map';
+import {createLogic} from 'redux-logic';
+
+import Analyzer from '../analyzers';
+import {getCurrentProject} from '../selectors';
+
+import validateSource from './helpers/validateSource';
+
+export default createLogic({
+  type: [
+    'CHANGE_CURRENT_PROJECT',
+    'GIST_IMPORTED',
+    'SNAPSHOT_IMPORTED',
+    'PROJECT_RESTORED_FROM_LAST_SESSION',
+    'TOGGLE_LIBRARY',
+  ],
+  latest: true,
+  async process({getState}, dispatch, done) {
+    const state = getState();
+    const currentProject = getCurrentProject(state);
+    const analyzer = new Analyzer(currentProject);
+
+    const validatePromises = map(
+      Reflect.ownKeys(currentProject.sources),
+      language =>
+        validateSource(
+          {
+            language,
+            source: currentProject.sources[language],
+            projectAttributes: analyzer,
+          },
+          dispatch,
+          getState,
+        ),
+    );
+
+    await Promise.all(validatePromises);
+    done();
+  },
+});

src/logic/validateProjectOnChange.js

@@ -0,0 +1,31 @@
+import {createLogic} from 'redux-logic';
+
+import Analyzer from '../analyzers';
+import {getCurrentProject} from '../selectors';
+
+import validateSource from './helpers/validateSource';
+
+export default createLogic({
+  type: 'UPDATE_PROJECT_SOURCE',
+  latest: true,
+  async process(
+    {
+      getState,
+      action: {
+        payload: {language, newValue},
+      },
+    },
+    dispatch,
+    done,
+  ) {
+    const state = getState();
+    const analyzer = new Analyzer(getCurrentProject(state));
+
+    await validateSource(
+      {language, source: newValue, projectAttributes: analyzer},
+      dispatch,
+      getState,
+    );
+    done();
+  },
+});

src/sagas/index.js

@@ -1,7 +1,6 @@
 import {all} from 'redux-saga/effects';
 
 import manageUserState from './manageUserState';
-import watchErrors from './errors';
 import watchProjects from './projects';
 import watchUi from './ui';
 import watchClients from './clients';
@@ -11,7 +10,6 @@ import watchAssignments from './assignments';
 export default function* rootSaga() {
   yield all([
     manageUserState(),
-    watchErrors(),
     watchProjects(),
     watchUi(),
     watchClients(),