From 70edda034201b9d7c3d38bb714dfb35324b2841c Mon Sep 17 00:00:00 2001 From: François Freitag Date: Sun, 16 May 2021 17:56:50 +0200 Subject: Port dav calendar settings page to Vue.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Drop reliance on deprecated global jQuery object. - Allow testing user interactions. - Use newer technology stack. --- Test user interactions with the groupware dav settings Add infrastructure to test Vue components: - Use recommended libraries: - https://vuejs.org/v2/guide/testing.html#Recommendations - Use jest-dom for robust assertions on the DOM state - Use user-event to be more representative of user actions - Code is transpiled by Jest, with the help of vue-jest. Ignore test files for no-unpublished-import. Prevent ESLint from flagging: ``` /home/runner/work/server/server/apps/dav/src/views/CalDavSettings.spec.js Error: 1:24 error "@testing-library/vue" is not published node/no-unpublished-import Error: 2:23 error "@testing-library/user-event" is not published node/no-unpublished-import ``` Signed-off-by: François Freitag --- apps/dav/src/settings.js | 24 ++++ apps/dav/src/views/CalDavSettings.spec.js | 116 ++++++++++++++++ apps/dav/src/views/CalDavSettings.vue | 127 ++++++++++++++++++ .../__snapshots__/CalDavSettings.spec.js.snap | 146 +++++++++++++++++++++ 4 files changed, 413 insertions(+) create mode 100644 apps/dav/src/settings.js create mode 100644 apps/dav/src/views/CalDavSettings.spec.js create mode 100644 apps/dav/src/views/CalDavSettings.vue create mode 100644 apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap (limited to 'apps/dav/src') diff --git a/apps/dav/src/settings.js b/apps/dav/src/settings.js new file mode 100644 index 00000000000..a81e11c5257 --- /dev/null +++ b/apps/dav/src/settings.js @@ -0,0 +1,24 @@ +import Vue from 'vue' +import { loadState } from '@nextcloud/initial-state' +import { translate } from '@nextcloud/l10n' +import CalDavSettings from './views/CalDavSettings' + +Vue.prototype.$t = translate + +const View = Vue.extend(CalDavSettings) +const CalDavSettingsView = new View({ + name: 'CalDavSettingsView', + data() { + return { + sendInvitations: loadState('dav', 'sendInvitations'), + generateBirthdayCalendar: loadState( + 'dav', + 'generateBirthdayCalendar' + ), + sendEventReminders: loadState('dav', 'sendEventReminders'), + sendEventRemindersPush: loadState('dav', 'sendEventRemindersPush'), + } + }, +}) + +CalDavSettingsView.$mount('#settings-admin-caldav') diff --git a/apps/dav/src/views/CalDavSettings.spec.js b/apps/dav/src/views/CalDavSettings.spec.js new file mode 100644 index 00000000000..3f9254a3010 --- /dev/null +++ b/apps/dav/src/views/CalDavSettings.spec.js @@ -0,0 +1,116 @@ +import axios from '@nextcloud/axios' +import { render } from '@testing-library/vue' +import userEvent from '@testing-library/user-event' +import CalDavSettings from './CalDavSettings' +// eslint-disable-next-line no-unused-vars +import { generateUrl } from '@nextcloud/router' + +jest.mock('@nextcloud/axios') +jest.mock('@nextcloud/router', () => { + return { + generateUrl(url) { + return url + }, + } +}) + +describe('CalDavSettings', () => { + const originalOC = global.OC + const originalOCP = global.OCP + + beforeEach(() => { + global.OC = { requestToken: 'secret' } + global.OCP = { + AppConfig: { + setValue: jest.fn(), + }, + } + }) + afterAll(() => { + global.OC = originalOC + global.OCP = originalOCP + }) + + test('interactions', async() => { + const TLUtils = render( + CalDavSettings, + { + data() { + return { + sendInvitations: true, + generateBirthdayCalendar: true, + sendEventReminders: true, + sendEventRemindersPush: true, + } + }, + }, + Vue => { + Vue.prototype.$t = jest.fn((app, text) => text) + } + ) + expect(TLUtils.container).toMatchSnapshot() + const sendInvitations = TLUtils.getByLabelText( + 'Send invitations to attendees' + ) + expect(sendInvitations).toBeChecked() + const generateBirthdayCalendar = TLUtils.getByLabelText( + 'Automatically generate a birthday calendar' + ) + expect(generateBirthdayCalendar).toBeChecked() + const sendEventReminders = TLUtils.getByLabelText( + 'Send notifications for events' + ) + expect(sendEventReminders).toBeChecked() + const sendEventRemindersPush = TLUtils.getByLabelText( + 'Enable notifications for events via push' + ) + expect(sendEventRemindersPush).toBeChecked() + + await userEvent.click(sendInvitations) + expect(sendInvitations).not.toBeChecked() + expect(OCP.AppConfig.setValue).toHaveBeenCalledWith( + 'dav', + 'sendInvitations', + 'no' + ) + OCP.AppConfig.setValue.mockClear() + await userEvent.click(sendInvitations) + expect(sendInvitations).toBeChecked() + expect(OCP.AppConfig.setValue).toHaveBeenCalledWith( + 'dav', + 'sendInvitations', + 'yes' + ) + + axios.post.mockImplementationOnce((uri) => { + expect(uri).toBe('/apps/dav/disableBirthdayCalendar') + return Promise.resolve() + }) + await userEvent.click(generateBirthdayCalendar) + axios.post.mockImplementationOnce((uri) => { + expect(uri).toBe('/apps/dav/enableBirthdayCalendar') + return Promise.resolve() + }) + await userEvent.click(generateBirthdayCalendar) + expect(generateBirthdayCalendar).toBeEnabled() + + OCP.AppConfig.setValue.mockClear() + await userEvent.click(sendEventReminders) + expect(sendEventReminders).not.toBeChecked() + expect(OCP.AppConfig.setValue).toHaveBeenCalledWith( + 'dav', + 'sendEventReminders', + 'no' + ) + expect(sendEventRemindersPush).toBeDisabled() + OCP.AppConfig.setValue.mockClear() + await userEvent.click(sendEventReminders) + expect(sendEventReminders).toBeChecked() + expect(OCP.AppConfig.setValue).toHaveBeenCalledWith( + 'dav', + 'sendEventReminders', + 'yes' + ) + expect(sendEventRemindersPush).toBeEnabled() + }) +}) diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue new file mode 100644 index 00000000000..4b33b2b45bb --- /dev/null +++ b/apps/dav/src/views/CalDavSettings.vue @@ -0,0 +1,127 @@ + + + diff --git a/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap b/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap new file mode 100644 index 00000000000..fca9ceae155 --- /dev/null +++ b/apps/dav/src/views/__snapshots__/CalDavSettings.spec.js.snap @@ -0,0 +1,146 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CalDavSettings interactions 1`] = ` +
+
+

+ Calendar server +

+ +

+ Also install the + + Calendar app + + , or + + connect your desktop & mobile for syncing ↗ + + . +

+ +

+ + + + +
+ + + Please make sure to properly set up + + the email server + + . + +

+ +

+ + + + +
+ + + + Birthday calendars will be generated by a background job. + + + +
+ + + + Hence they will not be available immediately after enabling but will show up after some time. + + +

+ +

+ + + + +
+ + + Please make sure to properly set up + + the email server + + . + + +
+ + + + Notifications are sent via background jobs, so these must occur often enough. + + +

+ +

+ + + +

+
+
+`; -- cgit v1.2.3