shopping-mall-e2e-test-with-answer

cypress/e2e/Auth.cy.js

@@ -3,9 +3,17 @@ beforeEach(() => {
 });
 
 describe('로그인이 필요한 페이지에 비로그인 상태로 접속하면 로그인 페이지로 리다이렉트 된다', () => {
-  it('장바구니 페이지에 접속할 경우 로그인 페이지로 리다이렉트 된다', () => {});
+  it('장바구니 페이지에 접속할 경우 로그인 페이지로 리다이렉트 된다', () => {
+    cy.visit('/cart');
+
+    cy.assertUrl('/login');
+  });
 
-  it('구매 페이지로 접속할 경우 로그인 페이지로 리다이렉트 된다', () => {});
+  it('구매 페이지로 접속할 경우 로그인 페이지로 리다이렉트 된다', () => {
+    cy.visit('/purchase');
+
+    cy.assertUrl('/login');
+  });
 });
 
 describe('로그인 된 상태라면 로그인이 필요한 페이지에 접속할 수 있다', () => {

cypress/e2e/Cart.cy.js

@@ -7,9 +7,15 @@ describe('장바구니에 상품이 없는 경우', () => {
     cy.getCartButton().click();
   });
 
-  it('"텅~" 글자가 나타난다', () => {});
+  it('"텅~" 글자가 나타난다', () => {
+    cy.findByText('텅~').should('exist');
+  });
+
+  it('"홈으로 가기" 링크를 클릭하는 경우 홈으로 이동한다', () => {
+    cy.findByText('홈으로 가기').click();
 
-  it('"홈으로 가기" 링크를 클릭하는 경우 홈으로 이동한다', () => {});
+    cy.assertUrl('/');
+  });
 });
 
 describe('장바구니에 상품이 추가되어 있는 경우', () => {
@@ -20,11 +26,35 @@ describe('장바구니에 상품이 추가되어 있는 경우', () => {
     cy.getCartButton().click();
   });
 
-  it('추가한 상품이 장바구니 상품 목록에 나타나며, 상품의 총 수량과 가격 총합인 "총 2개, $1,251.00"이 나타난다', () => {});
+  it('추가한 상품이 장바구니 상품 목록에 나타나며, 상품의 총 수량과 가격 총합인 "총 2개, $1,251.00"이 나타난다', () => {
+    cy.findAllByRole('row')
+      .eq(0)
+      .findByText('Handmade Cotton Fish')
+      .should('exist');
+    cy.findAllByRole('row')
+      .eq(1)
+      .findByText('Awesome Concrete Shirt')
+      .should('exist');
+
+    cy.findByText('총 2개, $1,251.00').should('exist');
+  });
+
+  it('장바구니 상품의 수량를 "10"으로 변경할 경우 총 갯수와 총합은 "총 11개, $8,532.00"로 변경된다', () => {
+    cy.findAllByRole('textbox').first().type('0');
 
-  it('장바구니 상품의 수량를 "10"으로 변경할 경우 총 갯수와 총합은 "총 11개, $8,532.00"로 변경된다', () => {});
+    cy.findByText('총 11개, $8,532.00').should('exist');
+  });
+
+  it('삭제(휴지통) 버튼을 클릭할 경우 해당 상품이 장바구니에서 삭제된다', () => {
+    cy.findAllByLabelText('delete button').first().click();
 
-  it('삭제(휴지통) 버튼을 클릭할 경우 해당 상품이 장바구니에서 삭제된다', () => {});
+    cy.findByText('Handmade Cotton Fish').should('not.exist');
+    cy.getCartButton().should('have.text', '1');
+  });
 
-  it('"구매하기" 버튼을 클릭할 경우 구매 페이지로 이동된다', () => {});
+  it('"구매하기" 버튼을 클릭할 경우 구매 페이지로 이동된다', () => {
+    cy.findByText('구매하기').click();
+
+    cy.assertUrl('/purchase');
+  });
 });

cypress/e2e/Home.cy.js

@@ -1,31 +1,113 @@
-it('초기 상품은 20개가 노출된다', () => {});
+const assertProductCardLength = length => {
+  cy.findAllByTestId('product-card').should('have.length', length);
+};
 
-it('show more 버튼을 클릭할 경우 상품이 20개 더 노출된다', () => {});
+const assertProductCardText = (text, index = 0) => {
+  cy.findAllByTestId('product-card').eq(index).findByText(text).should('exist');
+};
+
+beforeEach(() => {
+  cy.visit('/');
+});
+
+it('초기 상품은 20개가 노출된다', () => {
+  assertProductCardLength(20);
+});
+
+it('show more 버튼을 클릭할 경우 상품이 20개 더 노출된다', () => {
+  cy.findByText('Show more').click();
+
+  assertProductCardLength(40);
+});
+
+it('상품을 클릭할 경우 클릭한 상품의 상세 페이지로 이동한다', () => {
+  cy.findAllByTestId('product-card').first().click();
+
+  cy.assertUrl('/product/6');
+});
+
+describe('필터', () => {
+  it('상품명을 "Handmade Cotton"로 입력하면 해당 상품명을 포함한 상품만 나타난다', () => {
+    cy.findByLabelText('상품명').type('Handmade Cotton');
+
+    assertProductCardLength(2);
+    assertProductCardText('Handmade Cotton Fish', 0);
+    assertProductCardText('Handmade Cotton Keyboard', 1);
+  });
+
+  it('카테고리를 "Shoes"로 선택할 경우 해당 카테고리 상품만 나타난다', () => {
+    cy.findByRole('radio', { name: 'Shoes' }).click();
+
+    cy.findAllByTestId('product-card').each($el => {
+      cy.wrap($el).findByText('Shoes').should('exist');
+    });
+  });
+
+  it('최소 가격을 "15", 최대 가격을 "20"로 입력한 경우 해당 금액 사이에 있는 상품이 노출된다', () => {
+    cy.findByPlaceholderText('최소 금액').type('15');
+    cy.findByPlaceholderText('최대 금액').type('20');
+
+    assertProductCardLength(1);
+    assertProductCardText('$19.00');
+  });
+
+  it('상품명 "Handmade", 카테고리 "Shoes", 최소 금액 "750", 최대 금액 "800"로 입력하면 모든 조건을 충족하는 상품만 노출된다', () => {
+    cy.findByLabelText('상품명').type('Handmade');
+    cy.findByLabelText('Shoes').click();
+    cy.findByPlaceholderText('최소 금액').type('750');
+    cy.findByPlaceholderText('최대 금액').type('800');
+
+    assertProductCardLength(1);
+    assertProductCardText('Handmade Soft Chicken');
+    assertProductCardText('Shoes');
+    assertProductCardText('$769.00');
+  });
+});
 
 describe('장바구니 / 구매 버튼', () => {
   describe('로그인을 하지 않은 경우', () => {
-    it('장바구니 버튼 클릭 시 로그인 페이지로 이동한다', () => {});
+    it('장바구니 버튼 클릭 시 로그인 페이지로 이동한다', () => {
+      cy.getProductCardByIndex(0).findByText('장바구니').click();
 
-    it('구매 버튼 클릭 시 로그인 페이지로 이동한다', () => {});
+      cy.assertUrl('/login');
+    });
+
+    it('구매 버튼 클릭 시 로그인 페이지로 이동한다', () => {
+      cy.getProductCardByIndex(0).findByText('구매').click();
+
+      cy.assertUrl('/login');
+    });
   });
 
   describe('로그인 시', () => {
-    it('장바구니에 아무것도 추가하지 않은 경우 장바구니 아이콘 뱃지에 숫자가 노출되지 않는다', () => {});
+    beforeEach(() => {
+      cy.login();
+    });
 
-    it('장바구니 버튼 클릭 시 "장바구니 추가 완료!" 알림 메세지가 노출되며, 장바구니에 담긴 수량도 증가한다', () => {});
+    it('장바구니에 아무것도 추가하지 않은 경우 장바구니 아이콘 뱃지에 숫자가 노출되지 않는다', () => {
+      cy.getCartButton().should('have.text', '');
+    });
 
-    it('구매 버튼 클릭시 해당 아이템이 장바구니에 추가되며, 장바구니 페이지로 이동한다', () => {});
-  });
-});
+    it('장바구니 버튼 클릭 시 "장바구니 추가 완료!" 알림 메세지가 노출되며, 장바구니에 담긴 수량도 증가한다', () => {
+      cy.getProductCardByIndex(0).findByText('장바구니').click();
 
-describe('필터', () => {
-  it('상품명을 "Handmade Cotton"로 입력하면 해당 상품명을 포함한 상품만 나타난다', () => {});
+      cy.findByText('Handmade Cotton Fish 장바구니 추가 완료!').should('exist');
+      cy.getCartButton().should('have.text', '1');
 
-  it('카테고리를 "Shoes"로 선택할 경우 해당 카테고리 상품만 나타난다', () => {});
+      cy.getProductCardByIndex(1).findByText('장바구니').click();
 
-  it('최소 가격을 "15", 최대 가격을 "20"로 입력한 경우 해당 금액 사이에 있는 상품이 노출된다', () => {});
+      cy.findByText('Awesome Concrete Shirt 장바구니 추가 완료!').should(
+        'exist',
+      );
+      cy.getCartButton().should('have.text', '2');
+    });
 
-  it('상품명 "Handmade", 카테고리 "Shoes", 최소 금액 "750", 최대 금액 "800"로 입력하면 모든 조건을 충족하는 상품만 노출된다', () => {});
-});
+    it('구매 버튼 클릭시 해당 아이템이 장바구니에 추가되며, 장바구니 페이지로 이동한다', () => {
+      cy.getProductCardByIndex(0).findByText('구매').click();
 
-it('상품을 클릭할 경우 클릭한 상품의 상세 페이지로 이동한다', () => {});
+      cy.assertUrl('/cart');
+      cy.getCartButton().should('have.text', '1');
+      cy.findByText('Handmade Cotton Fish').should('exist');
+    });
+  });
+});

cypress/e2e/ProductDetail.cy.js

@@ -3,9 +3,17 @@ describe('로그인이 되어있지 않은 경우', () => {
     cy.visit('/product/6');
   });
 
-  it('장바구니 버튼 클릭 시 로그인 페이지로 이동한다', () => {});
+  it('장바구니 버튼 클릭 시 로그인 페이지로 이동한다', () => {
+    cy.findByText('장바구니').click();
 
-  it('구매 버튼 클릭 시 로그인 페이지로 이동한다', () => {});
+    cy.assertUrl('/login');
+  });
+
+  it('구매 버튼 클릭 시 로그인 페이지로 이동한다', () => {
+    cy.findByText('구매').click();
+
+    cy.assertUrl('/login');
+  });
 });
 
 describe('로그인이 되어있는 경우', () => {
@@ -14,9 +22,30 @@ describe('로그인이 되어있는 경우', () => {
     cy.visit('/product/6');
   });
 
-  it('"0개"상태에서 장바구니 클릭 시 "0개 이상의 값을 입력해주세요!" 경고 문구가 노출된다', () => {});
+  it('"0개"상태에서 장바구니 클릭 시 "0개 이상의 값을 입력해주세요!" 경고 문구가 노출된다', () => {
+    cy.findByText('장바구니').click();
+
+    cy.findByText('0개 이상의 값을 입력해주세요!').should('exist');
+  });
+
+  it('상품 수량을 "3"으로 수정한 후 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 추가되며, "Handmade Cotton Fish 3개 장바구니 추가 완료!" 문구가 노출된다', () => {
+    cy.findByRole('textbox').type('3');
+
+    cy.findByText('장바구니').click();
+
+    cy.findByText('Handmade Cotton Fish 3개 장바구니 추가 완료!').should(
+      'exist',
+    );
+    cy.getCartButton().should('have.text', '1');
+  });
+
+  it('수량을 입력한 후 구매 버튼을 클릭하면 해당 상품이 장바구니에 추가되며, 장바구니 페이지로 이동한다', () => {
+    cy.findByRole('textbox').type('3');
 
-  it('상품 수량을 "3"으로 수정한 후 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 추가되며, "Handmade Cotton Fish 3개 장바구니 추가 완료!" 문구가 노출된다', () => {});
+    cy.findByText('구매').click();
 
-  it('수량을 입력한 후 구매 버튼을 클릭하면 해당 상품이 장바구니에 추가되며, 장바구니 페이지로 이동한다', () => {});
+    cy.assertUrl('/cart');
+    cy.getCartButton().should('have.text', '1');
+    cy.findByText('Handmade Cotton Fish').should('exist');
+  });
 });