kmin 로또 과제

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node" : true,
+    "jest": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "airbnb-base",
+    "plugin:cypress/recommended"
+  ],
+  "rules": {
+    "import/extensions": ["error", "always"],
+    "import/no-unresolved": "off",
+    "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
+    "linebreak-style": "off"
+  }
+}

architecture.md

@@ -0,0 +1,18 @@
+# 컴포넌트 구조
+## 최상위 App Component
+앱의 전체 상태를 보유
+- 입력 받은 구입 금액
+- 구매 후 남은 금액
+- 자동/수동 구매
+- 번호 보기 상태
+- 저난 주 당첨번호
+
+## lottoInput component
+입력받은 값을 App Component로 올려주어야 함
+## lottoBoard component
+구매한 로또를 보여줌
+- 번호보기 클릭 시 구매한 로또의 번호를 보여줌
+## lottoWin component
+지난 주 당첨 번호를 입력받아 App Component로 올려주어야 함
+## lottoStatistic component
+당첨 통계를 보여줘야 함

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/test2_spec.ts

@@ -0,0 +1,82 @@
+/// <reference types="cypress" />
+/* eslint-disable no-undef */
+import {
+  ERROR_DUPLICATED_NUMBER, ERROR_MISSING_NUMBER, ERROR_NUMBER_RANGE,
+} from '../support/constant';
+
+describe('lottoMachine', () => {
+  const go = (arr: number[]): Cypress.Chainable<JQuery<any>> => {
+    cy.get('.winning-number')
+      .each((input, idx) => {
+        if (arr[idx] !== 0) {
+          cy.wrap(input)
+            .clear()
+            .type(String(arr[idx]));
+        }
+      });
+    if (arr[6] !== 0) {
+      cy.get('.bonus-number')
+        .clear()
+        .type(String(arr[6]));
+    } else {
+      cy.get('.bonus-number')
+        .clear();
+    }
+    return cy.get('.open-result-modal-button')
+      .click();
+  };
+
+  it('do not miss number', () => {
+    // const alertMessage: string = '번호를 모두 입력해주십시오.';
+    cy.visit('./index.html');
+
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    cy.get('.open-result-modal-button')
+      .click()
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_MISSING_NUMBER);
+      });
+
+    go([1, 0, 3, 4, 5, 6, 7])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_MISSING_NUMBER);
+      });
+
+    go([1, 20, 3, 4, 5, 6, 0])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_MISSING_NUMBER);
+      });
+  });
+
+  it('has number in range 1 ~ 45', () => {
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    go([1, 20, 3, 4, 5, 90, 15])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_NUMBER_RANGE);
+      });
+
+    go([1, 20, 3, 4, -50, 9, 18])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_NUMBER_RANGE);
+      });
+  });
+
+  it('do not have duplicated number', () => {
+    const stub = cy.stub();
+    cy.on('window:alert', stub);
+
+    go([1, 20, 3, 4, 1, 9, 15])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_DUPLICATED_NUMBER);
+      });
+
+    go([1, 20, 3, 4, 8, 6, 20])
+      .then(() => {
+        expect(stub.getCall(0)).to.be.calledWith(ERROR_DUPLICATED_NUMBER);
+      });
+  });
+});

cypress/integration/test_spec.ts

@@ -0,0 +1,24 @@
+/// <reference types="cypress" />
+describe('lotto', () => {
+  it('basic cost input', () => {
+    cy.visit('./index.html');
+    cy.get('.lotto-input')
+      .type('1111');
+    cy.get('.lotto-input button')
+      .click();
+    cy.get('.total')
+      .should('have.text', '총 1 개를 구매하였습니다.');
+    cy.get('.tickets')
+      .find('span')
+      .should('have.length', 1);
+    cy.get('.balls')
+      .should('be.hidden');
+    cy.get('.lotto-purchase')
+      .find('.toggle-button')
+      .click();
+    cy.get('.balls')
+      .should('not.be.hidden');
+    cy.get('.tickets')
+      .should('be.hidden');
+  });
+});

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/constant.ts

@@ -0,0 +1,8 @@
+const ERROR_NUMBER_RANGE = '1 ~ 45사이의 숫자를 입력해주십시오.';
+const ERROR_COST_RANGE = '1000원 ~ 100000원 이내로 구매가 가능합니다.';
+const ERROR_MISSING_NUMBER = '번호를 모두 입력해주십시오.';
+const ERROR_DUPLICATED_NUMBER = '번호는 중복될 수 없습니다.';
+
+export {
+  ERROR_DUPLICATED_NUMBER, ERROR_MISSING_NUMBER, ERROR_NUMBER_RANGE, ERROR_COST_RANGE,
+};

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')

cypress/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "rules": {
+    "import/extensions": "off"
+  },
+  "include": ["**/*.ts"],
+}