Fix missing import error (closes #1164) (#1182)

* fix(h5p-import): fix missing import error

* fix(tracking): prevent tracking in CI environment

client/src/state/H5PEditor/H5PEditorTypes.ts

@@ -99,7 +99,8 @@ export type H5PEditorActionTypes =
     | IH5PEditorSaveErrorAction
     | IH5PEditorExportActions
     | IH5PImportRequestAction
-    | IH5PImportSuccessAction;
+    | IH5PImportSuccessAction
+    | IH5PImportErrorAction;
 
 //
 
@@ -333,10 +334,10 @@ export const H5P_IMPORT_REQUEST = 'H5P_IMPORT_REQUEST';
 export const H5P_IMPORT_SUCCESS = 'H5P_IMPORT_SUCCESS';
 
 export interface IH5PImportErrorAction {
+    error: { response: Superagent.Response };
     payload: {
         tabId: string;
         path: string;
-        response: Superagent.Response;
     };
     type: typeof H5P_IMPORT_ERROR;
 }

client/src/state/Notifications/NotificationsReducer.ts

@@ -11,14 +11,16 @@ import {
 import {
     H5PEDITOR_SAVE_SUCCESS,
     H5PEDITOR_SAVE_ERROR,
+    H5P_IMPORT_ERROR,
     H5PEDITOR_EXPORT_SUCCESS,
     H5PEDITOR_EXPORT_ERROR,
     H5PEDITOR_ERROR,
     IH5PEditorSaveSuccessAction,
     IH5PEditorSaveErrorAction,
     IH5PEditorExportErrorAction,
     IH5PEditorExportSuccessAction,
-    IH5PEditorError
+    IH5PEditorError,
+    IH5PImportErrorAction
 } from '../H5PEditor/H5PEditorTypes';
 import shortid from 'shortid';
 
@@ -37,6 +39,7 @@ export default function notificationsReducer(
         | IH5PEditorExportErrorAction
         | IH5PEditorExportSuccessAction
         | IH5PEditorError
+        | IH5PImportErrorAction
 ): INotificationsState {
     switch (action.type) {
         case H5PEDITOR_ERROR:
@@ -84,6 +87,23 @@ export default function notificationsReducer(
                 ]
             };
 
+        case H5P_IMPORT_ERROR:
+            return {
+                ...state,
+                notifications: [
+                    ...state.notifications,
+                    {
+                        key: shortid(),
+                        message:
+                            action.error.response.body.message ||
+                            'notification.import.error',
+                        options: {
+                            variant: 'error'
+                        }
+                    }
+                ]
+            };
+
         case H5PEDITOR_EXPORT_SUCCESS:
             return {
                 ...state,

client/src/state/Notifications/__tests__/NotificationsReducer.test.ts

@@ -10,7 +10,8 @@ import {
     H5PEDITOR_SAVE_SUCCESS,
     H5PEDITOR_SAVE_ERROR,
     H5PEDITOR_EXPORT_SUCCESS,
-    H5PEDITOR_EXPORT_ERROR
+    H5PEDITOR_EXPORT_ERROR,
+    H5P_IMPORT_ERROR
 } from '../../H5PEditor/H5PEditorTypes';
 
 describe('initialState', () => {
@@ -162,4 +163,27 @@ describe('Notifications', () => {
         expect(state.notifications[0].options.variant).toBe('error');
         done();
     });
+
+    it('shows a error notification on H5P_IMPORT_ERROR', (done) => {
+        const state = reducer(
+            {
+                notifications: []
+            },
+            {
+                error: {
+                    response: {
+                        body: {
+                            message: 'test'
+                        }
+                    }
+                } as any,
+                payload: {} as any,
+                type: H5P_IMPORT_ERROR
+            }
+        );
+
+        expect(state.notifications.length).toBe(1);
+        expect(state.notifications[0].options.variant).toBe('error');
+        done();
+    });
 });

server/src/main.ts

@@ -31,7 +31,7 @@ process.on('uncaughtException', (error) => {
 //     });
 // }
 
-if (process.env.NODE_ENV !== 'development') {
+if (process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'CI') {
     nucleus.init('5e284c9a73aa9c0115e0d1d6');
     nucleus.appStarted();
     nucleus.setProps(

server/src/websocket.ts

@@ -9,8 +9,14 @@ const log = new Logger('websocket');
 export default function (server: http.Server): SocketIO.Server {
     log.info('booting');
     const io: SocketIO.Server = SocketIO(server);
-    io.on('connection', () => {
+    io.on('connection', (socket: SocketIO.Socket) => {
         log.info('new connection');
+
+        socket.on('dispatch', (action) => {
+            log.info(action);
+
+            io.emit('action', action);
+        });
     });
 
     // io.on('error', (error) => {

test/app.test.ts

@@ -0,0 +1,92 @@
+import path from 'path';
+import { Application } from 'spectron';
+import socketio from 'socket.io-client';
+
+const PORT = 8090;
+
+describe('App', () => {
+    let app: Application;
+    beforeAll(() => {
+        app = new Application({
+            env: {
+                USERDATA: path.join(__dirname, 'data'),
+                PORT: PORT,
+                NODE_ENV: 'CI'
+            },
+            path: path.join(
+                __dirname,
+                '..',
+                'node_modules',
+                '.bin',
+                'electron'
+            ),
+            args: [path.join(__dirname, '..')]
+        });
+        return app.start();
+    }, 30000);
+
+    afterAll(() => {
+        if (app && app.isRunning()) {
+            return app.stop();
+        }
+    });
+
+    describe('launch', () => {
+        it('shows an initial window', async (done) => {
+            const count = await app.client.getWindowCount();
+            expect(count).toBeGreaterThan(0);
+            done();
+        });
+
+        it('shows the Lumi H5P Editor text', async (done) => {
+            const headline = await app.client.$('h1');
+            const text = await headline.getText();
+
+            expect(text).toBe('Lumi H5P Editor');
+            done();
+        });
+
+        it('has the editor-startpage secondary button', async (done) => {
+            const button = await app.client.$(
+                '#editor-startpage-secondaryButton'
+            );
+
+            expect(button).toBeTruthy();
+            done();
+        });
+    });
+
+    describe('Import H5P file', () => {
+        it('displays an error snackbar if the imported .h5p file is not valid', async (done) => {
+            const ws = socketio(`http://localhost:${PORT}`);
+
+            ws.emit('dispatch', {
+                payload: { paths: [`${__dirname}/broken.h5p`] },
+                type: 'OPEN_H5P'
+            });
+
+            const snackbar = await app.client.$('#notistack-snackbar');
+            expect(await snackbar.getText()).toBe(
+                'package-validation-failed:invalid-h5p-json-file'
+            );
+
+            ws.disconnect();
+
+            done();
+        });
+
+        // it('imports a valid .h5p file', async (done) => {
+        //     const ws = socketio(`http://localhost:${PORT}`);
+
+        //     ws.emit('dispatch', {
+        //         payload: { paths: [`${__dirname}/valid.h5p`] },
+        //         type: 'OPEN_H5P'
+        //     });
+
+        //     setTimeout(() => {
+        //         ws.disconnect();
+        //         done();
+        //     }, 10000);
+        // });
+    });
+});