remove redundancy

Author: sf-emmyzhang

packages/template-retail-react-app/app/components/cancel-order-modal/index.jsx

@@ -49,7 +49,7 @@ const CancelOrderModal = ({
                 </ModalHeader>
                 <ModalCloseButton />
                 <ModalBody>
-					{/* TODO: Add order details here W-18998712 */}
+                    {/* TODO: Add order details here W-18998712 */}
                     <Text>
                         <FormattedMessage
                             defaultMessage="This is a blank modal for canceling the order."

packages/template-retail-react-app/app/components/cancel-order-modal/index.test.js

@@ -42,32 +42,25 @@ afterEach(() => {
 
 test('renders cancel order modal when open', async () => {
     renderWithProviders(<CancelOrderModal isOpen={true} onClose={jest.fn()} order={mockOrder} />)
-
-    // Check modal content
     expect(screen.getByRole('dialog')).toBeInTheDocument()
     expect(screen.getAllByText(/request cancellation/i)).toHaveLength(2)
 })
 
 test('does not render modal when closed', () => {
     renderWithProviders(<MockedComponent order={mockOrder} />)
-
-    // Modal should not be visible initially
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     expect(screen.queryByText(/request cancellation/i)).not.toBeInTheDocument()
 })
 
 test('renders modal with correct header text', async () => {
     renderWithProviders(<CancelOrderModal isOpen={true} onClose={jest.fn()} order={mockOrder} />)
-
-    // Check header text specifically - look for the modal header within the dialog
     const dialog = screen.getByRole('dialog')
     expect(dialog).toBeInTheDocument()
-    expect(screen.getAllByText(/request cancellation/i)).toHaveLength(2) // Header and button
+    expect(screen.getAllByText(/request cancellation/i)).toHaveLength(2)
 })
 
 test('renders modal with correct body content', async () => {
     const user = userEvent.setup()
-
     renderWithProviders(<MockedComponent order={mockOrder} />)
 
     // Open the modal
@@ -80,7 +73,6 @@ test('renders modal with correct body content', async () => {
 
 test('renders request cancellation button', async () => {
     const user = userEvent.setup()
-
     renderWithProviders(<MockedComponent order={mockOrder} />)
 
     // Open the modal
@@ -94,25 +86,23 @@ test('renders request cancellation button', async () => {
 
 test('renders close button (X)', async () => {
     const user = userEvent.setup()
-
     renderWithProviders(<MockedComponent order={mockOrder} />)
 
     // Open the modal
     const trigger = screen.getByText(/open cancel modal/i)
     await user.click(trigger)
 
-    // Check for close button (usually has aria-label or is recognizable by role)
+    // Check for close button
     const closeButton = screen.getByRole('button', {name: /close/i})
     expect(closeButton).toBeInTheDocument()
 })
 
 test('calls onClose when close button is clicked', async () => {
     const user = userEvent.setup()
     const onClose = jest.fn()
-
     renderWithProviders(<MockedComponent order={mockOrder} onClose={onClose} />)
 
-    // Open the modal manually by setting isOpen to true
+    // Open the modal
     renderWithProviders(<CancelOrderModal isOpen={true} onClose={onClose} order={mockOrder} />)
 
     // Click close button

packages/template-retail-react-app/app/pages/account/order-detail.jsx

@@ -112,7 +112,6 @@ const AccountOrderDetail = () => {
     const history = useHistory()
     const {formatMessage, formatDate} = useIntl()
 
-    // Modal state for cancel order
     const {
         isOpen: isCancelModalOpen,
         onOpen: onCancelModalOpen,
@@ -172,7 +171,6 @@ const AccountOrderDetail = () => {
                                 id="account_order_detail.title.order_details"
                             />
                         </Heading>
-                        {/* Cancel Order Button */}
                         <Button variant="link" size="sm" onClick={onCancelModalOpen}>
                             <FormattedMessage
                                 defaultMessage="Cancel order"
@@ -417,7 +415,6 @@ const AccountOrderDetail = () => {
                 </Stack>
             </Stack>
 
-            {/* Cancel Order Modal */}
             <CancelOrderModal
                 isOpen={isCancelModalOpen}
                 onClose={onCancelModalClose}

packages/template-retail-react-app/app/pages/account/orders.test.js

@@ -270,8 +270,6 @@ describe('Cancel Order Button and Modal', () => {
     })
 
     test('should open cancel order modal when button is clicked', async () => {
-        expect(await screen.findByTestId('account-order-details-page')).toBeInTheDocument()
-
         const cancelButton = screen.getByRole('button', {name: /cancel order/i})
         await user.click(cancelButton)
 
@@ -284,8 +282,6 @@ describe('Cancel Order Button and Modal', () => {
     })
 
     test('should close modal when close button is clicked', async () => {
-        expect(await screen.findByTestId('account-order-details-page')).toBeInTheDocument()
-
         // Open modal
         const cancelButton = screen.getByRole('button', {name: /cancel order/i})
         await user.click(cancelButton)
@@ -302,8 +298,6 @@ describe('Cancel Order Button and Modal', () => {
     })
 
     test('should close modal when request cancellation button is clicked', async () => {
-        expect(await screen.findByTestId('account-order-details-page')).toBeInTheDocument()
-
         // Open modal
         const cancelButton = screen.getByRole('button', {name: /cancel order/i})
         await user.click(cancelButton)
@@ -313,7 +307,6 @@ describe('Cancel Order Button and Modal', () => {
         const requestCancellationButtons = screen.getAllByRole('button', {
             name: /request cancellation/i
         })
-        // Find the button inside the modal (not the one that opens it)
         const modalButton = requestCancellationButtons.find((button) =>
             button.closest('[role="dialog"]')
         )
@@ -326,8 +319,6 @@ describe('Cancel Order Button and Modal', () => {
     })
 
     test('should call onRequestCancellation when request cancellation button is clicked', async () => {
-        expect(await screen.findByTestId('account-order-details-page')).toBeInTheDocument()
-
         // Open modal
         const cancelButton = screen.getByRole('button', {name: /cancel order/i})
         await user.click(cancelButton)
@@ -340,10 +331,7 @@ describe('Cancel Order Button and Modal', () => {
         const modalButton = requestCancellationButtons.find((button) =>
             button.closest('[role="dialog"]')
         )
-
-        // Check that the callback would be called (we can't easily test the actual callback without mocking)
         expect(modalButton).toBeInTheDocument()
-
         await user.click(modalButton)
 
         // Modal should close after action