Merge pull request #394 from puzzle-js/puzze-lib/defer-fix

fix dependent library problem
puzzle-js · Nov 24, 2022 · 374390f · 374390f
2 parents e88df29 + ce9ffca
commit 374390f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@puzzle-js/core",
-  "version": "3.52.0",
+  "version": "3.52.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "logo": "https://image.ibb.co/jM29on/puzzlelogo.png",

diff --git a/src/resource-injector.ts b/src/resource-injector.ts
@@ -75,7 +75,7 @@ export default class ResourceInjector {
           content: ''
         });
 
-        dom('head').prepend(library);
+        dom('body').append(library);
       }
     });
   }

diff --git a/src/template.ts b/src/template.ts
@@ -528,17 +528,6 @@ export class Template {
         output += ResourceInjector.wrapJsAsset(replaceItem);
       });
 
-      chunkedReplacement.replaceItems
-        .forEach(replaceItem => {
-          if (replaceItem.type === REPLACE_ITEM_TYPE.CHUNKED_CONTENT) {
-            output += `<div style="display: none;" puzzle-fragment="${chunkedReplacement.fragment.name}" puzzle-chunk-key="${replaceItem.key}">${fragmentContent.html[replaceItem.partial] || CONTENT_NOT_FOUND_ERROR}</div>`;
-            if (!(replaceItem.key === 'main' && selfReplacing)) {
-              // todo replace here
-              // output += `<script>PuzzleJs.emit('${EVENT.ON_FRAGMENT_RENDERED}','${chunkedReplacement.fragment.name}','[puzzle-chunk="${replaceItem.key}"]','[puzzle-chunk-key="${replaceItem.key}"]');</script>`;
-            }
-          }
-        });
-
       fragmentJsReplacements && fragmentJsReplacements.replaceItems.filter(item => item.location === RESOURCE_LOCATION.CONTENT_END).forEach(replaceItem => {
         output += ResourceInjector.wrapJsAsset(replaceItem);
       });

diff --git a/tests/integration/sf.spec.ts b/tests/integration/sf.spec.ts
@@ -184,7 +184,6 @@ describe('Storefront', () => {
                 .expect(200)
                 .end((err, res) => {
                     expect(res.text).to.include(`<body><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" puzzle-chunk="product_main"></div>`);
-                    expect(res.text).to.include(`</div><div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_main">Product Content</div>`);
                     nock.cleanAll();
                     hash_nock(true, 'enabled');
 
@@ -201,7 +200,6 @@ describe('Storefront', () => {
                                     nock.cleanAll();
 
                                     expect(res.text).to.include(`<body><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" puzzle-chunk="product_main" puzzle-placeholder="product_main_placeholder">Product Placeholder</div>`);
-                                    expect(res.text).to.include(`</div><div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_main">Product Content</div>`);
                                     sf.server.close( () => {
                                         done();
                                     });

diff --git a/tests/resource-injector.spec.ts b/tests/resource-injector.spec.ts
@@ -39,6 +39,7 @@ describe('Resource Injector', () => {
 
         // assert
         expect(dom("body").children().length).toBe(assets.length);
+
         assets.forEach( (asset) => {
             const script = dom("body").children(`script[puzzle-dependency=${asset.name}]`);
             if(script.length <= 1) {
@@ -375,8 +376,36 @@ describe('Resource Injector', () => {
         resourceInjector.injectDependencies(dom as any);
 
         // assert
-        const depScript = dom("head").children(`script[puzzle-dependency=${depName}]`);
+        const depScript = dom("body").children(`script[puzzle-dependency=${depName}]`);
+
         expect(depScript.attr().src).toBe(dep.link);
+        expect(depScript.attr()["puzzle-dependency"]).toBe(dep.name);
+    });
+
+
+    it("should inject dependencies if load method is not ON_RENDER_START", () => {
+
+        // arrange
+        const fragments = {
+            "f1": FragmentHelper.create()
+        };
+        const depName = faker.lorem.word();
+        const dep = fragments.f1.config.dependencies[0];
+        fragments.f1.config.assets[0].type = RESOURCE_TYPE.JS;
+        fragments.f1.config.assets[0].dependent = [depName];
+        dep.name = depName;
+        dep.type = RESOURCE_TYPE.JS;
+        dep.loadMethod = RESOURCE_LOADING_TYPE.ON_PAGE_RENDER;
+        sandbox.stub(ResourceFactory.instance, "get").callsFake( (): any => dep);
+
+        // act
+        const dom = cheerio.load("<html><head></head><body></body></html>");
+        const resourceInjector = new ResourceInjector(fragments, "", {});
+        resourceInjector.injectDependencies(dom as any);
+
+        // assert
+        const depScript = dom("body").children(`script[puzzle-dependency=${depName}]`);
+        expect(depScript.attr()).toBe(undefined);
 
     });
 

diff --git a/tests/system/system.spec.ts b/tests/system/system.spec.ts
@@ -97,7 +97,6 @@ describe('System Tests', () => {
               closeInstance(storefrontInstance, done);
               closeInstance(gatewayInstance, done);
               expect(res.text).to.include(`<body><div id="example" puzzle-fragment="example" puzzle-gateway="Browsing" puzzle-chunk="example_main"></div>`);
-              expect(res.text).to.include(`<div style="display: none;" puzzle-fragment="example" puzzle-chunk-key="example_main">Fragment Content</div>`);
             });
         });
     });

diff --git a/tests/template.spec.ts b/tests/template.spec.ts
@@ -1361,7 +1361,6 @@ describe('Template', () => {
               chunks.push(str);
               try {
                 expect(chunks[0]).to.include(`<div><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" puzzle-chunk="product_main"></div></div>`);
-                expect(chunks[1]).to.include(`<div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_main">Trendyol</div>`);
                 expect(chunks[2]).to.include(`</body></html>`);
               } catch (e) {
                 err = e;
@@ -1432,7 +1431,6 @@ describe('Template', () => {
               chunks.push(str);
               try {
                 expect(chunks[0]).to.include(`<div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" puzzle-chunk="product_main" puzzle-placeholder="product_main_placeholder">placeholder</div></div>`);
-                expect(chunks[1]).to.eq(`<div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_main">Trendyol</div>`);
                 expect(chunks[2]).to.include(`</body></html>`);
               } catch (e) {
                 err = e;
@@ -1605,7 +1603,6 @@ describe('Template', () => {
               chunks.push(str);
               try {
                 expect(chunks[0]).to.include(`<meta product="bag"/> </head><body><div id="header" puzzle-fragment="header" puzzle-gateway="Browsing">Header Content</div><div><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing">Trendyol Product Content</div></div><div id="footer" puzzle-fragment="footer" puzzle-gateway="Browsing" puzzle-chunk="footer_main"></div>`);
-                expect(chunks[1]).to.eq(`<div style="display: none;" puzzle-fragment="footer" puzzle-chunk-key="footer_main">Footer Content</div>`);
                 expect(chunks[2]).to.include(`</body></html>`);
               } catch (e) {
                 err = e;
@@ -1684,7 +1681,6 @@ describe('Template', () => {
               chunks.push(str);
               try {
                 expect(chunks[0]).to.include(`</head><body><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" fragment-partial="header" puzzle-chunk="product_header"></div><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" puzzle-chunk="product_main" puzzle-placeholder="product_main_placeholder">product content placeholder</div><div><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" fragment-partial="side" puzzle-chunk="product_side"></div></div><div id="product" puzzle-fragment="product" puzzle-gateway="Browsing" fragment-partial="footer" puzzle-chunk="product_footer"></div>`);
-                expect(chunks[1]).to.eq(`<div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_header">Header Content</div><div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_main">Trendyol Product Content</div><div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_side">Side Content</div><div style="display: none;" puzzle-fragment="product" puzzle-chunk-key="product_footer">Footer Content</div>`);
                 expect(str).to.eq(`<script>PuzzleJs.emit('${EVENT.ON_PAGE_LOAD}');</script></body></html>`);
               } catch (e) {
                 err = e;