Merge pull request #71 from mollie/feature/MOL-438/PICT-252

Feature/mol 438/pict 252

Author: tdang1-shopmacher

application/.eslintrc.ts renamed to application/.eslintrc.js

@@ -5,7 +5,7 @@ process.env.ENABLE_NEW_JSX_TRANSFORM = 'true';
  */
 module.exports = {
   extends: ['@commercetools-frontend/eslint-config-mc-app'],
-  plugins: ['graphql'],
+  plugins: ['graphql', 'cypress'],
   overrides: [
     {
       files: ['**/*.ctp.graphql'],

application/custom-application-config.ts

@@ -34,10 +34,7 @@ const config = {
   },
   headers: {
     csp: {
-      'connect-src': [
-        '*.europe-west1.gcp.commercetools.app',
-        '*.europe-west1.gcp.commercetools.com',
-      ],
+      'connect-src': ['*.euope-west1.gcp.commercetoolsr.app'],
     },
   },
 };

application/cypress.config.ts

@@ -20,7 +20,6 @@ export default defineConfig({
       }
 
       on('task', { customApplicationConfig });
-      // on('task', { customViewConfig });
       return {
         ...cypressConfig,
         env: {

application/cypress/e2e/welcome.cy.ts

@@ -1,17 +1,59 @@
+/// <reference types="cypress" />
+/// <reference types="@testing-library/cypress" />
+/// <reference types="@commercetools-frontend/cypress" />
+
 import {
   entryPointUriPath,
   APPLICATION_BASE_ROUTE,
 } from '../support/constants';
 
-describe('Test welcome.cy.', () => {
+describe('Test welcome.cy.ts', () => {
   beforeEach(() => {
     cy.loginToMerchantCenter({
       entryPointUriPath,
       initialRoute: APPLICATION_BASE_ROUTE,
     });
   });
-  it('should render page', () => {
-    cy.findByText('Mollie').should('exist');
-    cy.findByText('Content will follow...').should('exist');
+  it('should render payment methods list', () => {
+    cy.fixture('forward-to').then((response) => {
+      cy.intercept('GET', '/proxy/forward-to', {
+        statusCode: 200,
+        body: response,
+      });
+    });
+
+    const paymentMethods = [
+      'PayPal',
+      'iDEAL Pay in 3 instalments, 0% interest',
+      'iDEAL',
+      'Bancontact',
+      'Blik',
+    ];
+
+    const headers = ['Payment method', 'Active', 'Icon', 'Display order'];
+
+    cy.findByText('Mollie payment methods').should('exist');
+    cy.findByText('Content will follow...').should('not.exist');
+
+    headers.forEach((header) => {
+      cy.findByText(header).should('exist');
+    });
+
+    paymentMethods.forEach((paymentMethod) => {
+      cy.findByText(paymentMethod).should('exist');
+    });
+  });
+
+  it('should render no data notification', () => {
+    cy.fixture('forward-to').then((response) => {
+      cy.intercept('GET', '/proxy/forward-to', {
+        statusCode: 200,
+        body: {},
+      });
+    });
+
+    cy.findByText('Mollie payment methods').should('exist');
+    cy.findByText('Content will follow...').should('not.exist');
+    cy.get('[data-testid="no-data-notification"]').should('exist');
   });
 });