Merge branch 'master' into ssoonmi/surveys-open-ended-choices

.eslintrc.js

@@ -88,6 +88,7 @@ module.exports = {
             files: 'cypress/**/*',
             globals: {
                 cy: true,
+                Cypress: true,
             },
         },
     ],

.github/workflows/library-ci.yml

@@ -39,7 +39,7 @@ jobs:
             - run: yarn install && yarn build
 
             - name: Cypress run
-              uses: cypress-io/github-action@v4
+              uses: cypress-io/github-action@v6
 
     functional:
         name: Functional tests

CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.92.1 - 2023-11-21
+
+- feat: payload capture - move timing into copied plugin (#902)
+
+## 1.92.0 - 2023-11-20
+
+- feat: Create elements chain string as we store it (#823)
+- Move blocked UAs to own file (#905)
+- chore: deflake a test (#904)
+- chore: convert more tests to TS (#903)
+- latest cypress action version (#900)
+
 ## 1.91.1 - 2023-11-15
 
 - fix(surveys): button text field fix (#899)

cypress/e2e/capture.cy.js

@@ -12,21 +12,17 @@ describe('Event capture', () => {
 
     // :TRICKY: Use a custom start command over beforeEach to deal with given2 not being ready yet.
     const start = ({ waitForDecide = true } = {}) => {
-        cy.route({
-            method: 'POST',
-            url: '**/decide/*',
-            response: {
-                config: {
-                    enable_collect_everything: true,
-                },
-                editorParams: {},
-                featureFlags: ['session-recording-player'],
-                isAuthenticated: false,
-                sessionRecording: given.sessionRecording,
-                supportedCompression: given.supportedCompression,
-                excludedDomains: [],
-                autocaptureExceptions: false,
+        cy.intercept('POST', '**/decide/*', {
+            config: {
+                enable_collect_everything: true,
             },
+            editorParams: {},
+            featureFlags: ['session-recording-player'],
+            isAuthenticated: false,
+            sessionRecording: given.sessionRecording,
+            supportedCompression: given.supportedCompression,
+            excludedDomains: [],
+            autocaptureExceptions: false,
         }).as('decide')
 
         cy.visit('./playground/cypress-full')
@@ -220,8 +216,9 @@ describe('Event capture', () => {
     it('makes a single decide request', () => {
         start()
 
-        cy.wait(200)
-        cy.shouldBeCalled('decide', 1)
+        cy.get('@decide.all').then((calls) => {
+            expect(calls.length).to.equal(1)
+        })
 
         cy.phCaptures().should('include', '$pageview')
         cy.get('@decide').should(({ request }) => {
@@ -238,7 +235,8 @@ describe('Event capture', () => {
 
         it('captures $snapshot events', () => {
             start()
-
+            // de-flake the test
+            cy.wait(100)
             cy.phCaptures().should('include', '$snapshot')
         })
 
@@ -322,31 +320,32 @@ describe('Event capture', () => {
             it('contains the correct payload after an event', () => {
                 start()
                 // Pageview will be sent immediately
-                cy.wait('@capture').should(({ request, url }) => {
-                    expect(request.headers).to.eql({
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                    })
+                cy.wait('@capture').should(({ request }) => {
+                    expect(request.headers['content-type']).to.eql('application/x-www-form-urlencoded')
 
-                    expect(url).to.match(urlWithVersion)
+                    expect(request.url).to.match(urlWithVersion)
                     const data = decodeURIComponent(request.body.match(/data=(.*)/)[1])
                     const captures = JSON.parse(Buffer.from(data, 'base64'))
 
                     expect(captures['event']).to.equal('$pageview')
                 })
 
+                // the code below is going to trigger an event capture
+                // we want to assert on the request
+                cy.intercept('POST', '**/e/*', async (request) => {
+                    expect(request.headers['content-type']).to.eq('text/plain')
+
+                    const captures = await getGzipEncodedPayload(request)
+                    expect(captures.map(({ event }) => event)).to.deep.equal(['$autocapture', 'custom-event'])
+                }).as('capture-assertion')
+
                 cy.get('[data-cy-custom-event-button]').click()
                 cy.phCaptures().should('have.length', 3)
                 cy.phCaptures().should('include', '$pageview')
                 cy.phCaptures().should('include', '$autocapture')
                 cy.phCaptures().should('include', 'custom-event')
 
-                cy.wait('@capture').its('requestBody.type').should('deep.equal', 'text/plain')
-
-                cy.get('@capture').should(async ({ requestBody }) => {
-                    const captures = await getGzipEncodedPayload(requestBody)
-
-                    expect(captures.map(({ event }) => event)).to.deep.equal(['$autocapture', 'custom-event'])
-                })
+                cy.wait('@capture-assertion')
             })
         })
     })
@@ -374,11 +373,12 @@ describe('Event capture', () => {
             cy.get('[data-cy-input]')
                 .type('hello posthog!')
                 .then(() => {
-                    const requests = cy
-                        .state('requests')
-                        .filter(({ alias }) => alias === 'session-recording' || alias === 'recorder')
-                    expect(requests.length).to.be.equal(0)
+                    cy.get('@session-recording.all').then((calls) => {
+                        expect(calls.length).to.equal(0)
+                    })
                 })
+
+            cy.phCaptures().should('not.include', '$snapshot')
         })
     })
 
@@ -394,8 +394,9 @@ describe('Event capture', () => {
         it('makes a single decide request on start', () => {
             start()
 
-            cy.wait(200)
-            cy.shouldBeCalled('decide', 1)
+            cy.get('@decide.all').then((calls) => {
+                expect(calls.length).to.equal(1)
+            })
 
             cy.get('@decide').should(({ request }) => {
                 const payload = getBase64EncodedPayload(request)
@@ -419,14 +420,19 @@ describe('Event capture', () => {
             start()
 
             cy.wait(200)
-            cy.shouldBeCalled('decide', 1)
+            cy.get('@decide.all').then((calls) => {
+                expect(calls.length).to.equal(1)
+            })
 
             cy.posthog().invoke('group', 'company', 'id:6')
             cy.posthog().invoke('group', 'playlist', 'id:77')
             cy.posthog().invoke('group', 'anothergroup', 'id:99')
 
             cy.wait('@decide')
-            cy.shouldBeCalled('decide', 2)
+
+            cy.get('@decide.all').then((calls) => {
+                expect(calls.length).to.equal(2)
+            })
         })
     })
 })

cypress/e2e/session-recording.cy.js

@@ -13,19 +13,15 @@ describe('Session recording', () => {
 
     describe('array.full.js', () => {
         beforeEach(() => {
-            cy.route({
-                method: 'POST',
-                url: '**/decide/*',
-                response: {
-                    config: { enable_collect_everything: false },
-                    editorParams: {},
-                    featureFlags: ['session-recording-player'],
-                    isAuthenticated: false,
-                    sessionRecording: {
-                        endpoint: '/ses/',
-                    },
-                    capture_performance: true,
+            cy.intercept('POST', '**/decide/*', {
+                config: { enable_collect_everything: false },
+                editorParams: {},
+                featureFlags: ['session-recording-player'],
+                isAuthenticated: false,
+                sessionRecording: {
+                    endpoint: '/ses/',
                 },
+                capture_performance: true,
             }).as('decide')
 
             cy.visit('./playground/cypress-full')
@@ -58,20 +54,16 @@ describe('Session recording', () => {
 
     describe('array.js', () => {
         beforeEach(() => {
-            cy.route({
-                method: 'POST',
-                url: '**/decide/*',
-                response: {
-                    config: { enable_collect_everything: false },
-                    editorParams: {},
-                    featureFlags: ['session-recording-player'],
-                    isAuthenticated: false,
-                    sessionRecording: {
-                        endpoint: '/ses/',
-                    },
-                    supportedCompression: ['gzip', 'lz64'],
-                    capture_performance: true,
+            cy.intercept('POST', '**/decide/*', {
+                config: { enable_collect_everything: false },
+                editorParams: {},
+                featureFlags: ['session-recording-player'],
+                isAuthenticated: false,
+                sessionRecording: {
+                    endpoint: '/ses/',
                 },
+                supportedCompression: ['gzip', 'lz64'],
+                capture_performance: true,
             }).as('decide')
 
             cy.visit('./playground/cypress')

cypress/support/commands.js

@@ -58,8 +58,3 @@ Cypress.Commands.add('resetPhCaptures', () => {
     $captures = []
     $fullCaptures = []
 })
-
-Cypress.Commands.add('shouldBeCalled', (alias, timesCalled) => {
-    const calls = cy.state('requests').filter((call) => call.alias === alias)
-    expect(calls).to.have.length(timesCalled, `${alias} should have been called ${timesCalled} times`)
-})

cypress/support/compression.js

@@ -5,8 +5,8 @@ export function getBase64EncodedPayload(request) {
     return JSON.parse(Buffer.from(data, 'base64'))
 }
 
-export async function getGzipEncodedPayload(requestBody) {
-    const data = new Uint8Array(await requestBody.arrayBuffer())
+export async function getGzipEncodedPayload(request) {
+    const data = new Uint8Array(await request.body)
     const decoded = fflate.strFromU8(fflate.decompressSync(data))
     return JSON.parse(decoded)
 }

cypress/support/e2e.js

@@ -30,11 +30,9 @@ Cypress.on('window:before:load', (win) => {
 })
 
 beforeEach(() => {
-    cy.server()
-
-    cy.route('POST', '**/decide/*').as('decide')
-    cy.route('POST', '**/e/*').as('capture')
-    cy.route('POST', '**/ses/*').as('session-recording')
+    cy.intercept('POST', '**/decide/*').as('decide')
+    cy.intercept('POST', '**/e/*').as('capture')
+    cy.intercept('POST', '**/ses/*').as('session-recording')
 
     cy.readFile('dist/array.full.js').then((body) => {
         cy.intercept('**/static/array.full.js', { body })

package.json

@@ -1,6 +1,6 @@
 {
     "name": "posthog-js",
-    "version": "1.91.1",
+    "version": "1.92.1",
     "description": "Posthog-js allows you to automatically capture usage and send events to PostHog.",
     "repository": "https://github.com/PostHog/posthog-js",
     "author": "[email protected]",
@@ -34,8 +34,6 @@
         "fflate": "^0.4.1"
     },
     "devDependencies": {
-        "eslint-config-posthog-js": "link:./eslint-rules",
-        "eslint-plugin-posthog-js": "link:./eslint-rules",
         "@babel/core": "7.18.9",
         "@babel/preset-env": "7.18.9",
         "@babel/preset-typescript": "^7.18.6",
@@ -50,16 +48,19 @@
         "@types/eslint": "^8.44.6",
         "@types/jest": "^29.5.1",
         "@types/react-dom": "^18.0.10",
+        "@types/sinon": "^17.0.1",
         "@types/uuid": "^9.0.1",
         "@typescript-eslint/eslint-plugin": "^6.4.0",
         "@typescript-eslint/parser": "^6.4.0",
         "babel-eslint": "10.1.0",
         "babel-jest": "^26.6.3",
-        "cypress": "10.3.1",
+        "cypress": "13.5.1",
         "eslint": "8.20.0",
+        "eslint-config-posthog-js": "link:./eslint-rules",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-compat": "^4.1.4",
         "eslint-plugin-jest": "^27.2.3",
+        "eslint-plugin-posthog-js": "link:./eslint-rules",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.30.1",
         "eslint-plugin-react-hooks": "^4.6.0",