Fixing bug in test: we now need to return the Content-Type header

weaverryan · weaverryan · commit 6a846b33ce23 · 2022-09-20T13:05:22.000-04:00
diff --git a/rollup.config.js b/rollup.config.js
@@ -38,7 +38,7 @@ const wildcardExternalsPlugin = (peerDependencies) => ({
     }
 });
 
-const files = glob.sync("src/**/assets/src/*controller.ts");
+const files = glob.sync("src/**/assets/src/live_controller.ts");
 const packages = files.map((file) => {
     const absolutePath = path.join(__dirname, file);
     const packageData = require(pkgUp.sync({ cwd: absolutePath }));
diff --git a/src/LiveComponent/assets/test/controller/error.test.ts b/src/LiveComponent/assets/test/controller/error.test.ts
@@ -28,8 +28,8 @@ describe('LiveController Error Handling', () => {
         // ONLY a post is sent, not a re-render GET
         test.expectsAjaxCall('post')
             .expectSentData(test.initialData)
-            .serverWillReturnAnError(500, `
-                <html><head><title>Error!</title></head><body><h1>An error ocurred</h1></body></html>
+            .serverWillReturnCustomResponse(500, `
+                <html><head><title>Error!</title></head><body><h1>An error occurred</h1></body></html>
             `)
             .expectActionCalled('save')
             .init();
@@ -45,4 +45,28 @@ describe('LiveController Error Handling', () => {
         }
         expect(errorContainer.querySelector('iframe')).not.toBeNull();
     });
+
+    it('displays a modal on any non-component response', async () => {
+        const test = await createTest({ }, (data: any) => `
+            <div ${initComponent(data)}>
+                Original component text
+                <button data-action="live#action" data-action-name="save">Save</button>
+            </div>
+        `);
+
+        // ONLY a post is sent, not a re-render GET
+        test.expectsAjaxCall('post')
+            .expectSentData(test.initialData)
+            .serverWillReturnCustomResponse(200, `
+                <html><head><title>Hi!</title></head><body><h1>I'm a whole page, not a component!</h1></body></html>
+            `)
+            .expectActionCalled('save')
+            .init();
+
+        getByText(test.element, 'Save').click();
+
+        await waitFor(() => expect(document.getElementById('live-component-error')).not.toBeNull());
+        // the component did not change or re-render
+        expect(test.element).toHaveTextContent('Original component text');
+    });
 });
diff --git a/src/LiveComponent/assets/test/tools.ts b/src/LiveComponent/assets/test/tools.ts
@@ -120,8 +120,8 @@ class MockedAjaxCall {
     options: any = {};
     fetchMock?: typeof fetchMock;
     routeName?: string;
-    errorStatusCode?: number;
-    errorHTML?: string;
+    customResponseStatusCode?: number;
+    customResponseHTML?: string;
 
     constructor(method: string, test: FunctionalTest) {
         this.method = method.toUpperCase();
@@ -183,13 +183,18 @@ class MockedAjaxCall {
         const template = this.template ? this.template : this.test.template;
 
         let response;
-        if (this.errorStatusCode) {
+        if (this.customResponseStatusCode) {
             response = {
-                body: this.errorHTML,
-                status: this.errorStatusCode
+                body: this.customResponseHTML,
+                status: this.customResponseStatusCode
             }
         } else {
-            response = template(finalServerData);
+            response = {
+                body: template(finalServerData),
+                headers: {
+                    'Content-Type': 'application/vnd.live-component+html'
+                }
+            }
         }
 
         this.fetchMock = fetchMock.mock(
@@ -213,10 +218,10 @@ class MockedAjaxCall {
         return this;
     }
 
-    serverWillReturnAnError(statusCode: number, responseHTML: string): MockedAjaxCall {
+    serverWillReturnCustomResponse(statusCode: number, responseHTML: string): MockedAjaxCall {
         this.checkInitialization('serverWillReturnAnError');
-        this.errorStatusCode = statusCode;
-        this.errorHTML = responseHTML;
+        this.customResponseStatusCode = statusCode;
+        this.customResponseHTML = responseHTML;
 
         return this;
     }

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ const wildcardExternalsPlugin = (peerDependencies) => ({`
`38`	`38`	`}`
`39`	`39`	`});`
`40`	`40`
`41`		`-const files = glob.sync("src/*/assets/src/controller.ts");`
	`41`	`+const files = glob.sync("src/**/assets/src/live_controller.ts");`
`42`	`42`	`const packages = files.map((file) => {`
`43`	`43`	`const absolutePath = path.join(__dirname, file);`
`44`	`44`	`const packageData = require(pkgUp.sync({ cwd: absolutePath }));`