Merge pull request #1245 from creativecommons/develop

Author: zackkrida

.eslintrc.js

@@ -14,10 +14,10 @@ module.exports = {
     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
     'plugin:vue/recommended',
     'plugin:prettier/recommended',
-    'plugin:vue-a11y/base',
+    'plugin:vuejs-accessibility/recommended',
   ],
   // required to lint *.vue files
-  plugins: ['vue', 'cypress', 'vue-a11y'],
+  plugins: ['vue', 'cypress', 'vuejs-accessibility'],
   // add your custom rules here
   rules: {
     semi: [2, 'never'],
@@ -28,7 +28,6 @@ module.exports = {
     'vue/html-closing-bracket-newline': 'off',
     'vue/html-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
-    'vue-a11y/click-events-have-key-events': 'warn',
     'vue/component-name-in-template-casing': [
       'error',
       'PascalCase',
@@ -46,5 +45,6 @@ module.exports = {
         math: 'always',
       },
     ],
+    'vuejs-accessibility/aria-role': 'warn',
   },
 }

nuxt.config.js

@@ -127,12 +127,15 @@ export default {
       ttl: process.env.MICROCACHE_DURATION || 60,
     },
   },
-  modern: 'client',
   srcDir: 'src/',
-  // buildDir: 'dist/',
+  modern: 'client',
   server: { port: process.env.PORT || 8443 },
   components: true,
-  plugins: ['~/plugins/i18n.js', { src: '~plugins/ga.js', mode: 'client' }],
+  plugins: [
+    '~/plugins/i18n.js',
+    { src: '~/plugins/ab-test-init.js', mode: 'client' },
+    { src: '~plugins/ga.js', mode: 'client' },
+  ],
   css: [
     '@creativecommons/vocabulary/scss/vocabulary.scss',
     '~/styles/global.scss',

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cccatalog-frontend",
-  "version": "2020.10.1",
+  "version": "2020.10.2",
   "description": "Common Creative search",
   "repository": {
     "type": "git",
@@ -49,15 +49,15 @@
     "lodash.isempty": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "node-sass": "^4.14.1",
-    "nuxt": "^2.14.6",
+    "nuxt": "^2.14.7",
     "nuxt-ssr-cache": "^1.5.2",
     "patch-package": "^6.2.2",
     "sass-loader": "^10.0.1",
-    "sixpack-client": "^2.1.0",
     "uuid": "^8.3.1",
     "vue-i18n": "^8.21.0"
   },
   "devDependencies": {
+    "@nuxt/types": "^2.14.7",
     "@nuxtjs/eslint-module": "^2.0.0",
     "@types/jest": "^26.0.10",
     "@vue/test-utils": "^1.0.4",
@@ -68,7 +68,7 @@
     "eslint-plugin-cypress": "^2.11.1",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^6.2.2",
-    "eslint-plugin-vue-a11y": "0.0.31",
+    "eslint-plugin-vuejs-accessibility": "^0.5.1",
     "glob": "^7.1.6",
     "husky": "^4.2.5",
     "jest": "^26.4.2",
@@ -78,8 +78,8 @@
     "vue-jest": "^3.0.6"
   },
   "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+    "node": ">= 12.0.0",
+    "npm": ">= 6.0.0"
   },
   "browserslist": [
     "> 1%",
@@ -94,5 +94,9 @@
   "lint-staged": {
     "*.{js,vue}": "eslint --cache --fix",
     "*.{js,vue,css,md}": "prettier --write"
+  },
+  "volta": {
+    "node": "12.19.0",
+    "npm": "6.14.8"
   }
 }

package.json

@@ -1,45 +1,11 @@
-const EXPERIMENT_NAME = 'donation_language'
-const DONATION_GENERAL_CASE = 'donation_general'
-const DONATION_PERCENTAGE_CASE = 'donation_percentage'
-
-/**
- * Joins the experiment.
- *
- * Returns a Promise, which resolves with the experiment name and selected experiment case.
- * In case of failure, it rejects with the error, the experiment name and a default experiment case
- * @param {*} session Sixpack session object
- */
-const joinExperiment = (session) => {
-  const resultPromise = new Promise((resolve, reject) => {
-    session.participate(
-      EXPERIMENT_NAME,
-      [DONATION_GENERAL_CASE, DONATION_PERCENTAGE_CASE],
-      (err, res) => {
-        if (err || res.error) {
-          reject({
-            error: err,
-            name: EXPERIMENT_NAME,
-            case: DONATION_GENERAL_CASE,
-            session,
-          })
-        }
-        const experimentCase = res.alternative.name
-
-        resolve({
-          name: EXPERIMENT_NAME,
-          case: experimentCase,
-          session,
-        })
-      }
-    )
-  })
-
-  return resultPromise
-}
-
-export default joinExperiment
-export const ExperimentData = {
-  EXPERIMENT_NAME,
-  DONATION_GENERAL_CASE,
-  DONATION_PERCENTAGE_CASE,
+export const DONATION_GENERAL_CASE = 'donation_general'
+export const DONATION_PERCENTAGE_CASE = 'donation_percentage'
+
+export default {
+  name: 'donation_language_revised',
+  defaultCase: DONATION_GENERAL_CASE,
+  cases: {
+    DONATION_GENERAL_CASE,
+    DONATION_PERCENTAGE_CASE,
+  },
 }

src/abTests/experiments/donationLanguage.js

@@ -1,36 +1,45 @@
 import { JOINED_AB_TEST_EXPERIMENT } from '~/store-modules/mutation-types'
-import createSixpackSession from './lib/createSixpackSession'
 import donationLanguage from '~/abTests/experiments/donationLanguage'
+import { participate } from '~/utils/sixpack'
 
 /**
  * Attach each a/b test (aka "experiment") to the sixpack session
- * and commit a vuex mutation for each joined experiment
+ * and commit a vuex mutation for each joined experiment.
+ *
+ * Each experiment is a simple object with the following structure:
+ *
+ * ```js
+ * {
+ *   name: 'experiment_name',
+ *   defaultCase: 'experiment_default_case_name',
+ *   cases: {
+ *     'experiment_default_case_name',
+ *     'any_other_case_names',
+ *     'any_other_case_names',
+ *   },
+ *   traffic_fraction: .10 // an optional number between 0 and 1 (100%)
+ * }
+ * ```
  */
-const setupExperiments = (store) => {
-  const session = createSixpackSession(store.state.abSessionId)
+const abTests = (store) => {
+  const activeExperiments = [donationLanguage]
 
-  // List all active experiments here
-  const experimentPromises = [donationLanguage(session)]
-  return (
-    Promise.all(experimentPromises)
-      .then((experiments) =>
-        experiments.map((experiment) =>
-          store.commit(JOINED_AB_TEST_EXPERIMENT, {
-            name: experiment.name,
-            case: experiment.case,
-            session: experiment.session,
-          })
-        )
-      )
-      // In the case of an error, the user joins the default version of an experiment
-      .catch((error) =>
-        store.commit(JOINED_AB_TEST_EXPERIMENT, {
-          name: error.name,
-          case: error.case,
-          session: error.session,
-        })
-      )
-  )
+  // commit each experiment to Vuex
+  const commitExperiments = (experiments) => {
+    experiments.map((experiment) => {
+      store.commit(JOINED_AB_TEST_EXPERIMENT, {
+        name: experiment.name,
+        case: experiment.case,
+        session: experiment.session,
+      })
+    })
+  }
+
+  return Promise.all(
+    activeExperiments.map((experiment) =>
+      participate(experiment, { sessionId: store.state.abSessionId })
+    )
+  ).then(commitExperiments)
 }
 
-export default setupExperiments
+export default abTests

src/abTests/experiments/filterExpansion.js

@@ -1,10 +1,6 @@
 <template>
-  <div
-    v-if="visible"
-    class="overlay"
-    @click.self="$emit('close')"
-    @keyup="checkKey"
-  >
+  <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
+  <div ref="modal" class="overlay app-modal" @click.self="$emit('close')">
     <FocusTrap :active="true">
       <div class="modal relative" aria-modal="true" role="dialog">
         <header
@@ -19,7 +15,7 @@
             class="close-button has-color-gray is-size-6 is-size-4-touch"
             :aria-label="$t('browse-page.aria.close')"
             @click="$emit('close')"
-            @keyup.enter="$emit('close')"
+            @keypress.enter="$emit('close')"
           >
             <i class="icon cross" />
           </button>
@@ -31,42 +27,32 @@
 </template>
 
 <script>
+import { FocusTrap } from 'focus-trap-vue'
+
 /**
  * @todo: This entire component should be moved to vue-vocabulary
  */
-
-import { FocusTrap } from 'focus-trap-vue'
-
 export default {
   name: 'AppModal',
   components: {
     FocusTrap,
   },
   props: {
-    visible: Boolean,
-    title: String, // required for titlebar AND close button to show
+    /** Required for titlebar AND close button to show */
+    title: String,
     subTitle: String,
   },
-  watch: {
-    visible: {
-      handler(to) {
-        if (typeof document !== 'undefined') {
-          if (to) {
-            document.addEventListener('keyup', this.checkKey)
-          } else {
-            document.removeEventListener('keyup', this.checkKey)
-          }
-        }
-      },
-      immediate: true,
-    },
+  mounted() {
+    document.addEventListener('keyup', this.closeOnEsc)
   },
   destroyed() {
-    document.removeEventListener('keyup', this.checkKey)
+    document.removeEventListener('keyup', this.closeOnEsc)
   },
   methods: {
-    checkKey(e) {
-      if (e.keyCode === 27) this.$emit('close')
+    closeOnEsc(e) {
+      if (e.keyCode === 27) {
+        this.$emit('close')
+      }
     },
   },
 }