feat: 🍰 Refactor Social Media List With Slots

backend/src/middleware/notifications/notificationsMiddleware.js

@@ -41,7 +41,6 @@ const publishNotifications = async (context, promises) => {
   notifications.forEach((notificationAdded, index) => {
     pubsub.publish(NOTIFICATION_ADDED, { notificationAdded })
     if (notificationAdded.to.sendNotificationEmails) {
-      // Wolle await
       sendMail(
         notificationTemplate({
           email: notificationsEmailAddresses[index].email,

cypress/integration/UserProfile.SocialMedia/I_add_a_social_media_link.js

@@ -1,9 +1,12 @@
 import { When } from "cypress-cucumber-preprocessor/steps";
 
 When('I add a social media link', () => {
-  cy.get('input#addSocialMedia')
+  cy.get('button')
+    .contains('Add link')
+    .click()
+    .get('#editSocialMedia')
     .type('https://freeradical.zone/peter-pan')
     .get('button')
-    .contains('Add link')
+    .contains('Save')
     .click()
 })

cypress/integration/UserProfile.SocialMedia/I_have_added_a_social_media_link.js

@@ -2,9 +2,12 @@ import { Given } from "cypress-cucumber-preprocessor/steps";
 
 Given('I have added a social media link', () => {
   cy.visit('/settings/my-social-media')
-    .get('input#addSocialMedia')
-    .type('https://freeradical.zone/peter-pan')
     .get('button')
     .contains('Add link')
     .click()
+    .get('#editSocialMedia')
+    .type('https://freeradical.zone/peter-pan')
+    .get('button')
+    .contains('Save')
+    .click()
 })

webapp/components/_new/features/MySomethingList/MySomethingList.spec.js

@@ -0,0 +1,128 @@
+import { mount } from '@vue/test-utils'
+import MySomethingList from './MySomethingList.vue'
+import Vue from 'vue'
+
+const localVue = global.localVue
+
+describe('MySomethingList.vue', () => {
+  let wrapper
+  let propsData
+  let data
+  let mocks
+
+  beforeEach(() => {
+    propsData = {
+      useFormData: { dummy: '' },
+      useItems: [{ id: 'id', dummy: 'dummy' }],
+      namePropertyKey: 'dummy',
+      callbacks: { edit: jest.fn(), submit: jest.fn(), delete: jest.fn() },
+    }
+    data = () => {
+      return {}
+    }
+    mocks = {
+      $t: jest.fn(),
+      $apollo: {
+        mutate: jest.fn(),
+      },
+      $toast: {
+        error: jest.fn(),
+        success: jest.fn(),
+      },
+    }
+  })
+
+  describe('mount', () => {
+    let form, slots
+    const Wrapper = () => {
+      slots = {
+        'list-item': '<div class="list-item"></div>',
+        'edit-item': '<div class="edit-item"></div>',
+      }
+      return mount(MySomethingList, {
+        propsData,
+        data,
+        mocks,
+        localVue,
+        slots,
+      })
+    }
+
+    describe('given existing item', () => {
+      beforeEach(() => {
+        wrapper = Wrapper()
+      })
+
+      describe('for each item it', () => {
+        it('displays the item as slot "list-item"', () => {
+          expect(wrapper.find('.list-item').exists()).toBe(true)
+        })
+
+        it('displays the edit button', () => {
+          expect(wrapper.find('.base-button[data-test="edit-button"]').exists()).toBe(true)
+        })
+
+        it('displays the delete button', () => {
+          expect(wrapper.find('.base-button[data-test="delete-button"]').exists()).toBe(true)
+        })
+      })
+
+      describe('editing item', () => {
+        beforeEach(async () => {
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
+          editButton.trigger('click')
+          await Vue.nextTick()
+        })
+
+        it('disables adding items while editing', () => {
+          const submitButton = wrapper.find('.base-button[data-test="add-save-button"]')
+          expect(submitButton.text()).not.toContain('settings.social-media.submit')
+        })
+
+        it('allows the user to cancel editing', async () => {
+          expect(wrapper.find('.edit-item').exists()).toBe(true)
+          const cancelButton = wrapper.find('button#cancel')
+          cancelButton.trigger('click')
+          await Vue.nextTick()
+          expect(wrapper.find('.edit-item').exists()).toBe(false)
+        })
+      })
+
+      describe('calls callback functions', () => {
+        it('calls edit', async () => {
+          const editButton = wrapper.find('.base-button[data-test="edit-button"]')
+          editButton.trigger('click')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
+          expect(propsData.callbacks.edit).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.edit).toHaveBeenCalledWith(expect.any(Object), expectedItem)
+        })
+
+        it('calls submit', async () => {
+          form = wrapper.find('form')
+          form.trigger('submit')
+          await Vue.nextTick()
+          form.trigger('submit')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: '' })
+          expect(propsData.callbacks.submit).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.submit).toHaveBeenCalledWith(
+            expect.any(Object),
+            true,
+            expectedItem,
+            { dummy: '' },
+          )
+        })
+
+        it('calls delete', async () => {
+          const deleteButton = wrapper.find('.base-button[data-test="delete-button"]')
+          deleteButton.trigger('click')
+          await Vue.nextTick()
+          const expectedItem = expect.objectContaining({ id: 'id', dummy: 'dummy' })
+          expect(propsData.callbacks.delete).toHaveBeenCalledTimes(1)
+          expect(propsData.callbacks.delete).toHaveBeenCalledWith(expect.any(Object), expectedItem)
+        })
+      })
+    })
+  })
+})

webapp/components/_new/features/MySomethingList/MySomethingList.vue

@@ -0,0 +1,185 @@
+<template>
+  <ds-form
+    v-model="formData"
+    :schema="formSchema"
+    @input="handleInput"
+    @input-valid="handleInputValid"
+    @submit="handleSubmitItem"
+  >
+    <div v-if="isEditing">
+      <ds-space margin="base">
+        <ds-heading tag="h5">
+          {{
+            isCreation
+              ? $t('settings.social-media.addNewTitle')
+              : $t('settings.social-media.editTitle', { name: editingItem[namePropertyKey] })
+          }}
+        </ds-heading>
+      </ds-space>
+      <ds-space v-if="items" margin-top="base">
+        <slot name="edit-item" />
+      </ds-space>
+    </div>
+    <div v-else>
+      <ds-space v-if="items" margin-top="base">
+        <ds-list>
+          <ds-list-item v-for="item in items" :key="item.id" class="list-item--high">
+            <template>
+              <slot name="list-item" :item="item" />
+              <span class="divider">|</span>
+              <base-button
+                icon="edit"
+                circle
+                ghost
+                @click="handleEditItem(item)"
+                :title="$t('actions.edit')"
+                data-test="edit-button"
+              />
+              <base-button
+                icon="trash"
+                circle
+                ghost
+                @click="handleDeleteItem(item)"
+                :title="$t('actions.delete')"
+                data-test="delete-button"
+              />
+            </template>
+          </ds-list-item>
+        </ds-list>
+      </ds-space>
+    </div>
+
+    <ds-space margin-top="base">
+      <ds-space margin-top="base">
+        <base-button
+          filled
+          :disabled="loading || !(!isEditing || (isEditing && !disabled))"
+          :loading="loading"
+          type="submit"
+          data-test="add-save-button"
+        >
+          {{ isEditing ? $t('actions.save') : $t('settings.social-media.submit') }}
+        </base-button>
+        <base-button v-if="isEditing" id="cancel" danger @click="handleCancel()">
+          {{ $t('actions.cancel') }}
+        </base-button>
+      </ds-space>
+    </ds-space>
+  </ds-form>
+</template>
+
+<script>
+export default {
+  name: 'MySomethingList',
+  props: {
+    useFormData: {
+      type: Object,
+      default: () => ({}),
+    },
+    useFormSchema: {
+      type: Object,
+      default: () => ({}),
+    },
+    useItems: {
+      type: Array,
+      default: () => [],
+    },
+    defaultItem: {
+      type: Object,
+      default: () => ({}),
+    },
+    namePropertyKey: {
+      type: String,
+      required: true,
+    },
+    callbacks: {
+      type: Object,
+      default: () => ({
+        handleInput: () => {},
+        handleInputValid: () => {},
+        edit: () => {},
+        submit: () => {},
+        delete: () => {},
+      }),
+    },
+  },
+  data() {
+    return {
+      formData: this.useFormData,
+      formSchema: this.useFormSchema,
+      items: this.useItems,
+      disabled: true,
+      loading: false,
+      editingItem: null,
+    }
+  },
+  computed: {
+    isEditing() {
+      return this.editingItem !== null
+    },
+    isCreation() {
+      return this.editingItem !== null && this.editingItem.id === ''
+    },
+  },
+  watch: {
+    // can change by a parents callback and again given trough by v-bind from there
+    useItems(newItems) {
+      this.items = newItems
+    },
+  },
+  methods: {
+    handleInput(data) {
+      this.callbacks.handleInput(this, data)
+      this.disabled = true
+    },
+    handleInputValid(data) {
+      this.callbacks.handleInputValid(this, data)
+    },
+    handleEditItem(item) {
+      this.editingItem = item
+      this.callbacks.edit(this, item)
+    },
+    async handleSubmitItem() {
+      if (!this.isEditing) {
+        this.handleEditItem({ ...this.defaultItem, id: '' })
+      } else {
+        this.loading = true
+        if (await this.callbacks.submit(this, this.isCreation, this.editingItem, this.formData)) {
+          this.disabled = true
+          this.editingItem = null
+        }
+        this.loading = false
+      }
+    },
+    handleCancel() {
+      this.editingItem = null
+      this.disabled = true
+    },
+    async handleDeleteItem(item) {
+      await this.callbacks.delete(this, item)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scope>
+.divider {
+  opacity: 0.4;
+  padding: 0 $space-small;
+}
+
+.icon-button {
+  cursor: pointer;
+}
+
+.list-item--high {
+  .ds-list-item-prefix {
+    align-self: center;
+  }
+
+  .ds-list-item-content {
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

webapp/components/_new/features/SocialMedia/SocialMediaListItem.spec.js

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils'
+import SocialMediaListItem from './SocialMediaListItem.vue'
+
+describe('SocialMediaListItem.vue', () => {
+  let wrapper
+  let propsData
+  const socialMediaUrl = 'https://freeradical.zone/@mattwr18'
+  const faviconUrl = 'https://freeradical.zone/favicon.ico'
+
+  beforeEach(() => {
+    propsData = {}
+  })
+
+  describe('shallowMount', () => {
+    const Wrapper = () => {
+      return shallowMount(SocialMediaListItem, { propsData })
+    }
+
+    describe('given existing social media links', () => {
+      beforeEach(() => {
+        propsData = { item: { id: 's1', url: socialMediaUrl, favicon: faviconUrl } }
+        wrapper = Wrapper()
+      })
+
+      describe('for each link item it', () => {
+        it('displays the favicon', () => {
+          expect(wrapper.find(`img[src="${faviconUrl}"]`).exists()).toBe(true)
+        })
+
+        it('displays the url', () => {
+          expect(wrapper.find(`a[href="${socialMediaUrl}"]`).exists()).toBe(true)
+        })
+      })
+    })
+  })
+})