PDCL-6855 Add checkboxes to return undefined values when users need…

… it. (#63) * PDCL-6855 Add checkboxes to return `undefined` values when users need it. * Add Jasmine seed number to the CLI output. * Fix tests in Safari when seed is 51602. * Update dependencies. * Change the way we select a picker value. * Use `changePickerValue` everywhere. * Keep seed commented for further debugging.
adobe · Sep 21, 2021 · 975ad47 · 975ad47
1 parent fe978ca
commit 975ad47
Show file tree

Hide file tree

Showing 16 changed files with 842 additions and 735 deletions.
diff --git a/extension.json b/extension.json
@@ -1919,20 +1919,27 @@
                 ]
               },
               "conditionalValue": {
-                "type": "string",
-                "minLength": 1
+                "oneOf": [
+                  {
+                    "type": "number"
+                  },
+                  {
+                    "type": "string"
+                  }
+                ]
               },
               "fallbackValue": {
-                "type": "string"
+                "oneOf": [
+                  {
+                    "type": "number"
+                  },
+                  {
+                    "type": "string"
+                  }
+                ]
               }
             },
-            "required": [
-              "leftOperand",
-              "comparison",
-              "rightOperand",
-              "conditionalValue",
-              "fallbackValue"
-            ],
+            "required": ["leftOperand", "comparison", "rightOperand"],
             "additionalProperties": false
           },
           {

diff --git a/karma.conf.js b/karma.conf.js
@@ -9,7 +9,7 @@ const packageDescriptor = require('./package.json');
 
 let defaultBrowsers = ['Chrome'];
 let startConnect = false;
-const reporters = ['dots'];
+const reporters = ['dots', 'jasmine-order'];
 let buildId;
 
 if (process.env.CI) {
@@ -296,7 +296,6 @@ module.exports = (config) => {
     browserDisconnectTimeout: 20000,
     browserDisconnectTolerance: 3,
     browserNoActivityTimeout: 300000,
-
     webpack: {
       devtool: false,
       mode: 'development',
@@ -327,7 +326,11 @@ module.exports = (config) => {
         new SourceMapDevToolPlugin({})
       ]
     },
-
+    client: {
+      jasmine: {
+        // seed: 55788
+      }
+    },
     webpackServer: {
       debug: false,
       progress: true,

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "ci-job": "npm test -- --ci && npm run lint && npm run package && ./node_modules/.bin/reactor-sandbox build"
   },
   "dependencies": {
-    "@adobe/react-spectrum": "^3.13.0",
+    "@adobe/react-spectrum": "^3.14.0",
     "@react/collection-view": "file:react-collection-view-4.1.5.tgz",
     "@react/react-spectrum": "file:react-react-spectrum-2.25.0.tgz",
     "@spectrum-icons/workflow": "^3.2.1",
@@ -44,25 +44,25 @@
     "@adobe/reactor-sandbox": "^12.0.0",
     "@babel/core": "^7.15.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/preset-env": "^7.15.4",
+    "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
     "acorn": "^8.5.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "camelcase": "^6.2.0",
     "capitalize": "^2.0.3",
     "concurrently": "^6.2.1",
-    "css-loader": "^6.2.0",
+    "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.25.1",
+    "eslint-plugin-react": "^7.25.3",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.3.2",
@@ -76,17 +76,18 @@
     "karma-firefox-launcher": "^2.1.1",
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-matchers": "^4.0.2",
+    "karma-jasmine-order-reporter": "^1.1.0",
     "karma-safari-launcher": "^1.0.0",
     "karma-sauce-launcher": "^4.3.6",
     "karma-webpack": "^5.0.0",
     "nib": "^1.1.2",
-    "prettier": "^2.4.0",
+    "prettier": "^2.4.1",
     "simulate": "0.0.6",
     "style-loader": "^3.2.1",
     "stylus": "^0.55.0",
     "stylus-loader": "^6.1.0",
     "url-loader": "^4.1.1",
-    "webpack": "^5.52.0",
+    "webpack": "^5.53.0",
     "webpack-cli": "^4.8.0",
     "yargs": "^17.1.1"
   },

diff --git a/src/lib/dataElements/__tests__/conditionalValue.test.js b/src/lib/dataElements/__tests__/conditionalValue.test.js
@@ -28,6 +28,23 @@ describe('conditional value data element delegate', function () {
     expect(conditionalValueDelegate(settings)).toBe('a');
   });
 
+  it(
+    'returns undefined when value comparison returns true and there is no' +
+      ' conditionalValue',
+    function () {
+      var settings = {
+        leftOperand: 1,
+        comparison: {
+          operator: 'equals'
+        },
+        rightOperand: 1,
+        fallbackValue: 'b'
+      };
+
+      expect(conditionalValueDelegate(settings)).toBeUndefined();
+    }
+  );
+
   it('returns the falback value when value comparison returns false', function () {
     var settings = {
       leftOperand: 1,
@@ -41,4 +58,21 @@ describe('conditional value data element delegate', function () {
 
     expect(conditionalValueDelegate(settings)).toBe('b');
   });
+
+  it(
+    'returns undefined when value comparison returns false and there is no' +
+      ' fallbackValue',
+    function () {
+      var settings = {
+        leftOperand: 1,
+        comparison: {
+          operator: 'equals'
+        },
+        rightOperand: 2,
+        conditionalValue: 'a'
+      };
+
+      expect(conditionalValueDelegate(settings)).toBeUndefined();
+    }
+  );
 });
diff --git a/src/lib/helpers/__tests__/visitorTracking.test.js b/src/lib/helpers/__tests__/visitorTracking.test.js
@@ -55,11 +55,10 @@ describe('visitor tracking', function () {
     window.localStorage.clear();
   };
 
-  afterEach(cleanUp);
+  beforeEach(cleanUp);
 
   beforeAll(function () {
     cleanUp();
-    spyOn(cookie, 'set').and.callThrough();
     mockTurbineVariable({
       logger: mockLogger
     });

diff --git a/src/view/__tests__/helpers/react-testing-library.jsx b/src/view/__tests__/helpers/react-testing-library.jsx
@@ -153,7 +153,5 @@ export async function changePickerValue(pickerTrigger, value) {
   fireEvent.click(pickerTrigger);
   const option = await screen.findByRole('option', { name: value });
   clickSpectrumOption(option);
-  await safelyWaitForElementToBeRemoved(() =>
-    screen.queryByRole('option', { name: value })
-  );
+  await safelyWaitForElementToBeRemoved(option);
 }
diff --git a/src/view/conditions/__tests__/maxFrequency.test.jsx b/src/view/conditions/__tests__/maxFrequency.test.jsx
@@ -14,8 +14,7 @@ import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {
   simulate,
-  clickSpectrumOption,
-  safelyWaitForElementToBeRemoved
+  changePickerValue
 } from '@test-helpers/react-testing-library';
 import createExtensionBridge from '@test-helpers/createExtensionBridge';
 import MaxFrequency, { formConfig } from '../maxFrequency';
@@ -27,12 +26,6 @@ const pageElements = {
   unitsDropdown: {
     getTrigger: () => {
       return screen.getByRole('button', { name: /unit/i });
-    },
-    waitForSessionOption: () => {
-      return screen.findByRole('option', { name: /session/i });
-    },
-    waitForVisitorOption: () => {
-      return screen.findByRole('option', { name: /visitor/i });
     }
   }
 };
@@ -73,12 +66,9 @@ describe('max frequency condition view', () => {
   });
 
   it('sets settings from form values', async () => {
-    fireEvent.click(pageElements.unitsDropdown.getTrigger());
-    const sessionOption =
-      await pageElements.unitsDropdown.waitForSessionOption();
-    clickSpectrumOption(sessionOption);
-    await safelyWaitForElementToBeRemoved(() =>
-      screen.queryByRole('option', { name: /session/i })
+    await changePickerValue(
+      pageElements.unitsDropdown.getTrigger(),
+      /session/i
     );
 
     simulate.clear(pageElements.getCountTextBox());
@@ -135,10 +125,10 @@ describe('max frequency condition view', () => {
     });
 
     it('sets settings from form values', async () => {
-      fireEvent.click(pageElements.unitsDropdown.getTrigger());
-      const visitorOption =
-        await pageElements.unitsDropdown.waitForVisitorOption();
-      clickSpectrumOption(visitorOption);
+      await changePickerValue(
+        pageElements.unitsDropdown.getTrigger(),
+        /visitor/i
+      );
 
       expect(extensionBridge.getSettings()).toEqual({
         unit: 'visitor'

diff --git a/src/view/conditions/__tests__/pageViews.test.jsx b/src/view/conditions/__tests__/pageViews.test.jsx
@@ -12,21 +12,15 @@
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-  clickSpectrumOption,
-  safelyWaitForElementToBeRemoved
-} from '@test-helpers/react-testing-library';
+import { changePickerValue } from '@test-helpers/react-testing-library';
 import createExtensionBridge from '@test-helpers/createExtensionBridge';
 import PageViews, { formConfig } from '../pageViews';
 import bootstrap from '../../bootstrap';
 
 // react-testing-library element selectors
 const pageElements = {
   operatorDropdown: {
-    getTrigger: () => screen.getByRole('button', { name: /operator/i }),
-    waitForEqualToOption: () => {
-      return screen.findByRole('option', { name: /equal to/i });
-    }
+    getTrigger: () => screen.getByRole('button', { name: /operator/i })
   },
   getCountTextBox: () => screen.getByRole('textbox', { name: /count/i }),
   duration: {
@@ -80,14 +74,12 @@ describe('page views condition view', () => {
   });
 
   it('sets settings from form values', async () => {
-    fireEvent.click(pageElements.operatorDropdown.getTrigger());
-    const equalTo = await pageElements.operatorDropdown.waitForEqualToOption();
-    clickSpectrumOption(equalTo);
-    await safelyWaitForElementToBeRemoved(() =>
-      screen.queryByRole('option', { name: /equal to/i })
+    await changePickerValue(
+      pageElements.operatorDropdown.getTrigger(),
+      /equal to/i
     );
-    userEvent.type(pageElements.getCountTextBox(), '100');
 
+    userEvent.type(pageElements.getCountTextBox(), '100');
     fireEvent.click(pageElements.duration.radioGroup.getCurrentSession());
 
     expect(extensionBridge.getSettings()).toEqual({

diff --git a/src/view/conditions/__tests__/screenResolution.test.jsx b/src/view/conditions/__tests__/screenResolution.test.jsx
@@ -10,12 +10,9 @@
  * governing permissions and limitations under the License.
  ****************************************************************************************/
 
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-  clickSpectrumOption,
-  safelyWaitForElementToBeRemoved
-} from '@test-helpers/react-testing-library';
+import { changePickerValue } from '@test-helpers/react-testing-library';
 import createExtensionBridge from '@test-helpers/createExtensionBridge';
 import ScreenResolution, { formConfig } from '../screenResolution';
 import bootstrap from '../../bootstrap';
@@ -41,12 +38,6 @@ const pageElements = {
       })
       .slice(-1);
     return button;
-  },
-  waitForLessThanOption: () => {
-    return screen.findByRole('option', { name: /less than$/i });
-  },
-  waitForEqualToOption: () => {
-    return screen.findByRole('option', { name: /equal to/i });
   }
 };
 
@@ -95,18 +86,13 @@ describe('screen resolution condition view', () => {
   });
 
   it('sets settings from form values', async () => {
-    fireEvent.click(pageElements.getWidthDropDownTrigger());
-    const equalToOption = await pageElements.waitForEqualToOption();
-    clickSpectrumOption(equalToOption);
-    await safelyWaitForElementToBeRemoved(() =>
-      screen.queryByRole('option', { name: /equal to/i })
+    await changePickerValue(
+      pageElements.getWidthDropDownTrigger(),
+      /equal to/i
     );
-
-    fireEvent.click(pageElements.getHeightDropDownTrigger());
-    const lessThanOption = await pageElements.waitForLessThanOption();
-    clickSpectrumOption(lessThanOption);
-    await safelyWaitForElementToBeRemoved(() =>
-      screen.queryByRole('option', { name: /less than$/i })
+    await changePickerValue(
+      pageElements.getHeightDropDownTrigger(),
+      /less than/i
     );
 
     userEvent.type(pageElements.getWidthTextBox(), '100');

diff --git a/src/view/conditions/__tests__/timeOnSite.test.jsx b/src/view/conditions/__tests__/timeOnSite.test.jsx
@@ -12,10 +12,7 @@
 
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-  clickSpectrumOption,
-  safelyWaitForElementToBeRemoved
-} from '@test-helpers/react-testing-library';
+import { changePickerValue } from '@test-helpers/react-testing-library';
 import createExtensionBridge from '@test-helpers/createExtensionBridge';
 import TimeOnSite, { formConfig } from '../timeOnSite';
 import bootstrap from '../../bootstrap';
@@ -28,9 +25,6 @@ const pageElements = {
   getDropdownTrigger: () => {
     return screen.getByRole('button', { name: /operator/i });
   },
-  waitForEqualToOption: () => {
-    return screen.findByRole('option', { name: /equal to/i });
-  },
   getDataElementModalTrigger: () => {
     return screen.getByRole('button', { name: /select a data element/i });
   }
@@ -71,13 +65,7 @@ describe('time on site condition view', () => {
   });
 
   it('sets settings from form values', async () => {
-    fireEvent.click(pageElements.getDropdownTrigger());
-    const equalOption = await pageElements.waitForEqualToOption();
-    clickSpectrumOption(equalOption);
-    await safelyWaitForElementToBeRemoved(() =>
-      screen.queryByRole('option', { name: /equal to/i })
-    );
-
+    await changePickerValue(pageElements.getDropdownTrigger(), /equal to/i);
     userEvent.type(pageElements.getMinutesTextBox(), '100');
 
     expect(extensionBridge.getSettings()).toEqual({