feat(DIST-700): Add transitiveSearchParams (#179)

Antonio · web-flow · commit b3d669439259 · 2021-02-25T14:22:45.000+01:00
feat(DIST-700): Comments review test(DIST-700): Fix functional tests
diff --git a/packages/demo-html/public/widget-html.html b/packages/demo-html/public/widget-html.html
@@ -12,7 +12,13 @@
     </style>
   </head>
   <body>
-    <div id="wrapper" data-tf-widget="moe6aa" data-tf-medium="unit-test"></div>
+    <div
+      id="wrapper"
+      data-tf-widget="moe6aa"
+      data-tf-medium="unit-test"
+      data-tf-transitive-search-params="foo,bar"
+      data-tf-source="localhost"
+    ></div>
     <script src="./lib/embed-next.js"></script>
   </body>
 </html>
diff --git a/packages/demo-html/public/widget-js.html b/packages/demo-html/public/widget-js.html
@@ -16,7 +16,12 @@
     <div id="wrapper"></div>
     <script src="./lib/embed-next.js"></script>
     <script>
-      window.tf.createWidget("moe6aa", { container: document.getElementById("wrapper"), medium: "unit-test" });
+      window.tf.createWidget("moe6aa", {
+        container: document.getElementById("wrapper"),
+        source: "localhost",
+        transitiveSearchParams: ["foo", "bar"],
+        medium: "unit-test",
+      });
     </script>
   </body>
 </html>
diff --git a/packages/embed/.prettierrc b/packages/embed/.prettierrc
@@ -2,5 +2,6 @@
   "trailingComma": "es5",
   "tabWidth": 2,
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "printWidth": 120
 }
diff --git a/packages/embed/e2e/spec/functional/widget.spec.ts b/packages/embed/e2e/spec/functional/widget.spec.ts
@@ -1,16 +1,42 @@
 describe('Widget', () => {
-  before(() => {
-    cy.visit('/widget-js.html')
-  })
+  testWidget('js')
+  testWidget('html')
+})
 
-  it('should display widget', () => {
-    cy.get('.typeform-widget iframe').should('be.visible')
-    cy.get('.typeform-widget iframe').invoke('attr', 'src').should('contain', 'form.typeform.com/to/')
-  })
+function testWidget(type = 'html') {
+  describe(`Widget ${type}`, () => {
+    before(() => {
+      cy.visit(`/widget-${type}.html`)
+    })
+
+    it('should display widget', () => {
+      cy.get('.typeform-widget iframe').should('be.visible')
+      cy.get('.typeform-widget iframe').invoke('attr', 'src').should('contain', 'form.typeform.com/to/')
+    })
+
+    it('should pass options as query param', () => {
+      cy.get('.typeform-widget iframe')
+        .invoke('attr', 'src')
+        .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost&typeform-medium=unit-test')
+    })
 
-  it('should pass options as query param', () => {
-    cy.get('.typeform-widget iframe')
-      .invoke('attr', 'src')
-      .should('contain', 'typeform-embed=embed-widget&typeform-source=localhost&typeform-medium=unit-test')
+    describe(`Widget ${type} With Parameters`, () => {
+      before(() => {
+        cy.visit(`/widget-${type}.html?foo=foo&bar=bar&baz=baz`)
+      })
+
+      it('should display widget', () => {
+        cy.get('.typeform-widget iframe').should('be.visible')
+        cy.get('.typeform-widget iframe').invoke('attr', 'src').should('contain', 'form.typeform.com/to/')
+      })
+
+      it('should pass params from options to the iframe', () => {
+        cy.get('.typeform-widget iframe').invoke('attr', 'src').should('contain', 'foo=foo&bar=bar')
+      })
+
+      it('should not pass params not in the list to the iframe', () => {
+        cy.get('.typeform-widget iframe').invoke('attr', 'src').should('not.contain', 'baz=baz')
+      })
+    })
   })
-})
+}
diff --git a/packages/embed/src/base/url-options.ts b/packages/embed/src/base/url-options.ts
@@ -22,7 +22,7 @@ export type UrlOptions = {
    *
    * @type {string[]}
    */
-  transferableUrlParameters?: string[]
+  transitiveSearchParams?: string[]
   /**
    * Hide typeform footer, that appears showing the progress bar and the navigation buttons.
    *
diff --git a/packages/embed/src/initializers/build-options-from-attributes.spec.ts b/packages/embed/src/initializers/build-options-from-attributes.spec.ts
@@ -37,6 +37,7 @@ describe('build-options-from-attributes', () => {
         onReady: 'function',
         onSubmit: 'function',
         onQuestionChanged: 'function',
+        transitiveSearchParams: 'array',
       })
       expect(options).toEqual({
         source: 'unit-test-source',
diff --git a/packages/embed/src/initializers/build-options-from-attributes.ts b/packages/embed/src/initializers/build-options-from-attributes.ts
@@ -15,6 +15,7 @@ export const buildOptionsFromAttributes = (
     onReady: 'function',
     onSubmit: 'function',
     onQuestionChanged: 'function',
+    transitiveSearchParams: 'array',
     ...additionalAttributes,
   })
 }
diff --git a/packages/embed/src/utils/build-iframe-src.ts b/packages/embed/src/utils/build-iframe-src.ts
@@ -2,6 +2,7 @@ import { EmbedType, UrlOptions } from '../base'
 
 import { removeUndefinedKeys } from './remove-undefined-keys'
 import { isDefined } from './is-defined'
+import { getTransitiveSearchParams } from './get-transitive-search-params'
 
 const defaultUrlOptions: UrlOptions = {
   source: window?.location?.hostname.replace(/^www\./, ''),
@@ -20,30 +21,33 @@ const typesToEmbed: Record<EmbedType, string> = {
   'side-tab': 'popup-side-panel',
 }
 
-const mapOptionsToQueryParams = (type: EmbedType, embedId: string, options: UrlOptions): Record<string, any> => ({
-  'typeform-embed-id': embedId,
-  'typeform-embed': typesToEmbed[type],
-  'typeform-source': options.source,
-  'typeform-medium': options.medium,
-  'typeform-medium-version': options.mediumVersion,
-  'embed-hide-footer': options.hideFooter ? 'true' : undefined,
-  'embed-hide-headers': options.hideHeaders ? 'true' : undefined,
-  'embed-opacity': options.opacity,
-  'disable-tracking': options.disableTracking ? 'true' : undefined,
-})
+const mapOptionsToQueryParams = (type: EmbedType, embedId: string, options: UrlOptions): Record<string, any> => {
+  const transitiveParams = getTransitiveSearchParams(options.transitiveSearchParams)
+  const params = {
+    'typeform-embed-id': embedId,
+    'typeform-embed': typesToEmbed[type],
+    'typeform-source': options.source,
+    'typeform-medium': options.medium,
+    'typeform-medium-version': options.mediumVersion,
+    'embed-hide-footer': options.hideFooter ? 'true' : undefined,
+    'embed-hide-headers': options.hideHeaders ? 'true' : undefined,
+    'embed-opacity': options.opacity,
+    'disable-tracking': options.disableTracking ? 'true' : undefined,
+  }
+  return { ...params, ...transitiveParams }
+}
 
 export const buildIframeSrc = (params: BuildIframeSrcOptions): string => {
   const { formId, type, embedId, options } = params
-
   const queryParams = mapOptionsToQueryParams(type, embedId, addDefaultUrlOptions(options))
 
   const url = new URL(`https://form.typeform.com/to/${formId}`)
+
   Object.entries(queryParams)
     .filter(([, paramValue]) => isDefined(paramValue))
     .forEach(([paramName, paramValue]) => {
       url.searchParams.set(paramName, paramValue)
     })
-
   return url.href
 }
 
diff --git a/packages/embed/src/utils/get-transitive-search-params.spec.ts b/packages/embed/src/utils/get-transitive-search-params.spec.ts
@@ -0,0 +1,29 @@
+import { getTransitiveSearchParams } from './get-transitive-search-params'
+
+describe('transferUrlParametersToQueryStrings', () => {
+  const location: Location = window.location
+
+  beforeAll(() => {
+    delete (window as any).location
+    const search =
+      '?foo=jason&bar=rachel&utm_medium=cpc&utm_campaign=camp2008&utm_source=instagram&embed-hide-footer=false'
+
+    window.location = {
+      search,
+      href: `http://localhost/${search}`,
+    } as any
+  })
+
+  afterAll(() => {
+    window.location = location
+  })
+
+  it('transfer the parameters of the URL in the query strings', () => {
+    const urlParameters = ['foo', 'bar']
+    const queryStringWithTransferedUrlParameters = getTransitiveSearchParams(urlParameters)
+    expect(queryStringWithTransferedUrlParameters).toEqual({
+      foo: 'jason',
+      bar: 'rachel',
+    })
+  })
+})
diff --git a/packages/embed/src/utils/get-transitive-search-params.ts b/packages/embed/src/utils/get-transitive-search-params.ts
@@ -0,0 +1,14 @@
+export const getTransitiveSearchParams = (transitiveSearchParams?: string[]) => {
+  const url = new URL(window.location.href)
+  const queryParamsWithTransitiveParams = {}
+
+  if (transitiveSearchParams && transitiveSearchParams.length > 0) {
+    transitiveSearchParams.forEach((key: string) => {
+      if (url.searchParams.has(key)) {
+        queryParamsWithTransitiveParams[key] = url.searchParams.get(key)
+      }
+    })
+  }
+
+  return queryParamsWithTransitiveParams
+}
diff --git a/packages/embed/src/utils/load-options-from-attributes.spec.ts b/packages/embed/src/utils/load-options-from-attributes.spec.ts
@@ -34,7 +34,7 @@ describe('load-options-from-attributes', () => {
       })
     })
 
-    describe('to booolean', () => {
+    describe('to boolean', () => {
       it('should transform "yes" to true', () => {
         expect(transformAttributeValue('yes', 'boolean')).toBe(true)
       })
@@ -82,6 +82,24 @@ describe('load-options-from-attributes', () => {
     })
   })
 
+  describe('to array', () => {
+    it('should transform string as array', () => {
+      expect(transformAttributeValue('a, b', 'array')).toEqual(['a', 'b'])
+    })
+
+    it('should remove empty spaces around text', () => {
+      expect(transformAttributeValue('foo , bar , test', 'array')).toEqual(['foo', 'bar', 'test'])
+    })
+
+    it('should transform malformed string in empty array', () => {
+      expect(transformAttributeValue(',', 'array')).toEqual([])
+    })
+
+    it('should return undefined if no value', () => {
+      expect(transformAttributeValue('', 'array')).toEqual(undefined)
+    })
+  })
+
   describe('#loadOptionsFromAttributes', () => {
     const wrapper = document.createElement('div')
     wrapper.innerHTML = `<div id="element"
diff --git a/packages/embed/src/utils/load-options-from-attributes.ts b/packages/embed/src/utils/load-options-from-attributes.ts
@@ -10,7 +10,7 @@ export const camelCaseToKebabCase = (value: string) => {
     .join('')
 }
 
-export type Transformation = 'string' | 'boolean' | 'integer' | 'function'
+export type Transformation = 'string' | 'boolean' | 'integer' | 'function' | 'array'
 
 const transformString = (value: string | null): string | undefined => {
   return value || undefined
@@ -30,6 +30,14 @@ const transformFunction = (value: string | null): Function | undefined => {
   return typeof fn === 'function' ? fn : undefined
 }
 
+const transformArray = (value: string | null): string[] | undefined => {
+  const val = value
+    ?.replace(/\s/g, '')
+    .split(',')
+    .filter((v) => !!v)
+  return value ? val : undefined
+}
+
 export const transformAttributeValue = (value: string | null, transformation: Transformation) => {
   switch (transformation) {
     case 'string':
@@ -40,6 +48,8 @@ export const transformAttributeValue = (value: string | null, transformation: Tr
       return transformInteger(value)
     case 'function':
       return transformFunction(value)
+    case 'array':
+      return transformArray(value)
     default:
       throw new Error(`Invalid attribute transformation ${transformation}`)
   }

Original file line number	Diff line number	Diff line change
`@@ -2,5 +2,6 @@`
`2`	`2`	`"trailingComma": "es5",`
`3`	`3`	`"tabWidth": 2,`
`4`	`4`	`"semi": false,`
`5`		`- "singleQuote": true`
	`5`	`+ "singleQuote": true,`
	`6`	`+ "printWidth": 120`
`6`	`7`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ export type UrlOptions = {`
`22`	`22`	`*`
`23`	`23`	`* @type {string[]}`
`24`	`24`	`*/`
`25`		`- transferableUrlParameters?: string[]`
	`25`	`+ transitiveSearchParams?: string[]`
`26`	`26`	`/**`
`27`	`27`	`* Hide typeform footer, that appears showing the progress bar and the navigation buttons.`
`28`	`28`	`*`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@ export const buildOptionsFromAttributes = (`
`15`	`15`	`onReady: 'function',`
`16`	`16`	`onSubmit: 'function',`
`17`	`17`	`onQuestionChanged: 'function',`
	`18`	`+ transitiveSearchParams: 'array',`
`18`	`19`	`...additionalAttributes,`
`19`	`20`	`})`
`20`	`21`	`}`