woocommerce/plugins/woocommerce-blocks/assets/js/blocks/cart/test/block.js

259 lines
7.9 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
import { render, screen, waitFor, act } from '@testing-library/react';
import { previewCart } from '@woocommerce/resource-previews';
import { dispatch } from '@wordpress/data';
import { CART_STORE_KEY as storeKey } from '@woocommerce/block-data';
Add TypeScript support and convert cart data store to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/3768) * add typescript support * Add type declarations for Cart and CartResponse interfaces * make sure we’re resolving .ts files as well as .js files on imports * add more types * type the cart data store * Apply suggestions from code review (implement .tsx in configs) Co-authored-by: Jon Surrell <jon.surrell@automattic.com> * remove global fetchMock declaration and directly import where used. * rename type * remove named action types and just infer by returning action creator values as const * use interface instead of type * rename * renames * create CartAction type as union of action creator returned types and implement in reducer * remove unused imports * refresh package-lock after rebase * Add base TS config that projects will inherit from * Add tsconfig for assets/js/data project * Ignore TS error on cart store registration We will address this in cooldown when we have time to investigate further * Add tsc to build step to catch TypeScript errors * add a separate command for tsc and tweak build command to use * restore checkJs and allowJs values in config and remove ts check from build command * Add ts:check-all command * Add TypeScript checking workflows * Change triggers for TypeScript workflow * Use npm ci instead of npm install * Remove ts:check-all from TypeScript workflow * Remove TS Check GitHub workflow * Remove type-defs dir from TS include, and remove ts:check-all script We no longer need the ts:check-all script because ts:check will do this for us, the old ts:check did nothing and did not work. * fix coupon loading issues * include .ts files only from type-defs folder Co-authored-by: Jon Surrell <jon.surrell@automattic.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2021-02-24 01:36:24 +00:00
import { default as fetchMock } from 'jest-fetch-mock';
import { registerCheckoutFilters } from '@woocommerce/blocks-checkout';
/**
* Internal dependencies
*/
Feature: Data Store Migration - Payments (https://github.com/woocommerce/woocommerce-blocks/pull/6619) * Move paymentMethodDataProvider into a data store (https://github.com/woocommerce/woocommerce-blocks/pull/6208) * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Use correct key in payment method data context * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Fix linting issues Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Alex Florisca <alex.florisca@automattic.com> * Rebase on the update/checkout-data-store branch & Fix failed payments (https://github.com/woocommerce/woocommerce-blocks/pull/6587) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Fix merge conflict error * Set & get the provider's state from our data store instead of React's useReducer (https://github.com/woocommerce/woocommerce-blocks/pull/6588) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Get payment method data directly from the data store instead of the usePaymentMethodDataContext hook (https://github.com/woocommerce/woocommerce-blocks/pull/6589) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Refactor the payment method data store & context (https://github.com/woocommerce/woocommerce-blocks/pull/6607) * Add checkout data store * wip on checkout data store * CheckoutContext now uses the checkout store * Investigated and removed setting the redirectUrl on the default state * update extension and address hooks to use checkout data store * use checkout data store in checkout-processor and use-checkout-button * trim useCheckoutContext from use-payment-method-interface && use-store-cart-item-quantity * Remove useCheckoutContext from shipping provider * Remove isCalculating from state * Removed useCheckoutContext from lots of places * Remove useCheckoutContext from checkout-payment-block * Remove useCheckoutContext in checkout-shipping-methods-block and checkout-shipping-address-block * add isCart selector and action and update the checkoutstate context * Fixed redirectUrl bug by using thunks * Remove dispatchActions from checkout-state * Change SET_HAS_ERROR action to be neater * Thomas' feedback * Tidy up * Oops, deleted things I shouldn't have * Typescript * Fix types * Fix tests * Remove isCart * Update docs and remove unecessary getRedirectUrl() selector * set correct type for preloadedCheckoutData * Remove duplicate Address type * Fix missing addresses from type-defs index * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Update docs/block-client-apis/checkout/checkout-api.md Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> * Revert feedback changes * REvert feedback formatting * Update docs formatting * Fix typographical error on LegacyRegisterExpressPaymentMethodFunction type * Add default state for PaymentMethod data store * Add preliminary action types * Add preliminary action dispatchers * Create payment method data store * Add preliminary reducers for payment method data store * Add preliminary selectors for payment method data store * Add reducers/actions for registering payment methods * Export payment method data store key * Add test for payment method data reducers * Add shouldSavePaymentMethod selector * Add store key as constant * Add more action types for registering and initializing payment methods * Get active payment method from data store instead of from context * Add registered methods to default state of payment method data store * Dispatch name of registered payment method to payment method data store * Remove setShouldSavePayment from payment method dispatcher and types * Get payment methods from registry instead of payment context * Add available payment methods to store * Add function to check whether payment methods are allowed to be used * Add selector to check if payments are initialised * Remove resolvers and add controls to payment method data store * Change type of payment requirements to string[] * Turn addRegistered and addRegisteredExpress into generators This is so we can check each payment method's validity before adding it to the list of available payment methods * Add action type for setting express payments as initialized * Only select from available methods in payment method options * Remove argument from addRegisteredPaymentMethod in payment method registry * Rename folder and store name to not contain the word data * Add selectors for express payment methods and their initialisation * Delete controls again in favour of thunks * Rename payment-method-data to payment-methdods * Create new setDefaultPaymentMethod function This will set the payment method when the cart loads. * Add CustomerPaymentMethodConfiguration type * Make getAvailableExpressPaymentMethods return correct data * Check express methods and normal methods when cart changes * Add action for setting active express payment methods * Handle express methods in checkPaymentMethodCanPay * Hide express payments area if none are available * Add selector for paymentMethodData * Add customer data to default state and add selector for it * Add setPaymentStatus action and reducer case * Set the default payment method when one isn't selected * Correct types on getCustomerPaymentMethods * Set status in data store alongside context status * Comment out active gateway selection - remove later * Set status in express payment methods in data store * Directly check payment methods from the list in blocks-registry * Add semicolon to import statement * Fix payment method data state call * Get paymentMethodData from store not context * Add addPaymentMethodData action/reducer case * Update payment method on payment success * Add 'getCurrentStatus' selector * Remove the temporary solution For getting payment method data into the data store * Prevent the 'success' context action from being dispatched * Update the "setPaymentStatus" data store action Accept status as an object instead of string * Fix the "currentStatus" reducer state update value * Get payment data into data store * Set the correct payment status to data store * Get the success status of payment from data store * Use store data in the payment dispatchers Replace the React useReducers action in the payment dispatchers file with the payment method data store * Get payment status from data store * Use data store for the payment error status * Use payment data store failed status * Use payment data store for the isFinished status * Update the setPaymentStatus argument * Set up setRegisteredPaymentMethods in data store * Use the data store version of the registeredPaymentMethods * Fix the default state type of the registeredPaymentMethods * Set up setRegisteredExpressPaymentMethod in data store * Use the data version of the registred express payment methods * Set the correct action type for removing payment methods * Fix default state express payment methods type * Use the store data version of activePaymentMethod * Use setActivePaymentMethod in the dispatchers file And refactor code * Update payment status arguments for express payment methods * Use paymentMethodData from the data store * Use payment method's errorMessage from data store * Update paymentMethods list in data store reducer * Replace remaining payment context data with data store * Clean up payment method context file * Get payment method state from data store in the checkout submit hook * Copy types.ts file into the payment data store folder * Fix isExpressPaymentMethodActive selector * Move the entire currentStatus into the data store * Replace the payment context state with the data store * Fix getActiveSavedToken & clean up the context file * Use the accutrate name of the "createErrorNotice" * Update the payment method data store key import * Diable unused state from the context * Get enabled customer payment methods using data store selector * Remove remaining useReducer action from the dispatchers file * Update types and remove unused vars * Remove the payment method dispatchers hook * Refactor & clean up (remove unused files) * Remove commented line from payment methods types * Move event emitter into thunks Co-authored-by: Alex Florisca <alex.florisca@automattic.com> Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com> * Remove checkout-state after merge conflicts * Fix linting errors * Move types to types.ts * Move default states into respective store folders * Fix types and add comment * Move setExpressPaymentError to payment-methods store * fix express payment methods not showing up * Check if payment method is active from the state * Add comments * Remove commented out code in payment method data context * Display an error in the check-payment-methods directly from data store * Remove use-emit-response hook and move utils in event-emit/utils.ts * Use correct action property to remove payment methods * Fix formatting * Only try to initialize payment methods when cart is done loading * Add function to order payment methods from server * Add payment methods in the correct order * Prevent adding registered payment methods before cart is ready * Ensure payment methods get removed from state when deregistered * Reorder setting default payment methods to add customer methods first * Get customer methods from store not context * Remove error from payment-method state and associated selectors * Remove use-payment-method-registration and update the payment method state to remove the duplicated registeredPaymentMethods * Remove errorMessage from payment-methods store * Rename customerPaymentMethods -> savedPaymentMethods * Order payment methods when validating * Refactor payment-methods.js * Fix "Payment methods not set in editor" woocommerce/woocommerce-blocks#6655 bug We never get to load the payment methods object in the editor mode because there are no cart totals to load. * Initialize payment methods when available payments are loaded * Remove duplicate code * Fix data store state mutation anti-pattern A Redux rule is to never mutate the state in a reducer to avoid any unexpected results * Set availablePaymentMethods to the paymentMethods object Instead of its keys. We can get the keys using "Object.keys". * Use the available ordered payment methods The `getPaymentMethods` & `getExpressPaymentMethods` may include unordored & unavailable payment methods. * Get the correct value from the emit event response Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com> Co-authored-by: Saad Tarhi <saad.trh@gmail.com> Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
2022-07-08 05:53:24 +00:00
import { defaultCartState } from '../../../data/cart/default-state';
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
import { allSettings } from '../../../settings/shared/settings-init';
import Cart from '../block';
import FilledCart from '../inner-blocks/filled-cart-block/frontend';
import EmptyCart from '../inner-blocks/empty-cart-block/frontend';
import ItemsBlock from '../inner-blocks/cart-items-block/frontend';
import TotalsBlock from '../inner-blocks/cart-totals-block/frontend';
import LineItemsBlock from '../inner-blocks/cart-line-items-block/block';
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
import OrderSummaryBlock from '../inner-blocks/cart-order-summary-block/frontend';
import ExpressPaymentBlock from '../inner-blocks/cart-express-payment-block/block';
import ProceedToCheckoutBlock from '../inner-blocks/proceed-to-checkout-block/block';
import AcceptedPaymentMethodsIcons from '../inner-blocks/cart-accepted-payment-methods-block/block';
import OrderSummaryHeadingBlock from '../inner-blocks/cart-order-summary-heading/frontend';
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
import OrderSummarySubtotalBlock from '../inner-blocks/cart-order-summary-subtotal/frontend';
import OrderSummaryShippingBlock from '../inner-blocks/cart-order-summary-shipping/frontend';
import OrderSummaryTaxesBlock from '../inner-blocks/cart-order-summary-taxes/frontend';
const CartBlock = ( {
attributes = {
showRateAfterTaxName: false,
isShippingCalculatorEnabled: false,
checkoutPageId: 0,
},
} ) => {
const {
showRateAfterTaxName,
isShippingCalculatorEnabled,
checkoutPageId,
} = attributes;
return (
<Cart attributes={ attributes }>
<FilledCart>
<ItemsBlock>
<LineItemsBlock />
</ItemsBlock>
<TotalsBlock>
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
<OrderSummaryBlock>
<OrderSummaryHeadingBlock />
WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065) * Sub/Total/Fee inner blocks * Row blocks within the inner block * Update icons * Resolve stying issues * Remove old block * Pin totals row * Locking logic update * Heading inner block * Refactor where inner blocks are defined * Add todos * Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas. * Improve frontend registration of components using new entrypoint * Experiment- external block context * Revert "Experiment- external block context" This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f. * Duplicate inner blocks to avoid conflicts with context * Remove todo * Rename block dir * Some test fixes * Fix import * fix import * linting * Remove unused attributes * Optional classname * fix coupons import * fix shipping mocks * Styling * Fix selectors in e2e tests * Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary Because, removing them was: - a breaking change for the old structure - was making it harder to target the inner blocks. Before the class was used to target each segment - it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency * Reuse the TotalsWrapper component for C& C blocks inner blocks This component was removed in this PR, but we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar. Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com> Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 13:45:18 +00:00
<OrderSummarySubtotalBlock />
<OrderSummaryShippingBlock
isShippingCalculatorEnabled={
isShippingCalculatorEnabled
}
/>
<OrderSummaryTaxesBlock
showRateAfterTaxName={ showRateAfterTaxName }
/>
</OrderSummaryBlock>
<ExpressPaymentBlock />
<ProceedToCheckoutBlock checkoutPageId={ checkoutPageId } />
<AcceptedPaymentMethodsIcons />
</TotalsBlock>
</FilledCart>
<EmptyCart>
<p>Empty Cart</p>
</EmptyCart>
</Cart>
);
};
describe( 'Testing cart', () => {
beforeEach( () => {
act( () => {
fetchMock.mockResponse( ( req ) => {
if ( req.url.match( /wc\/store\/v1\/cart/ ) ) {
return Promise.resolve( JSON.stringify( previewCart ) );
}
return Promise.resolve( '' );
} );
// need to clear the store resolution state between tests.
dispatch( storeKey ).invalidateResolutionForStore();
dispatch( storeKey ).receiveCart( defaultCartState.cartData );
} );
} );
afterEach( () => {
fetchMock.resetMocks();
} );
it( 'renders cart if there are items in the cart', async () => {
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect(
screen.getByText( /Proceed to Checkout/i )
).toBeInTheDocument();
expect( fetchMock ).toHaveBeenCalledTimes( 1 );
} );
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
it( 'Contains a Taxes section if Core options are set to show it', async () => {
allSettings.displayCartPricesIncludingTax = false;
// The criteria for showing the Taxes section is:
// Display prices during basket and checkout: 'Excluding tax'.
render( <CartBlock /> );
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Tax/i ) ).toBeInTheDocument();
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
} );
it( 'Contains a Order summary header', async () => {
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Cart totals/i ) ).toBeInTheDocument();
} );
it( 'Contains a Order summary Subtotal section', async () => {
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Subtotal/i ) ).toBeInTheDocument();
} );
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
it( 'Shows individual tax lines if the store is set to do so', async () => {
allSettings.displayCartPricesIncludingTax = false;
allSettings.displayItemizedTaxes = true;
// The criteria for showing the lines in the Taxes section is:
// Display prices during basket and checkout: 'Excluding tax'.
// Display tax totals: 'Itemized';
render( <CartBlock /> );
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Sales tax/i ) ).toBeInTheDocument();
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
} );
it( 'Shows rate percentages after tax lines if the block is set to do so', async () => {
allSettings.displayCartPricesIncludingTax = false;
allSettings.displayItemizedTaxes = true;
// The criteria for showing the lines in the Taxes section is:
// Display prices during basket and checkout: 'Excluding tax'.
// Display tax totals: 'Itemized';
render(
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
<CartBlock
attributes={ {
showRateAfterTaxName: true,
} }
/>
);
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Sales tax 20%/i ) ).toBeInTheDocument();
Update design of cart and checkout sidebars (https://github.com/woocommerce/woocommerce-blocks/pull/4180) * Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
2021-05-17 14:00:57 +00:00
} );
it( 'renders empty cart if there are no items in the cart', async () => {
act( () => {
fetchMock.mockResponse( ( req ) => {
if ( req.url.match( /wc\/store\/v1\/cart/ ) ) {
return Promise.resolve(
JSON.stringify( defaultCartState.cartData )
);
}
return Promise.resolve( '' );
} );
} );
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getByText( /Empty Cart/i ) ).toBeInTheDocument();
expect( fetchMock ).toHaveBeenCalledTimes( 1 );
} );
it( 'renders correct cart line subtotal when currency has 0 decimals', async () => {
fetchMock.mockResponse( ( req ) => {
if ( req.url.match( /wc\/store\/v1\/cart/ ) ) {
const cart = {
...previewCart,
// Make it so there is only one item to simplify things.
items: [
{
...previewCart.items[ 0 ],
totals: {
...previewCart.items[ 0 ].totals,
// Change price format so there are no decimals.
currency_minor_unit: 0,
currency_prefix: '',
currency_suffix: '€',
line_subtotal: '16',
line_total: '18',
},
},
],
};
return Promise.resolve( JSON.stringify( cart ) );
}
} );
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
expect( screen.getAllByRole( 'cell' )[ 1 ] ).toHaveTextContent( '16€' );
} );
it( 'updates quantity when changed in server', async () => {
const cart = {
...previewCart,
// Make it so there is only one item to simplify things.
items: [
{
...previewCart.items[ 0 ],
quantity: 5,
},
],
};
const itemName = cart.items[ 0 ].name;
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
const quantityInput = screen.getByLabelText(
`Quantity of ${ itemName } in your cart.`
);
expect( quantityInput.value ).toBe( '2' );
act( () => {
dispatch( storeKey ).receiveCart( cart );
} );
expect( quantityInput.value ).toBe( '5' );
} );
it( 'does not show the remove item button when a filter prevents this', async () => {
const cart = {
...previewCart,
// Make it so there is only one item to simplify things.
items: [ previewCart.items[ 0 ] ],
};
registerCheckoutFilters( 'woo-blocks-test-extension', {
showRemoveItemLink: ( value, extensions, { cartItem } ) => {
return cartItem.id !== cart.items[ 0 ].id;
},
} );
render( <CartBlock /> );
await waitFor( () => expect( fetchMock ).toHaveBeenCalled() );
act( () => {
dispatch( storeKey ).receiveCart( cart );
} );
expect( screen.queryAllByText( /Remove item/i ).length ).toBe( 0 );
} );
} );