diff --git a/application/cypress.config.ts b/application/cypress.config.ts index c229b72..de59fba 100644 --- a/application/cypress.config.ts +++ b/application/cypress.config.ts @@ -28,6 +28,7 @@ export default defineConfig({ LOGIN_PASSWORD: process.env.CYPRESS_LOGIN_PASSWORD, PROJECT_KEY: process.env.CYPRESS_PROJECT_KEY, PACKAGE_NAME: process.env.CYPRESS_PACKAGE_NAME, + LOCALE: process.env.CYPRESS_LOCALE || 'en-GB', }, }; }, diff --git a/application/cypress/.env.example b/application/cypress/.env.example index 7062bf0..1e18dc4 100644 --- a/application/cypress/.env.example +++ b/application/cypress/.env.example @@ -2,4 +2,5 @@ CYPRESS_LOGIN_USER= CYPRESS_LOGIN_PASSWORD= CYPRESS_PROJECT_KEY= CYPRESS_PACKAGE_NAME="application" -CYPRESS_BASE_URL="https://mc.europe-west1.gcp.commercetools.com/" \ No newline at end of file +CYPRESS_BASE_URL="https://mc.europe-west1.gcp.commercetools.com/" +CYPRESS_LOCALE="en-GB" \ No newline at end of file diff --git a/application/cypress/e2e/method-details.cy.ts b/application/cypress/e2e/method-details.cy.ts new file mode 100644 index 0000000..069e4b8 --- /dev/null +++ b/application/cypress/e2e/method-details.cy.ts @@ -0,0 +1,60 @@ +/// +/// +/// + +import { + entryPointUriPath, + APPLICATION_BASE_ROUTE, +} from '../support/constants'; +beforeEach(() => { + cy.loginToMerchantCenter({ + entryPointUriPath, + initialRoute: APPLICATION_BASE_ROUTE, + }); + + cy.fixture('forward-to').then((response) => { + cy.intercept('GET', '/proxy/forward-to', { + statusCode: 200, + body: response, + }); + }); +}); + +describe('Test welcome.cy.ts', () => { + it('should render method details page', () => { + const LOCALE = Cypress.env('LOCALE'); + const paymentMethods = [ + 'PayPal', + 'iDEAL Pay in 3 instalments, 0% interest', + 'iDEAL', + 'Bancontact', + 'Blik', + ]; + + cy.findByText(paymentMethods[0]).click(); + cy.url().should('contain', 'general'); + + cy.findByTestId('status-select').should('exist'); + + cy.findByTestId(`name-input-${LOCALE}`).should('exist'); + cy.findByTestId(`description-input-${LOCALE}`).should('exist'); + cy.findByTestId(`display-order-input`).should('exist'); + }); + + it('should update display order successfully', () => { + const paymentMethodIds = ['paypal', 'ideal', 'bancontact']; + + cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).click(); + cy.url().should('contain', 'general'); + + cy.findByTestId(`display-order-input`).should('exist'); + cy.findByTestId(`display-order-input`).clear(); + cy.findByTestId(`display-order-input`).type('20'); + cy.findByTestId(`save-button`).click(); + cy.findByLabelText('Go back').click(); + cy.findByTestId(`display-order-column-${paymentMethodIds[0]}`).should( + 'have.text', + 20 + ); + }); +}); diff --git a/application/cypress/fixtures/objects-paginated.json b/application/cypress/fixtures/objects-paginated.json new file mode 100644 index 0000000..4d2a73f --- /dev/null +++ b/application/cypress/fixtures/objects-paginated.json @@ -0,0 +1,345 @@ +{ + "results": [ + { + "id": "e768b373-f0c5-4122-a689-105e5382f6ee", + "container": "sctm-app-methods", + "key": "applepay", + "value": { + "id": "applepay", + "name": { + "en-GB": "Apple Pay" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/applepay.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "d8776b79-b5bf-4451-a14e-4852ecc8c0f7", + "container": "sctm-app-methods", + "key": "bancomatpay", + "value": { + "id": "bancomatpay", + "name": { + "en-GB": "Bancomat Pay" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/bancomatpay.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "1756102e-9656-4fec-a18c-2e5144ddd2ae", + "container": "sctm-app-methods", + "key": "bancontact", + "value": { + "id": "bancontact", + "name": { + "en-GB": "Bancontact" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/bancontact.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "ad7608bf-6cb7-4f2c-894e-a90cb4517bd3", + "container": "sctm-app-methods", + "key": "banktransfer", + "value": { + "id": "banktransfer", + "name": { + "en-GB": "Bank transfer" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/banktransfer.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "c2b0ed91-330f-48e2-8e7a-3b90d15b2340", + "container": "sctm-app-methods", + "key": "belfius", + "value": { + "id": "belfius", + "name": { + "en-GB": "Belfius Pay Button" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/belfius.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "adcc987d-c981-4906-a3ad-f5800d645775", + "container": "sctm-app-methods", + "key": "billie", + "value": { + "id": "billie", + "name": { + "en-GB": "Pay by Invoice for Businesses - Billie" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/billie.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "127d4d21-2b95-46f9-9a68-2490e5182ae5", + "container": "sctm-app-methods", + "key": "blik", + "value": { + "id": "blik", + "name": { + "en-GB": "Blik" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/blik.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "5fc3b28c-9282-4cb3-ba8a-3329c076509c", + "container": "sctm-app-methods", + "key": "creditcard", + "value": { + "id": "creditcard", + "name": { + "en-GB": "Card" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/creditcard.svg", + "status": "Inactive", + "displayOrder": 1 + }, + "__typename": "CustomObject" + }, + { + "id": "9882ab6d-c534-4a42-83f1-efc13d37e703", + "container": "sctm-app-methods", + "key": "directdebit", + "value": { + "id": "directdebit", + "name": { + "en-GB": "SEPA Direct Debit" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/directdebit.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "d414c2b2-6a88-4712-b143-ef463605c967", + "container": "sctm-app-methods", + "key": "eps", + "value": { + "id": "eps", + "name": { + "en-GB": "eps" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/eps.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "0b58a6db-affe-4cb1-97cf-e2e22de87f32", + "container": "sctm-app-methods", + "key": "giftcard", + "value": { + "id": "giftcard", + "name": { + "en-GB": "Gift cards" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/giftcard.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "1126f6b9-5e7b-4b74-9fad-9b47ed1f43bd", + "container": "sctm-app-methods", + "key": "ideal", + "value": { + "id": "ideal", + "name": { + "en-GB": "iDEAL" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/ideal.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "0fd7e27b-b6c4-4766-bf23-51deb2762155", + "container": "sctm-app-methods", + "key": "in3", + "value": { + "id": "in3", + "name": { + "en-GB": "iDEAL Pay in 3 instalments, 0% interest" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/in3.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "b26b5a51-4653-4dfd-aa61-3613605b1f2d", + "container": "sctm-app-methods", + "key": "kbc", + "value": { + "id": "kbc", + "name": { + "en-GB": "KBC/CBC Payment Button" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/kbc.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "37feebf9-be78-46d8-9f4e-eace2928f1cd", + "container": "sctm-app-methods", + "key": "klarna", + "value": { + "id": "klarna", + "name": { + "en-GB": "Pay with Klarna" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/klarna.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "1a2e480c-1a83-4d0d-ab4a-3859cf6a18e6", + "container": "sctm-app-methods", + "key": "paypal", + "value": { + "id": "paypal", + "name": { + "en-GB": "PayPal" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/paypal.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "eb982dd3-1b4f-4571-8ee1-ac1568cf5ec2", + "container": "sctm-app-methods", + "key": "przelewy24", + "value": { + "id": "przelewy24", + "name": { + "en-GB": "Przelewy24" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/przelewy24.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "cffb9dc2-7fe7-4577-80fa-c855bdde1a22", + "container": "sctm-app-methods", + "key": "trustly", + "value": { + "id": "trustly", + "name": { + "en-GB": "Trustly" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/trustly.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "09aa39b3-6c65-47d4-a3e9-32d7d1c86172", + "container": "sctm-app-methods", + "key": "twint", + "value": { + "id": "twint", + "name": { + "en-GB": "TWINT" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/twint.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + }, + { + "id": "4d9bbe29-0c27-4bde-bf03-3d73489ec9f0", + "container": "sctm-app-methods", + "key": "voucher", + "value": { + "id": "voucher", + "name": { + "en-GB": "Vouchers" + }, + "description": { + "en-GB": "" + }, + "imageUrl": "https://www.mollie.com/external/icons/payment-methods/voucher.svg", + "status": "Inactive" + }, + "__typename": "CustomObject" + } + ] +} diff --git a/application/src/components/method-details/method-details-form.tsx b/application/src/components/method-details/method-details-form.tsx index b6dfe6e..ffc4ebb 100644 --- a/application/src/components/method-details/method-details-form.tsx +++ b/application/src/components/method-details/method-details-form.tsx @@ -72,6 +72,7 @@ const MethodDetailsForm = (props: TCustomObjectDetailsFormProps) => { } return null; }} + data-testid="name-input" /> { } return null; }} + data-testid="description-input" /> { } return null; }} + data-testid="display-order-input" > { ]} horizontalConstraint={4} controlShouldRenderValue={true} - data-cy={'active-select'} + data-testid={'status-select'} isSearchable={false} > { isDisabled={ formProps.isSubmitting || !formProps.isDirty || !canManage } - dataAttributes={{ 'data-cy': 'save-button' }} + dataAttributes={{ 'data-testid': 'save-button' }} /> } diff --git a/application/src/components/welcome/welcome.spec.tsx b/application/src/components/welcome/welcome.spec.tsx index 162edee..5f6f899 100644 --- a/application/src/components/welcome/welcome.spec.tsx +++ b/application/src/components/welcome/welcome.spec.tsx @@ -4,6 +4,7 @@ import { } from '@commercetools-frontend/application-shell/test-utils'; import { setupServer } from 'msw/node'; import ForwardToFixture from '../../../cypress/fixtures/forward-to.json'; +import ObjectsPaginated from '../../../cypress/fixtures/objects-paginated.json'; import messages from './messages'; import { useCustomObjectsFetcher, @@ -30,22 +31,23 @@ jest.mock('../../hooks/use-mollie-connector', () => ({ const mockMethods = ForwardToFixture._embedded.methods.map((method) => { return { id: method.id, - description: method.description, + description: { + 'en-GB': '', + }, + name: { + 'en-GB': method.description, + }, status: method.status === 'active' ? 'Active' : 'Inactive', imageUrl: method.image.svg, displayOrder: 0, }; }); -const mockMethodNames = ForwardToFixture._embedded.methods.map((method) => { - return method.description; -}); - const mockColumns = Object.values(messages) .filter((message) => [ - 'Welcome.descriptionHeader', 'Welcome.statusHeader', + 'Welcome.nameHeader', 'Welcome.iconHeader', 'Welcome.displayOrderHeader', ].includes(message.id) @@ -56,7 +58,7 @@ const mockServer = setupServer(); afterEach(() => mockServer.resetHandlers()); beforeEach(() => { (useCustomObjectsFetcher as jest.Mock).mockReturnValue({ - customObjectsPaginatedResult: { results: [] }, + customObjectsPaginatedResult: ObjectsPaginated, error: null, loading: false, }); @@ -71,7 +73,7 @@ beforeEach(() => { }); (useCustomObjectDetailsUpdater as jest.Mock).mockReturnValue({ - execute: jest.fn(), + execute: jest.fn().mockResolvedValue({}), }); }); beforeAll(() => @@ -108,8 +110,10 @@ describe('Test welcome.tsx', () => { expect(screen.getByTestId('status-tooltip')).toBeInTheDocument(); - mockMethodNames.forEach((name) => { - expect(screen.getByText(name)).toBeInTheDocument(); + mockMethods.forEach((method) => { + expect( + screen.getByTestId(`name-column-${method.id}`) + ).toBeInTheDocument(); }); }); diff --git a/application/src/components/welcome/welcome.tsx b/application/src/components/welcome/welcome.tsx index 65d1348..e5eb105 100644 --- a/application/src/components/welcome/welcome.tsx +++ b/application/src/components/welcome/welcome.tsx @@ -175,19 +175,23 @@ const Welcome = () => { ); case 'name': - return item.name - ? formatLocalizedString( - { - name: item.name, - }, - { - key: 'name', - locale: dataLocale, - fallbackOrder: projectLanguages, - fallback: NO_VALUE_FALLBACK, - } - ) - : item.description; + return ( + + {item.name + ? formatLocalizedString( + { + name: item.name, + }, + { + key: 'name', + locale: dataLocale, + fallbackOrder: projectLanguages, + fallback: NO_VALUE_FALLBACK, + } + ) + : item.description} + + ); case 'image': return ( { > ); case 'order': - return item.displayOrder ?? '-'; + return ( + + {item.displayOrder ?? '-'} + + ); default: return null; }