feat(streamsql): add template funcs for identifier listeners

ecmarsh · ecmarsh · commit 93e37e79eb4f · 2020-02-27T12:38:23.000-08:00
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,26 +1,26 @@
 {
   "dist/streamsql.esm.js": {
-    "bundled": 7741,
-    "minified": 3828,
-    "gzipped": 1575,
+    "bundled": 8133,
+    "minified": 3944,
+    "gzipped": 1606,
     "treeshaked": {
       "rollup": {
         "code": 75,
         "import_statements": 0
       },
       "webpack": {
-        "code": 4442
+        "code": 4558
       }
     }
   },
   "dist/streamsql.cjs.js": {
-    "bundled": 9122,
-    "minified": 4326,
-    "gzipped": 1641
+    "bundled": 9592,
+    "minified": 4470,
+    "gzipped": 1679
   },
   "dist/streamsql.min.js": {
-    "bundled": 10015,
-    "minified": 4153,
-    "gzipped": 1615
+    "bundled": 10483,
+    "minified": 4297,
+    "gzipped": 1655
   }
 }
diff --git a/integration/fixtures/streamsql.min.js b/integration/fixtures/streamsql.min.js
diff --git a/integration/fixtures/template-fns.html b/integration/fixtures/template-fns.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="text/javascript" src="./streamsql.min.js"></script>
+  <title>Test Template Functions</title>
+</head>
+<body>
+  <h1>Alt Page</h1>
+  <input id="input-user-id" type="text" />
+  <button id="login-button">Login</button>
+  <button id="logout-button">Logout</button>
+  <div id="identify-response">
+  <!-- Plug/unplug user id here -->
+  </div>
+
+
+  <script type="application/javascript">
+    streamsql.init('0000-0000-0000-0000'); // create client with apiKey
+    // These should be called on (un)identify.
+    // Test by checking the text of user-id response
+    streamsql.onIdentify = function(userId) {
+      document.getElementById('identify-response').innerText = userId;
+    }
+    streamsql.onUnidentify = function() {
+      document.getElementById('identify-response').innerText = '';
+    }
+    document.getElementById('login-button').addEventListener('click', function () {
+      var userId = document.getElementById('input-user-id').value;
+      streamsql.identify(userId);
+    })
+    document.getElementById('logout-button').addEventListener('click', function () {
+      streamsql.unidentify() // clear the userid
+    })
+  </script>
+</body>
+</html>
diff --git a/integration/index.umd.test.js b/integration/index.umd.test.js
@@ -1,5 +1,6 @@
 const home = SERVER_URL + '/index.html'
 const alt = SERVER_URL + '/alt.html'
+const templatePage = SERVER_URL + '/template-fns.html'
 
 describe('integration', () => {
   let page
@@ -155,4 +156,19 @@ describe('integration', () => {
     postData = postData && JSON.parse(postData)
     expect(postData.user).toMatchObject({ id: userId })
   }, 8000)
+
+  it('calls template functions onIdentify and onUnidentify', async () => {
+    const userId = 'user-id'
+    const responseDivSelector = 'div#identify-response'
+    // simulate a login that should store id to send w request
+    await page.goto(templatePage)
+    await page.type('#input-user-id', userId)
+    await page.click('button#login-button')
+    const identifyResponse = await page.$(responseDivSelector)
+    expect(await identifyResponse.evaluate(node => node.innerText)).toBe(userId);
+
+    await page.click('button#logout-button')
+    const unidentifyResponse = await page.$(responseDivSelector)
+    expect(await unidentifyResponse.evaluate(node => node.innerText)).toBe('');
+  })
 })
diff --git a/src/StreamSQL.ts b/src/StreamSQL.ts
@@ -36,12 +36,14 @@ export default class StreamSQLClient implements CoreAPI {
   public identify(userId: string): StreamSQLClient {
     if (!this.identifier) this.throwNoInitError()
     this.identifier.setUser(userId)
+    this.onIdentify(userId) // call template listener
     return this
   }
 
   public unidentify(): StreamSQLClient {
     if (!this.identifier) this.throwNoInitError()
     this.identifier.deleteUser()
+    this.onUnidentify() // call template listener
     return this
   }
 
@@ -76,4 +78,9 @@ export default class StreamSQLClient implements CoreAPI {
   private throwNoInitError(): never {
     throw streamsqlErr(`api key must be set first: streamsql.init(apiKey)`)
   }
+
+  // Template functions. Originally built to allow pixel to listen for events.
+  // @ts-ignore
+  public onIdentify(userId: string) {}
+  public onUnidentify() {}
 }
diff --git a/src/test/streamsql.test.ts b/src/test/streamsql.test.ts
@@ -132,4 +132,20 @@ describe('StreamSQL Core', () => {
     })
     expect(() => streamsql.sendEvent('mystream')).not.toThrow()
   })
+
+  it('calls template listeners for identify, unidentify', () => {
+    streamsql.init(apiKey)
+    const onIdentify = jest.fn((userId: string) => userId)
+    const onUnidentify = jest.fn()
+
+    streamsql.onIdentify = onIdentify
+    streamsql.onUnidentify = onUnidentify
+
+    streamsql.identify('user-id')
+    expect(onIdentify).toHaveBeenCalledTimes(1)
+    expect(onIdentify).toHaveBeenCalledWith('user-id')
+
+    streamsql.unidentify()
+    expect(onUnidentify).toHaveBeenCalledTimes(1)
+  })
 })

Original file line number	Diff line number	Diff line change
`@@ -36,12 +36,14 @@ export default class StreamSQLClient implements CoreAPI {`
`36`	`36`	`public identify(userId: string): StreamSQLClient {`
`37`	`37`	`if (!this.identifier) this.throwNoInitError()`
`38`	`38`	`this.identifier.setUser(userId)`
	`39`	`+ this.onIdentify(userId) // call template listener`
`39`	`40`	`return this`
`40`	`41`	`}`
`41`	`42`
`42`	`43`	`public unidentify(): StreamSQLClient {`
`43`	`44`	`if (!this.identifier) this.throwNoInitError()`
`44`	`45`	`this.identifier.deleteUser()`
	`46`	`+ this.onUnidentify() // call template listener`
`45`	`47`	`return this`
`46`	`48`	`}`
`47`	`49`
`@@ -76,4 +78,9 @@ export default class StreamSQLClient implements CoreAPI {`
`76`	`78`	`private throwNoInitError(): never {`
`77`	`79`	throw streamsqlErr(`api key must be set first: streamsql.init(apiKey)`)
`78`	`80`	`}`
	`81`	`+`
	`82`	`+ // Template functions. Originally built to allow pixel to listen for events.`
	`83`	`+ // @ts-ignore`
	`84`	`+ public onIdentify(userId: string) {}`
	`85`	`+ public onUnidentify() {}`
`79`	`86`	`}`