Write Cypress tests

cypress/integration/User.SettingNotifications.feature

@@ -0,0 +1,20 @@
+Feature: User sets donations info settings
+  As a user
+  I want to change my notifications settings
+  In order to manage the notifications
+
+  Background:
+    Given the following "users" are in the database:
+      | email                | password | id              | name      | slug      | termsAndConditionsAgreedVersion |
+      | peterpan@example.org | 123      | id-of-peter-pan | Peter Pan | peter-pan | 0.0.4                           |
+      | user@example.org     | 123      | user            | User      | user      | 0.0.4                           |
+    And I am logged in as "peter-pan"
+
+  Scenario: The notifications setting "Send e-mail notifications" is set to true by default and can be set to false
+    # When I navigate to my "Notifications" settings page
+    When I navigate to page "/settings/notifications"
+    Then the checkbox with ID "send-email" should "be.checked"
+    And I click on element with ID "send-email"
+    And the checkbox with ID "send-email" should "not.be.checked"
+    Then I click save
+    And I see a toaster with "Notifications settings saved!"

cypress/integration/User.SettingNotifications/I_click_on_element_with_ID_{string}.js

@@ -0,0 +1,5 @@
+import { When } from "cypress-cucumber-preprocessor/steps";
+
+When("I click on element with ID {string}", (id) => {
+  cy.get('#' + id).click()
+})

cypress/integration/User.SettingNotifications/I_click_save.js

@@ -0,0 +1,5 @@
+import { Then } from "cypress-cucumber-preprocessor/steps";
+
+Then("I click save", () => {
+  cy.get(".save-button").click()
+})

cypress/integration/User.SettingNotifications/I_click_the_checkbox_show_donations_progress_bar_and_save.js

@@ -0,0 +1,6 @@
+import { Then } from "cypress-cucumber-preprocessor/steps";
+
+Then("I click the checkbox show donations progress bar and save", () => {
+  cy.get("#showDonations").click()
+  cy.get(".donations-info-button").click()
+})

cypress/integration/common/I_see_a_{string}_message.js

@@ -1,5 +1,5 @@
 import { Then } from "cypress-cucumber-preprocessor/steps";
 
-Then("I see a {string} message:", (type, message) => {
+Then("I see a {string} message:", (_type, message) => {
   cy.contains(message);
 });

cypress/integration/common/the_checkbox_with_ID_{string}_should_{string}.js

@@ -0,0 +1,5 @@
+import { When } from "cypress-cucumber-preprocessor/steps";
+
+When("the checkbox with ID {string} should {string}", (id, value) => {
+  cy.get('#' + id).should(value)
+})

webapp/pages/settings/notifications.vue

@@ -5,7 +5,9 @@
       <input id="send-email" type="checkbox" v-model="notifyByEmail" />
       <label for="send-email">{{ $t('settings.notifications.send-email-notifications') }}</label>
     </ds-space>
-    <base-button filled @click="submit" :disabled="disabled">{{ $t('actions.save') }}</base-button>
+    <base-button class="save-button" filled @click="submit" :disabled="disabled">
+      {{ $t('actions.save') }}
+    </base-button>
   </base-card>
 </template>