🍰 2119-Fix Contribution consistent form input validation

cypress/integration/common/steps.js

@@ -5,9 +5,12 @@ import {
 } from "cypress-cucumber-preprocessor/steps";
 import helpers from "../../support/helpers";
 import { VERSION } from '../../constants/terms-and-conditions-version.js'
+import locales from '../../../webapp/locales'
+import orderBy from 'lodash/orderBy'
 
 /* global cy  */
 
+const languages = orderBy(locales, 'name')
 let lastPost = {};
 
 let loginCredentials = {
@@ -245,6 +248,12 @@ Then("I select a category", () => {
     .click();
 });
 
+When("I choose {string} as the language for the post", (languageCode) => {
+  cy.get('.ds-flex-item > .ds-form-item .ds-select ')
+    .click().get('.ds-select-option')
+    .eq(languages.findIndex(l => l.code === languageCode)).click()
+})
+
 Then("the post shows up on the landing page at position {int}", index => {
   cy.openPage("landing");
   const selector = `.post-card:nth-child(${index}) > .ds-card-content`;
@@ -536,4 +545,4 @@ Then("I see only one post with the title {string}", title => {
     .find(".post-link")
     .should("have.length", 1);
   cy.get(".main-container").contains(".post-link", title);
-});
+});

cypress/integration/notifications/Mentions.feature

@@ -20,6 +20,7 @@ Feature: Notification for a mention
       """
     And mention "@matt-rider" in the text
     And I select a category
+    And I choose "en" as the language for the post
     And I click on "Save"
     When I log out
     And I log in with the following credentials:

cypress/integration/post/WritePost.feature

@@ -17,7 +17,8 @@ Feature: Create a post
       Human Connection is a free and open-source social network
       for active citizenship.
       """
-    Then I select a category
+    And I select a category
+    And I choose "en" as the language for the post
     And I click on "Save"
     Then I get redirected to ".../my-first-post"
     And the post was saved successfully

webapp/components/CategoriesSelect/CategoriesSelect.spec.js

@@ -8,10 +8,12 @@ localVue.use(Styleguide)
 describe('CategoriesSelect.vue', () => {
   let wrapper
   let mocks
+  let provide
   let democracyAndPolitics
   let environmentAndNature
   let consumptionAndSustainablity
 
+  const propsData = { model: 'categoryIds' }
   const categories = [
     {
       id: 'cat9',
@@ -35,14 +37,19 @@ describe('CategoriesSelect.vue', () => {
     },
   ]
   beforeEach(() => {
+    provide = {
+      $parentForm: {
+        update: jest.fn(),
+      },
+    }
     mocks = {
       $t: jest.fn(),
     }
   })
 
   describe('shallowMount', () => {
     const Wrapper = () => {
-      return mount(CategoriesSelect, { mocks, localVue })
+      return mount(CategoriesSelect, { propsData, mocks, localVue, provide })
     }
 
     beforeEach(() => {
@@ -60,8 +67,8 @@ describe('CategoriesSelect.vue', () => {
         expect(wrapper.vm.selectedCategoryIds).toEqual([categories[0].id])
       })
 
-      it('emits an updateCategories event when the selectedCategoryIds changes', () => {
-        expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
+      it('calls $parent.update with selected category ids', () => {
+        expect(provide.$parentForm.update).toHaveBeenCalledWith('categoryIds', ['cat9'])
       })
 
       it('removes categories when clicked a second time', () => {

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -5,6 +5,7 @@
         <ds-flex-item>
           <ds-button
             size="small"
+            :data-test="categoryButtonsId(category.id)"
             @click.prevent="toggleCategory(category.id)"
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
@@ -28,16 +29,23 @@
 
 <script>
 import CategoryQuery from '~/graphql/CategoryQuery'
+import xor from 'lodash/xor'
 
 export default {
+  inject: {
+    $parentForm: {
+      default: null,
+    },
+  },
   props: {
     existingCategoryIds: { type: Array, default: () => [] },
+    model: { type: String, required: true },
   },
   data() {
     return {
       categories: null,
       selectedMax: 3,
-      selectedCategoryIds: [],
+      selectedCategoryIds: this.existingCategoryIds,
     }
   },
   computed: {
@@ -48,39 +56,22 @@ export default {
       return this.selectedCount >= this.selectedMax
     },
   },
-  watch: {
-    selectedCategoryIds(categoryIds) {
-      this.$emit('updateCategories', categoryIds)
-    },
-    existingCategoryIds: {
-      immediate: true,
-      handler: function(existingCategoryIds) {
-        if (!existingCategoryIds || !existingCategoryIds.length) {
-          return
-        }
-        this.selectedCategoryIds = existingCategoryIds
-      },
-    },
-  },
   methods: {
     toggleCategory(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        this.selectedCategoryIds.splice(index, 1)
-      } else {
-        this.selectedCategoryIds.push(id)
+      this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
+      if (this.$parentForm) {
+        this.$parentForm.update(this.model, this.selectedCategoryIds)
       }
     },
     isActive(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        return true
-      }
-      return false
+      return this.selectedCategoryIds.includes(id)
     },
     isDisabled(id) {
       return !!(this.reachedMaximum && !this.isActive(id))
     },
+    categoryButtonsId(categoryId) {
+      return `category-buttons-${categoryId}`
+    },
   },
   apollo: {
     Category: {