Refactor: script injectors

.eslintrc.js

@@ -1,25 +1,30 @@
 module.exports = {
-  "extends": [
-    "react-app",
-    "prettier/@typescript-eslint",
-    "plugin:prettier/recommended"
+  extends: [
+    'react-app',
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
   ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
+  settings: {
+    react: {
+      version: 'detect',
+    },
   },
-  "rules": {
-    "@typescript-eslint/semi": ["error", "never"],
-    "@typescript-eslint/member-delimiter-style": ["error", {
-      "multiline": {
-          "delimiter": "none",
-          "requireLast": true
+  plugins: ['eslint-plugin-consent-manager'],
+  rules: {
+    'consent-manager/do-not-inject-scripts': ['error'],
+    '@typescript-eslint/semi': ['error', 'never'],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+          requireLast: true,
+        },
+        singleline: {
+          delimiter: 'comma',
+          requireLast: false,
+        },
       },
-      "singleline": {
-          "delimiter": "comma",
-          "requireLast": false
-      }
-  }]
-  }
+    ],
+  },
 }

cypress/integration/basic.spec.ts

@@ -1,6 +1,6 @@
 /// <reference types="cypress" />
 
-describe('Wrapping Component', () => {
+describe('Basics', () => {
   before(() => {
     cy.visit('http://localhost:1234/')
   })
@@ -13,57 +13,4 @@ describe('Wrapping Component', () => {
     container.should('contain', 'Video Inc.')
     container.should('contain', 'Red Box Ltd.')
   })
-
-  it('does not render wrapping component by default', () => {
-    cy.get('[data-testid="consent-manager-wrapping-component"]').should(
-      'not.exist'
-    )
-  })
-
-  it('renders wrapping component after making decision', () => {
-    cy.toggleIntegration('Red Box Ltd.')
-
-    cy.get('[data-testid="consent-manager-wrapping-component"]').should('exist')
-  })
-
-  it('removes wrapping component after revoking decision', () => {
-    cy.toggleIntegration('Red Box Ltd.')
-
-    cy.get('[data-testid="consent-manager-wrapping-component"]').should(
-      'not.exist'
-    )
-  })
-})
-
-describe('Privacy Shield', () => {
-  before(() => {
-    cy.visit('http://localhost:1234/video')
-  })
-  it('renders privacy shield', () => {
-    cy.get('[data-testid="consent-manager-privacy-shield"]').contains(
-      'Video Inc. is a popular service to share clips of cats.'
-    )
-  })
-
-  it('renders form component', () => {
-    const container = cy.get('[data-testid="consent-manager-form-container"]')
-    container.should('contain', 'Video Inc.')
-    container.should('contain', 'Red Box Ltd.')
-  })
-
-  it('renders video component after making decision', () => {
-    cy.toggleIntegration('Video Inc.')
-
-    cy.get('[data-testid="consent-manager-video-component"]').contains(
-      'Video component with id rick-roll'
-    )
-  })
-
-  it('renders privacy shield after revoking decision', () => {
-    cy.toggleIntegration('Video Inc.')
-
-    cy.get('[data-testid="consent-manager-privacy-shield"]').contains(
-      'Video Inc. is a popular service to share clips of cats.'
-    )
-  })
 })

cypress/integration/privacy-shield.spec.ts

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+
+describe('Privacy Shield', () => {
+  before(() => {
+    cy.visit('http://localhost:1234/video')
+  })
+  it('renders privacy shield', () => {
+    cy.get('[data-testid="consent-manager-privacy-shield"]').contains(
+      'Video Inc. is a popular service to share clips of cats.'
+    )
+  })
+
+  it('renders form component', () => {
+    const container = cy.get('[data-testid="consent-manager-form-container"]')
+    container.should('contain', 'Video Inc.')
+    container.should('contain', 'Red Box Ltd.')
+  })
+
+  it('renders video component after making decision', () => {
+    cy.toggleIntegration('Video Inc.')
+
+    cy.get('[data-testid="consent-manager-video-component"]').contains(
+      'Video component with id rick-roll'
+    )
+  })
+
+  it('renders privacy shield after revoking decision', () => {
+    cy.toggleIntegration('Video Inc.')
+
+    cy.get('[data-testid="consent-manager-privacy-shield"]').contains(
+      'Video Inc. is a popular service to share clips of cats.'
+    )
+  })
+})

cypress/integration/script-injectors.spec.ts

@@ -0,0 +1,91 @@
+/// <reference types="cypress" />
+
+describe('Script Injector: script', () => {
+  const selector = 'script#red-box-ltd'
+
+  before(() => {
+    cy.visit('http://localhost:1234/')
+  })
+  it('does not inject script by default', () => {
+    cy.get(selector).should('not.exist')
+  })
+
+  it('injects script after making decision', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get(selector).should('have.attr', 'async')
+    cy.get(selector).should('have.attr', 'defer')
+    cy.get(selector)
+      .should('have.attr', 'type')
+      .should('equals', 'text/javascript')
+
+    cy.window()
+      .its('rbltd.push')
+      .should('exist')
+  })
+
+  it('removes script when revoking decision', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get(selector).should('not.exist')
+  })
+})
+
+describe('Script Injector: img tag', () => {
+  const selector = 'img[src="/zero-pixel.png"]'
+
+  before(() => {
+    cy.visit('http://localhost:1234/')
+  })
+  it('does not inject img by default', () => {
+    cy.get(selector).should('not.exist')
+  })
+
+  it('injects img after making decision', () => {
+    cy.toggleIntegration('Innocent Pixel')
+
+    cy.get(selector).should('have.attr', 'height')
+    cy.get(selector).should('have.attr', 'width')
+  })
+
+  it('removes img when revoking decision', () => {
+    cy.toggleIntegration('Innocent Pixel')
+
+    cy.get(selector).should('not.exist')
+  })
+})
+
+describe('Script Injector: image and script tags', () => {
+  const selectorImg = 'img[src="/zero-pixel.png"]'
+  const selectorScript = 'script#red-box-ltd'
+
+  before(() => {
+    cy.visit('http://localhost:1234/')
+  })
+  it('does not inject by default', () => {
+    cy.get(selectorImg).should('not.exist')
+    cy.get(selectorScript).should('not.exist')
+  })
+
+  it('injects img and script after making decision', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+    cy.toggleIntegration('Innocent Pixel')
+
+    cy.get(selectorScript).should('exist')
+    cy.get(selectorImg).should('exist')
+  })
+
+  it('removes script when revoking decision', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get(selectorScript).should('not.exist')
+    cy.get(selectorImg).should('exist')
+  })
+
+  it('removes img when revoking decision', () => {
+    cy.toggleIntegration('Innocent Pixel')
+
+    cy.get(selectorImg).should('not.exist')
+    cy.get(selectorScript).should('not.exist')
+  })
+})

cypress/integration/tracking-events.spec.ts

@@ -0,0 +1,80 @@
+describe('Pave View Tracking', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:1234/', {
+      onBeforeLoad(win) {
+        cy.spy(win.console, 'log').as('console.log')
+      },
+    })
+  })
+
+  it('does not initialize tracking by default', () => {
+    cy.get('@console.log')
+      .should('not.be.calledWith', 'Initializing Red Box Ltd. tracking')
+      .should('not.be.calledWith', 'page view: /')
+      .should('not.be.called')
+    cy.window()
+      .its('rbltd')
+      .should('not.exist')
+    cy.get('[data-testid="consent-manager-wrapping-component"]').should(
+      'not.exist'
+    )
+  })
+
+  it('initializes tracking on user consent and logs initial page view', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.window()
+      .its('rbltd.push')
+      .should('exist')
+
+    cy.get('@console.log')
+      .should('be.calledWith', 'page view: /')
+      .should('not.be.calledWith', 'page view: /video')
+      .should('be.calledOnce')
+  })
+
+  it('tracks page views when route changes to video and back', () => {
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get('@console.log')
+      .should('be.calledWith', 'page view: /')
+      .should('be.calledOnce')
+
+    cy.get('[data-testid=example-nav-video]').click()
+
+    cy.get('@console.log')
+      .should('be.calledWith', 'page view: /video')
+      .should('be.calledTwice')
+
+    cy.get('[data-testid=example-nav-home]').click()
+
+    cy.get('@console.log').then(logSpy => {
+      expect(logSpy.args[0][0]).to.equal(logSpy.args[2][0])
+    })
+    cy.get('@console.log').should('be.calledThrice')
+  })
+
+  it('disables tracking when user revokes consent', () => {
+    cy.get('[data-testid="consent-manager-wrapping-component"]').should(
+      'not.exist'
+    )
+
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get('@console.log').should('be.calledOnce')
+
+    cy.get('[data-testid=example-nav-video]').click()
+
+    cy.get('@console.log')
+      .should('be.calledWith', 'page view: /video')
+      .should('be.calledTwice')
+
+    cy.toggleIntegration('Red Box Ltd.')
+
+    cy.get('@console.log').should('be.calledTwice')
+
+    cy.get('[data-testid=example-nav-home]').click()
+
+    cy.get('@console.log').should('be.calledTwice')
+  })
+})