complete tests

Author: dev-javascript

src/__snapshots__/stringToReact.test.js.snap

@@ -18,21 +18,18 @@ describe('constructor :', () => {
       );
     }
   });
-  test('check _parentTemp property', () => {
+  test('check _getReact property', () => {
     const ins = new Ctx(React, Babel);
-    expect(ins._parentTemp).toBe(`"use strict";\nreturn @temp;`);
+    expect(ins._getReact()).toEqual(React);
   });
-  test('it should set React global variable if it is not existed', () => {
-    window.React = undefined;
-    new Ctx(React, Babel);
-    expect(window.React).toEqual(React);
-    window.React = undefined;
-    const _React = {};
-    new Ctx(_React, Babel);
-    expect(window.React).toEqual(_React);
-    new Ctx(React, Babel);
-    expect(window.React).toEqual(_React);
-    window.React = undefined;
+  test('check _getBabel property', () => {
+    const ins = new Ctx(React, Babel);
+    expect(ins._getBabel()).toEqual(Babel);
+  });
+  test('it should set _rerender property', () => {
+    const rerender = () => {};
+    const ins = new Ctx(React, Babel, rerender);
+    expect(ins._rerender).toEqual(rerender);
   });
   test('the initial value of _com prop should be a function which returns null', () => {
     const ins = new Ctx(React, Babel);
@@ -64,48 +61,54 @@ describe('methods : ', () => {
     expect.assertions(3);
     const ins = new Ctx(React, Babel);
     {
-      ins._com = () => {};
-      ins._validateCodeInsideTheTemp();
+      ins._validateCodeInsideTheTemp(() => {});
       expect(1).toBe(1);
     }
     {
       class c {
         constructor() {}
       }
-      ins._com = c;
-      ins._validateCodeInsideTheTemp();
+      ins._validateCodeInsideTheTemp(c);
       expect(1).toBe(1);
     }
     try {
-      ins._com = '';
-      ins._validateCodeInsideTheTemp();
+      ins._validateCodeInsideTheTemp({});
     } catch (er) {
       expect(er.message).toBe('code inside the passed string into string-to-react-component, should be a function');
     }
   });
-  test('_generateCom method', () => {
+  test('_getBlob method', () => {
     const ins = new Ctx(React, Babel);
-    ins._transpile = () => '() => {}';
-    ins._validateCodeInsideTheTemp = jest.fn(() => {});
-    ins._generateCom();
-    expect(ins._validateCodeInsideTheTemp.mock.calls.length).toBe(1);
+    const blob = ins._getBlob('()=>{}');
+    expect(!!blob.size).toBe(true);
+    expect(blob.type).toBe('application/javascript');
   });
-  test('updateTemplate method', () => {
+  test('update method should call _update', () => {
     const ins = new Ctx(React, Babel);
-    ins._validateTemplate = jest.fn();
-    ins._generateCom = jest.fn();
-    let temp = '()=>3';
-    ins._temp = '()=>3';
-    ins.updateTemplate(temp);
-    expect(ins._validateTemplate.mock.calls.length).toBe(1);
-    expect(ins._validateTemplate.mock.calls[0][0]).toBe(temp);
-    expect(ins._generateCom.mock.calls.length).toBe(0);
-    ins._temp = '';
-    ins.updateTemplate(temp);
-    expect(ins._generateCom.mock.calls.length).toBe(1);
+    ins._update = jest.fn(() => {});
+    const str = '()=>{}';
+    const babelOptions = {};
+    ins.update(str, babelOptions);
+    expect(ins._update.mock.calls.length).toBe(1);
+    expect(ins._update.mock.calls[0][0]).toBe(str);
+    expect(ins._update.mock.calls[0][1]).toBe(babelOptions);
   });
-  test('_checkBabelOptions method should set react preset and throw an error with invalid parameter', () => {
-    expect.assertions(4);
+  test('_update method', () => {
+    const ins = new Ctx(React, Babel);
+    ins._updateTemplate = jest.fn((template, babelOptions) => 'transpiled string code');
+    ins._updateComponent = jest.fn((temp, babelOp) => {});
+    const str = '()=>{}';
+    const babelOptions = {};
+    ins._update(str, babelOptions);
+    expect(ins._updateTemplate.mock.calls.length).toBe(1);
+    expect(ins._updateTemplate.mock.calls[0][0]).toBe(str);
+    expect(ins._updateTemplate.mock.calls[0][1]).toBe(babelOptions);
+    expect(ins._updateComponent.mock.calls.length).toBe(1);
+    expect(ins._updateComponent.mock.calls[0][0]).toBe('transpiled string code');
+    expect(ins._updateComponent.mock.calls[0][1]).toBe(babelOptions);
+  });
+  test('_checkBabelOptions method should set react preset and inline sourceMaps and throw an error with invalid parameter', () => {
+    expect.assertions(6);
     const ins = new Ctx(React, Babel);
     try {
       ins._checkBabelOptions([]);
@@ -122,18 +125,114 @@ describe('methods : ', () => {
     let babelOp = {};
     ins._checkBabelOptions(babelOp);
     expect(babelOp.presets.indexOf('react') >= 0).toBe(true);
+    expect(babelOp.sourceMaps).toBe('inline');
     babelOp = {presets: []};
     ins._checkBabelOptions(babelOp);
     expect(babelOp.presets.indexOf('react') >= 0).toBe(true);
+    expect(babelOp.sourceMaps).toBe('inline');
   });
-  test('_transpile method should return "null" when _temp is an empty string', () => {
+  test('_transpile method should override _temp to "null" when _temp is an empty string', () => {
     const ins = new Ctx(React, Babel);
-    expect(ins._transpile({})).toBe('null');
+    ins._temp = '';
+    ins._transpile({sourceMaps: false});
+    expect(ins._temp).toBe('null');
   });
-  test('_transpile method should return the transpiled code', () => {
+  test('_transpile method should override _temp to the transpiled code', () => {
     const ins = new Ctx(React, Babel);
     ins._temp = `()=><div>2</div>`;
-    const code = ins._transpile({filename: 'counter.ts'});
-    expect(code).toBe('() => React.createElement("div", null, "2");\n//# sourceURL=counter.ts');
+    const code = ins._transpile({sourceMaps: false});
+    expect(
+      [
+        '() => React.createElement("div", null, "2");',
+        `() => /*#__PURE__*/React.createElement("div", null, "2");`,
+      ].indexOf(ins._temp) >= 0,
+    ).toBe(true);
+  });
+  test('_import method', async () => {
+    expect.assertions(1);
+    const ins = new Ctx(React, Babel);
+    await ins._import('./mock-module.js').then((res) => {
+      expect(res.default || res).toBe('mock-module');
+    });
+  });
+  test('_updateComponent method', async () => {
+    const ins = new Ctx(React, Babel);
+    const blob = new Blob();
+    const com = () => 3;
+    ins._getBlob = jest.fn(() => blob);
+    ins._getModule = jest.fn(() => Promise.resolve(com));
+    ins._rerender = jest.fn(() => {});
+    const str = '()=>{}';
+    await ins._updateComponent(str);
+    expect(ins._getBlob.mock.calls.length).toBe(1);
+    expect(ins._getBlob.mock.calls[0][0]).toBe(str);
+    expect(ins._com()).toBe(com());
+    expect(ins._rerender.mock.calls.length).toBe(1);
+    expect(ins._rerender.mock.calls[0][0]).toEqual({});
+  });
+});
+describe('_getModule method', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = jest.fn(() => 'mocked-url');
+    global.URL.revokeObjectURL = jest.fn(() => {});
+  });
+
+  it('should successfully load a module and return the expected component', async () => {
+    const instance = new Ctx(React, Babel);
+    const mockReactComponent = jest.fn((React) => {});
+    instance._import = jest.fn(() => {
+      return Promise.resolve({default: mockReactComponent});
+    });
+    const mockBlob = new Blob();
+    const result = await instance._getModule(mockBlob);
+    expect(instance._import).toHaveBeenCalled();
+    expect(result).toBe(mockReactComponent(instance._getReact()));
+  });
+
+  it('should handle errors during module loading', async () => {
+    expect.assertions(4);
+    const instance = new Ctx(React, Babel);
+    const mockReactComponent = jest.fn((React) => {});
+    const mockError = new Error('Module loading failed');
+    instance._import = jest.fn(() => {
+      return Promise.reject(mockError);
+    });
+    const mockBlob = new Blob(); // Create a mock Blob
+    expect(global.URL.revokeObjectURL.mock.calls.length).toBe(0);
+    // Ensure that the error is logged to the console
+    const consoleErrorSpy = jest.spyOn(console, 'error');
+    await instance._getModule(mockBlob).catch((er) => {
+      expect(er.message).toBe('string-to-react-component loading module is failed:');
+      expect(global.URL.revokeObjectURL.mock.calls.length).toBe(1);
+      expect(consoleErrorSpy).toHaveBeenCalledWith('string-to-react-component loading module is failed:', mockError);
+      consoleErrorSpy.mockRestore(); // Restore original console.error
+    });
+  });
+});
+describe('_updateTemplate method : ', () => {
+  let ins;
+  beforeEach(() => {
+    ins = new Ctx(React, Babel);
+  });
+  test('_updateTemplate should call _validateTemplate method', () => {
+    ins._validateTemplate = jest.fn(() => {});
+    ins._updateTemplate('()=>{}', {});
+    expect(ins._validateTemplate.mock.calls.length).toBe(1);
+    expect(ins._validateTemplate.mock.calls[0][0]).toBe('()=>{}');
+  });
+  test('_updateTemplate method should call _prependCode, _transpile and _postpendCode methods', () => {
+    ins._prependCode = jest.fn(() => {
+      ins._transpile = jest.fn(() => {
+        ins._postpendCode = jest.fn(() => ins._temp);
+        return ins;
+      });
+      return ins;
+    });
+    ins._updateTemplate('()=>{}', {});
+    expect(ins._prependCode.mock.calls.length).toBe(1);
+    expect(ins._prependCode.mock.calls[0][0]).toBe('()=>{}');
+    expect(ins._transpile.mock.calls.length).toBe(1);
+    expect(ins._transpile.mock.calls[0][0]).toEqual({});
+    expect(ins._postpendCode.mock.calls.length).toBe(1);
   });
 });

src/ctx.test.js

@@ -51,9 +51,12 @@ class Ctx implements IStringToReactApi {
   _getBlob(temp: string): Blob {
     return new Blob([temp], {type: 'application/javascript'});
   }
+  _import(url: string): Promise<any> {
+    return import(/* webpackIgnore: true */ url);
+  }
   _getModule(blob: Blob): Promise<FC> {
     const moduleUrl = URL.createObjectURL(blob);
-    return import(/* webpackIgnore: true */ moduleUrl)
+    return this._import(moduleUrl)
       .then((module) => {
         URL.revokeObjectURL(moduleUrl);
         return Promise.resolve((module?.default || module)(this._getReact()));
@@ -90,22 +93,19 @@ class Ctx implements IStringToReactApi {
   }
   /** update transpiled code */
   _updateTemplate(template: string, babelOptions: TransformOptions): string {
-    if (template !== this._temp) {
-      this._validateTemplate(template);
-      return this._prependCode(template)._transpile(babelOptions)._postpendCode();
-    }
-    return this._temp;
+    this._validateTemplate(template);
+    return this._prependCode(template)._transpile(babelOptions)._postpendCode();
   }
   update(template: string, babelOptions: TransformOptions): void {
     this._update(template, babelOptions);
   }
   _update(template: string, babelOptions: TransformOptions): void {
-    this._updateComponent(this._updateTemplate(template, babelOptions), babelOptions);
+    this._updateComponent(this._updateTemplate(template, babelOptions));
   }
   _onChangeComponent(): void {
     this._rerender({});
   }
-  _updateComponent(template: string, babelOptions: TransformOptions): void {
+  _updateComponent(template: string): void {
     this._getModule(this._getBlob(template)).then((com: FC) => {
       this._validateCodeInsideTheTemp(com);
       this._com = com;

src/ctx.tsx

@@ -0,0 +1 @@
+export default 'mock-module';

src/mock-module.js

@@ -58,7 +58,7 @@ describe('calling update method : ', () => {
         return _ctx2;
       };
     const babelOp = {};
-    renderApp(str, babelOp, {getCtx, react, Babel}, true, str);
+    renderApp(str, babelOp, {getCtx, react, Babel}, true, str, babelOp);
     expect(_ctx.update.mock.calls.length).toBe(1);
     expect(_ctx.update.mock.calls[0][0]).toBe(str);
     expect(_ctx.update.mock.calls[0][1]).toEqual(babelOp);