[클린코드 4기 이철환] 자판기 미션 STEP 1

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "env": {
+    "browser": true,
+    "es2022": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "extends": ["airbnb", "plugin:prettier/recommended", "plugin:cypress/recommended"],
+  "rules": {
+    "import/extensions": [
+      "off"
+    ],
+    "max-depth": ["error", 2],
+    "lines-between-class-members": "off",
+    "class-methods-use-this":  "off",
+    "import/prefer-default-export": "off",
+    "no-unused-expressions": "off",
+    "no-param-reassign": "off"
+  }
+}

.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+
+.idea

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindConfig": "./tailwind.config.js"
+}

cypress.config.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {},
+});

cypress/e2e/change-charger.cy.js

@@ -0,0 +1,144 @@
+import {
+  CHANGE_CHARGE_MENU_SELECTOR,
+  CHARGER_INPUT_SELECTOR,
+  COIN_AMOUNT_SELECTOR,
+  COIN_CHARGE_BUTTON_SELECTOR,
+  COIN_CHARGING_FORM_SELECTOR,
+  COIN_INVENTORY_SELECTOR,
+  COIN_UNIT_SELECTOR,
+  HOLDING_AMOUNT_SELECTOR,
+  PRODUCT_MANAGE_MENU_SELECTOR,
+} from "../support/selectors.js";
+import { ERROR_MESSAGE, MINIMUM_CHARGE_PRICE } from "../support/constants";
+import { calculateCoinCount } from "../../src/js/utils/utils.js";
+
+describe("잔돈 충전 테스트", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.get(CHANGE_CHARGE_MENU_SELECTOR).click();
+  });
+
+  context("잔돈 충전을 할 수 있다.", () => {
+    it("잔돈 충전 입력 폼이 보인다", () => {
+      cy.get(COIN_CHARGING_FORM_SELECTOR).should("exist");
+    });
+
+    it("잔돈을 입력할 수 있는 Input이 존재한다.", () => {
+      cy.get(CHARGER_INPUT_SELECTOR).should("exist");
+    });
+
+    it("최초 보유한 금액은 0원이다", () => {
+      cy.get(HOLDING_AMOUNT_SELECTOR).should("have.text", "0");
+    });
+
+    it("100원부터 충전이 가능하며 잘못 입력시 alert가 뜬다", () => {
+      cy.alert({
+        action: () => {
+          cy.get(CHARGER_INPUT_SELECTOR).type("50");
+          return cy.get(COIN_CHARGE_BUTTON_SELECTOR).click();
+        },
+        message: ERROR_MESSAGE.INVALID_AMOUNT,
+      });
+    });
+
+    it("잔돈은 10원 단위로 충전이 가능하며 잘못된 값을 충전시 alert가 뜬다", () => {
+      cy.alert({
+        action: () => {
+          cy.get(CHARGER_INPUT_SELECTOR).type("101");
+          return cy.get(COIN_CHARGE_BUTTON_SELECTOR).click();
+        },
+        message: ERROR_MESSAGE.INVALID_UNIT,
+      });
+    });
+
+    it("잔돈 입력 후 Enter키를 눌러서 충전할 수 있다", () => {
+      cy.get(CHARGER_INPUT_SELECTOR).type(`${MINIMUM_CHARGE_PRICE}{enter}`);
+      cy.get(HOLDING_AMOUNT_SELECTOR).should("have.text", MINIMUM_CHARGE_PRICE);
+    });
+
+    it("잔돈 입력후 충전하기 버튼을 눌러서 충전할 수 있다", () => {
+      cy.get(CHARGER_INPUT_SELECTOR).type(String(MINIMUM_CHARGE_PRICE));
+
+      cy.get(COIN_CHARGE_BUTTON_SELECTOR)
+        .click()
+        .then(() => {
+          cy.get(HOLDING_AMOUNT_SELECTOR).should(
+            "have.text",
+            MINIMUM_CHARGE_PRICE
+          );
+        });
+    });
+
+    it("잔돈은 누적하여 충전할 수 있다", () => {
+      const FIRST_CHARGE = MINIMUM_CHARGE_PRICE;
+      const SECOND_CHARGE = MINIMUM_CHARGE_PRICE * 2;
+
+      cy.get(CHARGER_INPUT_SELECTOR).type(String(FIRST_CHARGE));
+      cy.get(COIN_CHARGE_BUTTON_SELECTOR).click();
+
+      cy.get(CHARGER_INPUT_SELECTOR).type(String(SECOND_CHARGE));
+      cy.get(COIN_CHARGE_BUTTON_SELECTOR).click();
+
+      cy.get(HOLDING_AMOUNT_SELECTOR).should(
+        "have.text",
+        String(FIRST_CHARGE + SECOND_CHARGE)
+      );
+    });
+  });
+
+  context("보유한 동전을 갯수를 확인할 수 있다.", () => {
+    it("잔돈 현황을 확인할 수 있는 테이블이 보인다", () => {
+      cy.get(COIN_INVENTORY_SELECTOR).should("exist");
+    });
+
+    it("최초 보유한 동전의 갯수는 각각 0개이다", () => {
+      cy.get(COIN_AMOUNT_SELECTOR).each((amount) => {
+        expect(amount).text("0개");
+      });
+    });
+
+    it("500원, 100원, 50원, 10원 단위에 따른 동전의 갯수로 표시된다", () => {
+      const coinUnit = ["500", "100", "50", "10"];
+      cy.get(COIN_UNIT_SELECTOR).each((unit, index) => {
+        expect(unit).text(coinUnit[index]);
+      });
+    });
+
+    it("보유한 동전은 X개 형식으로 확인할 수 있다", () => {
+      const charge = 1000;
+      cy.get(CHARGER_INPUT_SELECTOR).type(`${charge}{enter}`);
+      const result = calculateCoinCount(charge);
+
+      cy.get(COIN_AMOUNT_SELECTOR).each((amount) => {
+        const id = amount.closest("tr").attr("id");
+        const unit = id.replace("coin-", "");
+
+        expect(amount).text(`${result[unit]}개`);
+      });
+    });
+  });
+
+  it("다른 메뉴로 이동 후 다시 돌아왔을 경우 값은 유지된다.", () => {
+    const charge = 1000;
+    cy.get(CHARGER_INPUT_SELECTOR).type(`${charge}{enter}`);
+    const result = calculateCoinCount(charge);
+
+    cy.get(COIN_AMOUNT_SELECTOR).each((amount) => {
+      const id = amount.closest("tr").attr("id");
+      const unit = id.replace("coin-", "");
+
+      expect(amount).text(`${result[unit]}개`);
+    });
+
+    cy.get(PRODUCT_MANAGE_MENU_SELECTOR).click();
+
+    cy.get(CHANGE_CHARGE_MENU_SELECTOR).click();
+
+    cy.get(COIN_AMOUNT_SELECTOR).each((amount) => {
+      const id = amount.closest("tr").attr("id");
+      const unit = id.replace("coin-", "");
+
+      expect(amount).text(`${result[unit]}개`);
+    });
+  });
+});

cypress/e2e/menu.cy.js

@@ -0,0 +1,56 @@
+import {
+  CHANGE_CHARGE_MENU_SELECTOR,
+  COIN_CHARGING_CONTAINER_SELECTOR,
+  MENU_SELECTOR,
+  PRODUCT_MANAGE_MENU_SELECTOR,
+  PRODUCT_MANAGER_CONTAINER_SELECTOR,
+  PRODUCT_PURCHASE_CONTAINER_SELECTOR,
+  PRODUCT_PURCHASE_MENU_SELECTOR,
+} from "../support/selectors.js";
+
+describe("메뉴 탭 UI 테스트", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+  it("메뉴 탭 리스트 UI가 화면에 존재한다.", () => {
+    cy.get(MENU_SELECTOR).should("exist");
+  });
+
+  it("메뉴는 상품 관리, 잔돈 충전, 상품 구매가 있다.", () => {
+    cy.get(`${MENU_SELECTOR} button`).should(($menuButton) => {
+      expect($menuButton).to.have.length(3);
+
+      const menuTexts = $menuButton.map((_, el) => el.innerText);
+
+      expect(menuTexts.get()).to.deep.equal([
+        "상품 관리",
+        "잔돈 충전",
+        "상품 구매",
+      ]);
+    });
+  });
+
+  context("각 메뉴 클릭시 해당 메뉴화면이 노출된다.", () => {
+    it("잔돈 충전 메뉴 클릭시 해당 화면이 노출된다.", () => {
+      cy.get(CHANGE_CHARGE_MENU_SELECTOR)
+        .click()
+        .then(() => {
+          cy.get(COIN_CHARGING_CONTAINER_SELECTOR).should("exist");
+        });
+    });
+    it("상품 구매 메뉴 클릭시 해당 화면이 노출된다.", () => {
+      cy.get(PRODUCT_PURCHASE_MENU_SELECTOR)
+        .click()
+        .then(() => {
+          cy.get(PRODUCT_PURCHASE_CONTAINER_SELECTOR).should("exist");
+        });
+    });
+    it("상품 관리 메뉴 클릭시 해당 화면이 노출된다.", () => {
+      cy.get(PRODUCT_MANAGE_MENU_SELECTOR)
+        .click()
+        .then(() => {
+          cy.get(PRODUCT_MANAGER_CONTAINER_SELECTOR).should("exist");
+        });
+    });
+  });
+});