Initial Commit

.gitignore

@@ -0,0 +1,3 @@
+/node_modules
+/.idea
+.DS_Store

CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+
+## [1.0.0]
+
+### Added
+
+- Initial version of the Cypress Mollie Actions.

LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+Copyright (c) 2022 Christian Dangl
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,72 @@
+<p align="center">
+   <img width="200px" src="/assets/cypress.jpg">
+</p>
+<h1 align="center">Mollie Actions for Cypress</h1>
+
+
+![NPM Downloads](https://badgen.net/npm/dt/cypress-mollie) ![GitHub release (latest by date)](https://img.shields.io/github/v/release/boxblinkracer/cypress-mollie) ![NPM License](https://img.shields.io/npm/l/cypress-mollie)
+
+This is a package of actions that you can use in Cypress when writing tests for Mollie (www.mollie.com).
+It covers easy actions to fill in credit card data, set a payment status and other things on the sandbox pages of Mollie.
+
+
+### Requirements
+Your Cypress project needs to be setup correctly to allow cross-domain switching within tests and also your cookies may need to be persisted and configured correctly.
+Please see this post for more. It will explain everything in detail:
+
+> https://boxblinkracer.com/blog/cypress-shopware-mollie
+
+
+
+### 1. Installation
+
+```ruby 
+npm i cypress-mollie --save-dev
+```
+
+
+### 2. Use Actions
+Depending on your payment methods, you might need to use different actions.
+
+However, every test needs to start with the `MollieSandbox.js` and the cookie preparation.
+Some payment methods will then show a custom screen, such as credit cards, iDEAL and more.
+If not, or after such a screen, there will always be the payment status page where you can
+simply use the actions of the `PaymentStatusScreen.js`.
+
+
+```javascript 
+const mollieSandbox = new MollieSandbox();
+const mollieCreditCardForm = new CreditCardScreen();
+const molliePayment = new PaymentStatusScreen();
+
+it('Checkout with Credit Card', () => {
+
+    // ....prepare checkout in your shop where credit card is used
+    // ....once redirect to Mollie do this (below)....
+
+    // required for the CSRF tokens ;)
+    mollieSandbox.initSandboxCookie();
+
+    // if we have a special form such as credit card, iDEAL or more
+    // use the corresponding action for that screen
+    mollieCreditCardForm.setCardHolder('Cypress Test');
+    mollieCreditCardForm.setCardNumber('3782 822463 10005');
+    mollieCreditCardForm.setExpiryDate('1245');
+    mollieCreditCardForm.setVerificationCode('1234');
+    mollieCreditCardForm.submitForm();
+
+    // now we are on the status page
+    // just select something like paid
+    mollieStatus.paid();
+})
+```
+
+## That's it!
+
+You should now be able to easily work with the Mollie sandbox page.
+If you have troubles with cross-domain navigation in Cypress and Mollie, please see this post: https://boxblinkracer.com/blog/cypress-shopware-mollie
+
+
+### Copying / License
+
+This repository is distributed under the MIT License (MIT). You can find the whole license text in the [LICENSE](LICENSE) file.

package.json

@@ -0,0 +1,20 @@
+{
+    "name": "cypress-mollie",
+    "version": "1.0.0",
+    "description": "Prepared Mollie Actions for Cypress",
+    "main": "index.js",
+    "private": false,
+    "keywords": [
+        "mollie",
+        "cypress",
+        "payment"
+    ],
+    "author": {
+        "name": "Christian Dangl"
+    },
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/boxblinkracer/cypress-mollie.git"
+    }
+}

src/actions/MollieSandbox.js

@@ -0,0 +1,30 @@
+export default class MollieSandbox {
+
+    /**
+     * This function is very important.
+     * Call it in the "before" or within your test, that uses
+     * the Mollie sandbox page.
+     * It will prepare the required cookies for the sandbox page,
+     * and also modify its sameSite property to be recognized using
+     * cross-domain cypress tests.
+     * If this is not called, the sandbox page cannot be submitted
+     * (token expires error will be visible).
+     */
+    initSandboxCookie() {
+
+        cy.setCookie(
+            'SESSIONID',
+            "cypress-dummy-value",
+            {
+                domain: '.www.mollie.com',
+                sameSite: 'None',
+                secure: true,
+                httpOnly: true
+            }
+        );
+
+        cy.reload();
+    }
+
+}
+

src/actions/screens/CreditCardScreen.js

@@ -0,0 +1,78 @@
+export default class CreditCardScreen {
+
+    /**
+     *
+     */
+    enterValidCard() {
+        const currentYear = new Date().getFullYear().toString().substr(-2);
+
+        this.setCardHolder('Cypress Test');
+        this.setCardNumber('3782 822463 10005');
+        this.setExpiryDate('12' + (currentYear + 1));
+        this.setVerificationCode('1234');
+    }
+
+    /**
+     *
+     * @param name
+     */
+    setCardHolder(name) {
+        cy.wait(200);
+        cy.get('iframe[name="cardHolder-input"]').then($element => {
+            const $body = $element.contents().find('body')
+            cy.wrap($body).find('#cardHolder').eq(0).click();
+            cy.wait(10);
+            cy.wrap($body).find('#cardHolder').eq(0).type(name);
+        })
+    }
+
+    /**
+     *
+     * @param number
+     */
+    setCardNumber(number) {
+        cy.wait(200);
+        cy.get('iframe[name="cardNumber-input"]').then($element => {
+            const $body = $element.contents().find('body')
+            cy.wrap($body).find('#cardNumber').eq(0).click();
+            cy.wait(10);
+            cy.wrap($body).find('#cardNumber').eq(0).type(number);
+        })
+    }
+
+    /**
+     *
+     * @param expiryDate
+     */
+    setExpiryDate(expiryDate) {
+        cy.wait(200);
+        cy.get('iframe[name="expiryDate-input"]').then($element => {
+            const $body = $element.contents().find('body')
+            cy.wrap($body).find('#expiryDate').eq(0).click();
+            cy.wait(10);
+            cy.wrap($body).find('#expiryDate').eq(0).type(expiryDate);
+        })
+    }
+
+    /**
+     *
+     * @param cvc
+     */
+    setVerificationCode(cvc) {
+        cy.wait(200);
+        cy.get('iframe[name="verificationCode-input"]').then($element => {
+            const $body = $element.contents().find('body')
+            cy.wrap($body).find('#verificationCode').eq(0).click();
+            cy.wait(10);
+            cy.wrap($body).find('#verificationCode').eq(0).type(cvc);
+        })
+    }
+
+    /**
+     *
+     */
+    submitForm() {
+        cy.get('#submit-button').click();
+    }
+
+}

src/actions/screens/GiftCardsScreen.js

@@ -0,0 +1,11 @@
+export default class GiftCardsScreen {
+
+    /**
+     *
+     */
+    selectBeautyCards() {
+        cy.contains('BeautyCadeau').click();
+    }
+
+}
+

src/actions/screens/IssuerScreen.js

@@ -0,0 +1,18 @@
+export default class IssuerScreen {
+
+    /**
+     *
+     */
+    selectIDEAL() {
+        cy.get('button[value="ideal_ABNANL2A"]').click();
+    }
+
+    /**
+     *
+     */
+    selectKBC() {
+        cy.get('button[value="kbc"]').click();
+    }
+
+}
+

src/actions/screens/PaymentListScreen.js

@@ -0,0 +1,11 @@
+export default class PaymentListScreen {
+
+    /**
+     *
+     */
+    selectPaypal() {
+        cy.contains('PayPal').click();
+    }
+
+}
+

src/actions/screens/PaymentStatusScreen.js

@@ -0,0 +1,101 @@
+export default class PaymentStatusScreen {
+
+
+
+    /**
+     *
+     */
+    selectOpen() {
+        cy.get('input[value="open"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectPaid() {
+        cy.get('input[value="paid"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectPending() {
+        cy.get('input[value="pending"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectAuthorized() {
+
+        cy.get('input[value="authorized"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectFailed() {
+
+        cy.get('input[value="failed"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectCancelled() {
+
+        cy.get('input[value="canceled"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectExpired() {
+
+        cy.get('input[value="expired"]').click();
+
+        this._clickSubmit();
+    }
+
+    /**
+     *
+     */
+    selectIDEALIssuerABA() {
+        cy.get('button[value="ideal_ABNANL2A"]').click();
+    }
+
+    /**
+     *
+     */
+    selectCBCIssuerKBC() {
+        cy.get('button[value="KBC"]').click();
+    }
+
+    /**
+     *
+     */
+    selectGiropay() {
+        cy.contains('giropay').click();
+    }
+
+    /**
+     *
+     * @private
+     */
+    _clickSubmit() {
+        cy.get('.button').click();
+    }
+
+}

src/actions/screens/VoucherScreen.js

@@ -0,0 +1,11 @@
+export default class VoucherScreen {
+
+    /**
+     *
+     */
+    selectMonizze() {
+        cy.contains('Monizze Eco').click();
+    }
+
+}
+