[클린코드 4기 방현경] 자판기 미션 STEP 1

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "es6": true
+    },
+    "extends": "airbnb-base",
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+        "semi": ["error", "always"],
+        "quotes": ["error", "single"],
+        "indent": ["error", 4],
+        "no-return-assign": "off",
+        "no-param-reassign": "off",
+        "arrow-parens": "off",
+        "import/prefer-default-export": "off",
+        "class-methods-use-this": "off",
+        "comma-dangle": "off",
+        "no-unused-vars": "off",
+        "import/extensions": "off",
+        "max-classes-per-file": "off",
+        "no-alert": "off",
+        "no-unsafe-negation": "off",
+        "consistent-return": "off"
+    }
+}

.gitignore

@@ -0,0 +1,105 @@
+# 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
+

cypress.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+};

cypress/e2e/home.cy.js

@@ -0,0 +1,27 @@
+describe('사이트 홈 테스트', () => {
+    beforeEach('페이지 방문', () => {
+        cy.visit('/');
+    });
+
+    homeSpec();
+})
+
+function homeSpec() {
+    it('첫 페이지에 상품관리, 잔돈충전, 상품구매 버튼이 있다.', () => {
+        cy.get('#stock-manage-menu').should('exist');
+        cy.get('#vending-machine-manage-menu').should('exist');
+        cy.get('#product-purchase-menu').should('exist');
+        cy.get('.stock-container').should('not.be.visible');
+    });
+
+    it('상품관리탭을 클릭하면 상품 추가하기 창이 보여진다.', () => {
+        cy.clickStockTab();
+        cy.get('.stock-container').should('be.visible');
+    });
+
+    it('잔돈충전탭을 클릭하면 잔돈 충전하기 창이 보여진다.', () => {
+        cy.clickRechargeTab();
+        cy.get('.recharge-container').should('be.visible');
+    });
+}
+

cypress/e2e/recharge.cy.js

@@ -0,0 +1,80 @@
+import { ERROR_MESSAGE } from "../../src/js/common/error.js";
+describe('잔돈 충전하기 테스트', () => {
+    beforeEach('페이지 방문', () => {
+        cy.visit('/');
+    });
+
+    beforeEach('잔돈충전 탭 클릭', () => {
+        cy.clickRechargeTab();
+    });
+
+    rechargeSpeck();
+})
+
+function rechargeSpeck() {
+    const amount = 100;
+
+    it('최초 자판기의 보유금액은 0원이다.', () => {
+        cy.get('#recharge-amount').should('have.text', 0);
+    });
+
+    it('최소 충전 금액은 100원이다. :: 경계값', () => {
+        cy.typeRechargeAmount(99);
+        checkAlert(cy.clickRecharge(), ERROR_MESSAGE.InputMinInsufficientError);
+    });
+
+    it('충전 금액의 단위는 10원이다.', () => {
+        cy.typeRechargeAmount(101);
+        checkAlert(cy.clickRecharge(), ERROR_MESSAGE.InputPriceUnitError);
+    });
+
+    it('자판기에 금액을 입력하여 충전하기 버튼을 누르면 보유 금액을 충전할 수 있다.', () => {
+        cy.typeRechargeAmount(amount);
+        cy.clickRecharge();
+        cy.get('#recharge-amount').should('have.text', amount);
+    });
+
+    it('금액을 충전하면 잔돈이 생성된다.', () => {
+        cy.typeRechargeAmount(amount);
+        cy.clickRecharge();
+        cy.get('#recharge-cashbox-container').children().should('have.length', 4);
+    });
+
+    it('보유 금액은 누적된다.', () => {
+        const newAmount = 200;
+        cy.typeRechargeAmount(amount);
+        cy.clickRecharge();
+        cy.get('#recharge-amount').should('have.text', amount);
+
+        cy.get('#recharge-input').clear();
+        cy.typeRechargeAmount(newAmount);
+        cy.clickRecharge();
+        cy.get('#recharge-amount').should('have.text', amount + newAmount);
+    });
+
+    it('다른 탭을 클릭해도 보유된 금액은 유지된다.', () => {
+        cy.typeRechargeAmount(amount);
+        cy.clickRecharge();
+        cy.get('#recharge-amount').should('have.text', amount);
+
+        cy.clickStockTab();
+        cy.clickRechargeTab();
+        cy.get('#recharge-amount').should('have.text', amount);
+    });
+
+    it('같은 세션에서 새로고침을 해도 보유 금액과 잔돈은 저장된다.', () => {
+        cy.typeRechargeAmount(amount);
+        cy.clickRecharge();
+        cy.get('#recharge-amount').should('have.text', amount);
+
+        cy.reload();
+        cy.clickRechargeTab();
+        cy.get('#recharge-amount').should('have.text', amount);
+    });
+}
+
+function checkAlert(scenario, message) {
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+    scenario.then(() => expect(stub.getCall(0)?.lastArg).to.equals(message));
+}