Merge pull request #30 from yoriiis/fix/variation-switch-2

Fix variation change

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 1.3.3
+
+### Fixes
+
+- Fix variation changes with cookie domain and new `ABTastyForcedVariations` browser storage ([#30](https://github.com/yoriiis/abtasty-debugger/pull/30))
+
 ## 1.3.2
 
 ### Updates

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "abtasty-debugger",
-	"version": "1.3.2",
+	"version": "1.3.3",
 	"private": true,
 	"description": "Browser extension that simplifies the debugging of A/B tests from AB Tasty and adds useful informations",
 	"homepage": "https://github.com/yoriiis/abtasty-debugger",

src/popup/components/detail/__tests__/detail.test.js

@@ -245,11 +245,11 @@ describe('Detail', () => {
 				callback: expect.any(Function)
 			})
 			expect(sendMessage).toHaveBeenNthCalledWith(2, {
-				action: 'setStorage',
+				action: 'changeVariation',
 				data: {
-					name: 'ABTasty',
-					value: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`,
-					syncWithLocalStorage: true
+					testId,
+					variationId: parseInt(newVariationId),
+					cookieValue: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`
 				}
 			})
 			expect(namespace.tabs.reload).toHaveBeenCalled()
@@ -274,11 +274,11 @@ describe('Detail', () => {
 				callback: expect.any(Function)
 			})
 			expect(sendMessage).toHaveBeenNthCalledWith(2, {
-				action: 'setStorage',
+				action: 'changeVariation',
 				data: {
-					name: 'ABTasty',
-					value: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`,
-					syncWithLocalStorage: true
+					testId,
+					variationId: parseInt(newVariationId),
+					cookieValue: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`
 				}
 			})
 			expect(namespace.tabs.reload).toHaveBeenCalled()
@@ -303,11 +303,11 @@ describe('Detail', () => {
 				callback: expect.any(Function)
 			})
 			expect(sendMessage).toHaveBeenNthCalledWith(2, {
-				action: 'setStorage',
+				action: 'changeVariation',
 				data: {
-					name: 'ABTasty',
-					value: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`,
-					syncWithLocalStorage: true
+					testId,
+					variationId: parseInt(newVariationId),
+					cookieValue: `uid=zed18spa36wefrnq&fst=1632216663697&pst=-1&cst=1632216663697&ns=1&pvt=1&pvis=1&th=661111.200001.1.1.1.1.1632216664066.1632216664066.1.2_${testId}.${newVariationId}.1.1.1.1.1632216664068.1632216664068.1.2`
 				}
 			})
 			expect(namespace.tabs.reload).toHaveBeenCalled()

src/popup/components/detail/assets/scripts/detail.tsx

@@ -157,21 +157,16 @@ export default class Detail extends Component {
 								`${testId}.${currentVariationId[1]}`,
 								`${testId}.${newVariationId}`
 							)
-							response = response.replace(thValue, thValueUpdated)
 
 							sendMessage({
-								action: 'setStorage',
+								action: 'changeVariation',
 								data: {
-									name: 'ABTasty',
-									value: response,
-									syncWithLocalStorage: true
+									testId,
+									variationId: newVariationId,
+									cookieValue: response.replace(thValue, thValueUpdated)
 								}
 							})
 							namespace.tabs.reload()
-
-							// Update the data with the new variation ID
-							// Useful if the detail view is re-rendered after updating the variation
-							this.props.results[testId].variationID = newVariationId
 						}
 					}
 				}

src/popup/components/list/__tests__/list.test.js

@@ -248,7 +248,7 @@ describe('List', () => {
 
 			expect(target.setAttribute).toHaveBeenCalledWith('disabled', '')
 			expect(sendMessage).toHaveBeenCalledWith({
-				action: 'setStorage',
+				action: 'setCookie',
 				data: {
 					name: 'abTastyDebug',
 					value: true

src/popup/components/list/assets/scripts/list.tsx

@@ -132,7 +132,7 @@ export default class List extends Component {
 		target.setAttribute('disabled', '')
 
 		sendMessage({
-			action: target.checked ? 'setStorage' : 'removeCookie',
+			action: target.checked ? 'setCookie' : 'removeCookie',
 			data: {
 				name: 'abTastyDebug',
 				value: target.checked

src/shared/assets/content-scripts/content-script.js

@@ -17,22 +17,34 @@ function getCookie(name) {
 }
 
 /**
- * Set storage (cookie and localStorage)
+ * Set cookie
  * @param {Object} options
  * @param {String} options.name Storage name
  * @param {String} options.value Storage value
- * @param {Boolean} options.syncWithLocalStorage Sync localtorage
  */
-function setStorage({ name, value, syncWithLocalStorage = false }) {
-	const domain = window.location.host.split('.').slice(-2).join('.')
+function setCookie({ name, value }) {
+	const domain = window.location.host.split('.')
 	const isSecure = window.location.protocol === 'https:'
 
 	document.cookie = `${name}=${value}; path=/; domain=.${domain};${isSecure ? ' Secure;' : ''}`
+}
 
-	const valueInStorage = window.localStorage.getItem(name)
-	if (syncWithLocalStorage && valueInStorage) {
-		window.localStorage.setItem(name, value)
-	}
+/**
+ * Change test variation
+ * Update new browser storage to force the variation changes
+ * @param {Object} options
+ * @param {String} options.testId Test ID
+ * @param {String} options.variationId Variation ID
+ * @param {String} options.cookieValue Cookie value
+ */
+function changeVariation({ testId, variationId, cookieValue }) {
+	setCookie({ name: 'ABTasty', value: cookieValue })
+
+	// Update new browser storage to force variation changes
+	const storageKey = 'ABTastyForcedVariations'
+	const storage = JSON.parse(window.sessionStorage.getItem(storageKey)) || {}
+	storage[testId] = variationId
+	window.sessionStorage.setItem(storageKey, JSON.stringify(storage))
 }
 
 /**
@@ -42,7 +54,7 @@ function setStorage({ name, value, syncWithLocalStorage = false }) {
  * @param {String} options.value Cookie value
  */
 function removeCookie({ name }) {
-	const domain = window.location.host.split('.').slice(-2).join('.')
+	const domain = window.location.host.split('.')
 	document.cookie = `${name}=; expires=${new Date(0).toUTCString()}; path=/; domain=.${domain};`
 }
 
@@ -79,11 +91,10 @@ namespace.runtime.onMessage.addListener((message, sender, response) => {
 			document.dispatchEvent(new window.Event('abtastyDebugger::getData'))
 		} else if (message.action === 'getCookie') {
 			response(getCookie(message.data.name))
-		} else if (message.action === 'setStorage') {
-			setStorage({
+		} else if (message.action === 'setCookie') {
+			setCookie({
 				name: message.data.name,
-				value: message.data.value,
-				syncWithLocalStorage: message.data.syncWithLocalStorage
+				value: message.data.value
 			})
 			response('success')
 		} else if (message.action === 'removeCookie') {
@@ -94,6 +105,13 @@ namespace.runtime.onMessage.addListener((message, sender, response) => {
 		} else if (message.action === 'clearAbtastyCookies') {
 			document.dispatchEvent(new window.Event('abtastyDebugger::clearCookie'))
 			response('success')
+		} else if (message.action === 'changeVariation') {
+			changeVariation({
+				testId: message.data.testId,
+				variationId: message.data.variationId,
+				cookieValue: message.data.cookieValue
+			})
+			response('success')
 		}
 	}
 

src/shared/assets/content-scripts/page-script.js

@@ -80,6 +80,7 @@ document.addEventListener('abtastyDebugger::getData', () => {
 document.addEventListener('abtastyDebugger::clearCookie', () => {
 	window.ABTasty.clearAllCookies()
 	window.localStorage.removeItem(ABTASTY_NAME)
+	window.sessionStorage.removeItem('ABTastyForcedVariations')
 })
 
 /**

src/shared/assets/manifests/manifest-v2.json

@@ -1,6 +1,6 @@
 {
 	"name": "AB Tasty Debugger",
-	"version": "1.3.2",
+	"version": "1.3.3",
 	"description": "Debug A/B tests from AB Tasty. Open source.",
 	"background": {
 		"scripts": ["background.js"]

src/shared/assets/manifests/manifest-v3.json

@@ -1,6 +1,6 @@
 {
 	"name": "AB Tasty Debugger",
-	"version": "1.3.2",
+	"version": "1.3.3",
 	"description": "Debug A/B tests from AB Tasty. Open source.",
 	"action": {
 		"default_title": "AB Tasty Debugger",