Merge pull request #1325 from sadiqkhoja/fixes/end-of-form-behavior

Fixes: ability to make multiple submission with public links

Author: sadiqkhoja

src/components/enketo-iframe.vue

@@ -70,6 +70,12 @@ const lastSubmitted = (enketoOnceId) => {
 
 const enketoSrc = ref();
 
+const single = computed(() => {
+  const { query } = route;
+  return (props.actionType === 'public-link' && query.single !== 'false') ||
+         (props.actionType === 'new' && query.single === 'true');
+});
+
 const setEnketoSrc = () => {
   let basePath = '/enketo-passthrough';
   // this is to avoid 404 warning
@@ -92,12 +98,14 @@ const setEnketoSrc = () => {
   if (props.actionType === 'offline') {
     return; // we don't render offline Enketo through central-frontend
   }
-  if (props.actionType === 'public-link') {
+  // for actionType 'new', we add '/single' only if 'single' query parameter is true
+  // for actionType 'public-link', we add '/single' only if 'single' query parameter is not false
+  if (single.value) {
     prefix += '/single';
   } else if (props.actionType === 'preview') {
     prefix += `/${props.actionType}`;
   }
-  // for actionType 'new', we don't need to add anything to the prefix.
+
   // we no longer render Enketo for Edit Submission from central-frontend.
 
   if (props.enketoId === form.enketoOnceId) {
@@ -133,7 +141,7 @@ const handleIframeMessage = (event) => {
     try { eventData = JSON.parse(event.data); } catch {}
 
     if (eventData?.enketoEvent === 'submissionsuccess') {
-      if (props.actionType === 'public-link' && redirectUrl.value) {
+      if (redirectUrl.value && single.value) {
         // for public link, we read return value from query parameter. The value could be 3rd party
         // site as well, typically a thank you page
         try {

test/components/enketo-iframe.spec.js

@@ -5,6 +5,7 @@ import { mockRouter } from '../util/router';
 import { wait } from '../util/util';
 import testData from '../data';
 import { load } from '../util/http';
+import { mockLogin } from '../util/session';
 
 const enketoId = 'sCTIfjC5LrUto4yVXRYJkNKzP7e53vo';
 
@@ -49,6 +50,28 @@ describe('EnketoIframe', () => {
     });
   });
 
+  it('renders iframe with /single prefix when single=true query parameter for new submission', async () => {
+    mockLogin();
+    testData.extendedForms.createPast(1, { xmlFormId: 'a' });
+    const app = await load('/projects/1/forms/a/submissions/new?single=true')
+      .complete();
+
+    const iframe = app.find('iframe');
+    iframe.attributes('src').should.contain('/enketo-passthrough/single/');
+  });
+
+  it('renders iframe without /single prefix when single=false for public-link', async () => {
+    testData.extendedForms.createPast(1, { xmlFormId: 'a' });
+
+    const app = await load(`/f/${enketoId}?single=false&st=token`)
+      .restoreSession(false) // it's public link so not need to restore sessioin
+      .complete();
+
+    const iframe = app.find('iframe');
+    iframe.attributes('src').should.contain(`/enketo-passthrough/${enketoId}`);
+    iframe.attributes('src').should.not.contain('/single/');
+  });
+
   it('redirects on submissionsuccess message with return_url - internal', async () => {
     const wrapper = mountComponent({
       props: { enketoId, actionType: 'public-link' },
@@ -86,6 +109,29 @@ describe('EnketoIframe', () => {
     fakeAssign.calledWith(new URL('http://example.com/projects/1')).should.be.true;
   });
 
+  it('redirect on submissionsuccess for new submission when single=true', async () => {
+    const fakeAssign = sinon.fake();
+    const wrapper = mountComponent({
+      props: { enketoId, actionType: 'new' },
+      container: {
+        router: mockRouter('/?return_url=http://example.com/projects/1&single=true'),
+        location: {
+          origin: window.location.origin,
+          assign: (url) => {
+            fakeAssign(url);
+          }
+        }
+      }
+    });
+    const iframe = wrapper.find('iframe');
+
+    const data = JSON.stringify({ enketoEvent: 'submissionsuccess' });
+    await postMessageToParent(iframe, data);
+
+    fakeAssign.called.should.be.true;
+    fakeAssign.args[0][0].href.should.equal('http://example.com/projects/1');
+  });
+
   it('does not redirect on invalid return URL', async () => {
     const fakeAssign = sinon.fake();
     const wrapper = mountComponent({
@@ -109,6 +155,51 @@ describe('EnketoIframe', () => {
     wrapper.vm.$router.push.called.should.be.false;
   });
 
+  it('does not redirect on submissionsuccess for public-link when single=false', async () => {
+    const fakeAssign = sinon.fake();
+    const wrapper = mountComponent({
+      props: { enketoId, actionType: 'public-link' },
+      container: {
+        router: mockRouter('/?return_url=http://example.com/projects/1&single=false'),
+        location: {
+          origin: window.location.origin,
+          assign: (url) => {
+            fakeAssign(url);
+          }
+        }
+      }
+    });
+    const iframe = wrapper.find('iframe');
+
+    const data = JSON.stringify({ enketoEvent: 'submissionsuccess' });
+    await postMessageToParent(iframe, data);
+
+    fakeAssign.called.should.be.false;
+  });
+
+  // 'single' query parameter is false implicitly
+  it('does not redirects on submissionsuccess for new submission', async () => {
+    const fakeAssign = sinon.fake();
+    const wrapper = mountComponent({
+      props: { enketoId, actionType: 'new' },
+      container: {
+        router: mockRouter('/?return_url=http://example.com/projects/1'),
+        location: {
+          origin: window.location.origin,
+          assign: (url) => {
+            fakeAssign(url);
+          }
+        }
+      }
+    });
+    const iframe = wrapper.find('iframe');
+
+    const data = JSON.stringify({ enketoEvent: 'submissionsuccess' });
+    await postMessageToParent(iframe, data);
+
+    fakeAssign.called.should.be.false;
+  });
+
   it('bubbles up the message event', async () => {
     const wrapper = mountComponent({
       props: { enketoId, actionType: 'new', instanceId: 'test-instance' },