[yshin] javascript-calculator

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "airbnb-base"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "rules": {
+    }
+}

.gitignore

@@ -275,6 +275,9 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+# javascript source file
+src/**/*.js
+
 ### vscode ###
 .vscode/*
 !.vscode/settings.json

README.md

@@ -14,42 +14,65 @@
 </p>
 
 ## 🔥 Projects!
+
 <p align="middle">
   <img width="300" src="src/images/calculator_ui.png">
 </p>
 
+## 환경설정
+
+- [x] prettier
+- [x] eslint
+- [x] typescript
+- [x] cypress
+- [x] tsconfig.json
+- [x] cypress.json
+- [x] package.json
+
 ## 🎯 기능 요구사항
 
-- [ ] 2개의 숫자에 대해 덧셈이 가능하다.
-- [ ] 2개의 숫자에 대해 뺄셈이 가능하다.
-- [ ] 2개의 숫자에 대해 곱셈이 가능하다.
-- [ ] 2개의 숫자에 대해 나눗셈이 가능하다.
-- [ ] AC(All Clear)버튼을 누르면 0으로 초기화 한다.
-- [ ] 숫자는 한번에 최대 3자리 수까지 입력 가능하다.
-- [ ] 계산 결과를 표현할 때 소수점 이하는 버림한다.
+- [x] 2개의 숫자에 대해 덧셈이 가능하다.
+- [x] 2개의 숫자에 대해 뺄셈이 가능하다.
+- [x] 2개의 숫자에 대해 곱셈이 가능하다.
+- [x] 2개의 숫자에 대해 나눗셈이 가능하다.
+- [x] AC(All Clear)버튼을 누르면 0으로 초기화 한다.
+- [x] 숫자는 한번에 최대 3자리 수까지 입력 가능하다.
+- [x] 계산 결과를 표현할 때 소수점 이하는 버림한다.
 
 <br/>
 
 ## 📊 테스트 요구사항
 
 **기능 요구사항에 제시된 7개의 항목에 대해 테스트 케이스를 만든다.**
 
+- [x] 2개의 숫자에 대해 덧셈이 가능하다. // 123 + 234 = 357
+- [x] 2개의 숫자에 대해 뺄셈이 가능하다. // 234 - 123 = 111
+- [x] 2개의 숫자에 대해 곱셈이 가능하다. // 23 \* 456 = 10488
+- [x] 2개의 숫자에 대해 나눗셈이 가능하다. // 777 / 111 = 7
+- [x] AC(All Clear)버튼을 누르면 0으로 초기화 한다. // 0
+- [x] 숫자는 한번에 최대 3자리 수까지 입력 가능하다. // 123 + 999 = 1122
+- [x] 계산 결과를 표현할 때 소수점 이하는 버림한다. // 50 / 3 = 16
+
 <br/>
 
 ## 📄 참고 사항
-* 숫자 입력은 **클릭**으로만 가능하다.
+
+- [x] 숫자 입력은 **클릭**으로만 가능하다.
 
 <br/>
 
 ## 👏 Contributing
-만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요. 
+
+만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
 
 <br/>
 
 ## 🐞 Bug Report
+
 버그를 발견한다면, [Issues](https://github.com/woowacourse/javascript-calculator/issues) 에 등록 후 @eastjun에게 dm을 보내주세요.
 
 <br/>
 
 ## 📝 License
+
 This project is [MIT](https://github.com/woowacourse/javascript-calculator/blob/master/LICENSE) licensed.

cypress.json

@@ -0,0 +1 @@
+{}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/basic.ts

@@ -0,0 +1,94 @@
+context("calculator", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5500/");
+  });
+
+  it("calculator's first value", () => {
+    cy.get("#total").should("have.text", 0);
+  });
+
+  it("plus test", () => {
+    // 123 + 234 = 357
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".operation").contains("+").click();
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".digit").contains(4).click();
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 357);
+  });
+
+  it("minus test", () => {
+    // 234 - 123 = 111
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".digit").contains(4).click();
+    cy.get(".operation").contains("-").click();
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 111);
+  });
+
+  it("multiply test", () => {
+    // 23 * 456 = 10488
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".operation").contains("X").click();
+    cy.get(".digit").contains(4).click();
+    cy.get(".digit").contains(5).click();
+    cy.get(".digit").contains(6).click();
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 10488);
+  });
+
+  it("divide test", () => {
+    // 777 / 111 = 7
+    cy.get(".digit").contains(7).click();
+    cy.get(".digit").contains(7).click();
+    cy.get(".digit").contains(7).click();
+    cy.get(".operation").contains("/").click();
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(1).click();
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 7);
+  });
+
+  it("AC test", () => {
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(2).click();
+    cy.get("button.modifier").click();
+    cy.get("#total").should("have.text", 0);
+  });
+
+  it("max num test", () => {
+    // 123 + 999 = 1122
+    cy.get(".digit").contains(1).click();
+    cy.get(".digit").contains(2).click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".digit").contains(9).click();
+    cy.get("#total").should("have.text", 123);
+    cy.get(".operation").contains("+").click();
+    cy.get(".digit").contains(9).click();
+    cy.get(".digit").contains(9).click();
+    cy.get(".digit").contains(9).click();
+    cy.get(".digit").contains(9).click();
+    cy.get("#total").should("have.text", 999);
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 1122);
+  });
+
+  it("show only integer test", () => {
+    // 50 / 3 = 16
+    cy.get(".digit").contains(5).click();
+    cy.get(".digit").contains(0).click();
+    cy.get(".operation").contains("/").click();
+    cy.get(".digit").contains(3).click();
+    cy.get(".operation").contains("=").click();
+    cy.get("#total").should("have.text", 16);
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.html

@@ -1,38 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Calculator</title>
-        <link rel="stylesheet" type="text/css" href="src/css/index.css" />
-    </head>
-    <body>
-        <div id="app">
-            <div class="calculator">
-                <h1 id="total">0</h1>
-                <div class="digits flex">
-                    <button class="digit">9</button>
-                    <button class="digit">8</button>
-                    <button class="digit">7</button>
-                    <button class="digit">6</button>
-                    <button class="digit">5</button>
-                    <button class="digit">4</button>
-                    <button class="digit">3</button>
-                    <button class="digit">2</button>
-                    <button class="digit">1</button>
-                    <button class="digit">0</button>
-                </div>
-                <div class="modifiers subgrid">
-                    <button class="modifier">AC</button>
-                </div>
-                <div class="operations subgrid">
-                    <button class="operation">/</button>
-                    <button class="operation">X</button>
-                    <button class="operation">-</button>
-                    <button class="operation">+</button>
-                    <button class="operation">=</button>
-                </div>
-            </div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Calculator</title>
+    <link rel="stylesheet" type="text/css" href="src/css/index.css" />
+  </head>
+  <body>
+    <div id="app">
+      <div class="calculator">
+        <h1 id="total">0</h1>
+        <div class="digits flex">
+          <button class="digit">9</button>
+          <button class="digit">8</button>
+          <button class="digit">7</button>
+          <button class="digit">6</button>
+          <button class="digit">5</button>
+          <button class="digit">4</button>
+          <button class="digit">3</button>
+          <button class="digit">2</button>
+          <button class="digit">1</button>
+          <button class="digit">0</button>
         </div>
-    </body>
+        <div class="modifiers subgrid">
+          <button class="modifier">AC</button>
+        </div>
+        <div class="operations subgrid">
+          <button class="operation">/</button>
+          <button class="operation">X</button>
+          <button class="operation">-</button>
+          <button class="operation">+</button>
+          <button class="operation">=</button>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="src/js/index.js"></script>
+  </body>
 </html>