initail commit

Author: takahash

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: ci
+on:
+  push:
+
+jobs:
+  test:
+    name: Build and Test
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 2
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: corepack enable yarn
+      - id: yarn
+        run: echo "cache-dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.yarn.outputs.cache-dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install dependencies
+        run: yarn
+      - name: Test
+        run: yarn test

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-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/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# 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 variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# 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
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["ZixuanChen.vitest-explorer"]
+}

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -0,0 +1 @@
+# ueq-study-vitest

__tests__/script.dom.test.ts

@@ -0,0 +1,35 @@
+import { test, expect, describe, beforeEach } from "vitest";
+import { screen } from "@testing-library/dom";
+
+import { main } from "../script_dom";
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <a data-testid="a" href=""></a>
+    <section data-testid="section">
+      <div data-testid="temp" id="temp">temp content</div>
+    </section>
+  `;
+});
+
+describe("DOM操作の問題", () => {
+  test("リンクが正しく追加されている", () => {
+    main();
+    const a = screen.queryByTestId<HTMLAnchorElement>("a");
+    expect(a?.textContent).toEqual("REDIMPULZ");
+    expect(a?.href).toEqual("https://redimpulz.com/");
+  });
+
+  test("section要素の下に指定の要素が追加されている", () => {
+    main();
+    const section = screen.queryByTestId("section");
+    expect(section).toContainHTML(
+      '<p class="highlight">We hope you enjoy JavaScript.</p>'
+    );
+  });
+
+  test("IDがtempの要素が削除されている", () => {
+    main();
+    expect(screen.queryByTestId("temp")).toEqual(null);
+  });
+});

__tests__/script_class.test.ts

@@ -0,0 +1,20 @@
+import { describe, test, expect, beforeEach } from "vitest";
+import { Calculator } from "../script_class";
+
+describe("Calculatorのテスト", () => {
+  let calculator;
+
+  beforeEach(() => {
+    calculator = new Calculator();
+  });
+
+  test("足し算ができる", () => {
+    const result = calculator.add(3, 5);
+    expect(result).toBe(8);
+  });
+
+  test("引き算ができる", () => {
+    const result = calculator.subtract(10, 4);
+    expect(result).toBe(6);
+  });
+});

__tests__/script_func.test.ts

@@ -0,0 +1,22 @@
+import { describe, test, expect } from "vitest";
+import { add, subtract, getOjb, getArr } from "../script_func";
+
+describe("add関数のテスト", () => {
+  test("引数を足し算する", () => expect(add(3, 5)).toBe(8));
+});
+
+describe("substruct関数のテスト", () => {
+  test("引数を引き算する", () => expect(subtract(10, 4)).toBe(6));
+});
+
+describe("getObj関数のテスト", () => {
+  test("オブジェクトが等しい", () =>
+    expect(getOjb()).toEqual({
+      id: 1,
+      name: "hoge",
+    }));
+});
+
+describe("getArr関数のテスト", () => {
+  test("オブジェクトが等しい", () => expect(getArr()).toContain(1));
+});

__tests__/script_mock.test.ts

@@ -0,0 +1,30 @@
+import { describe, test, expect, vi } from "vitest";
+import { func1, func2, obj, func3 } from "../script_mock";
+
+describe("func1のテスト", () => {
+  test("モックした関数が呼ばれる", () => {
+    const mockFunction = vi.fn();
+    func1(3, 5, mockFunction);
+    expect(mockFunction).toHaveBeenCalledWith(8);
+  });
+});
+
+describe("func2のテスト", () => {
+  test("モックしたオブジェクトのメソッドが呼ばれる", () => {
+    const spy = vi.spyOn(obj, "f");
+    func2(3, 5);
+    expect(spy).toHaveBeenCalledWith(8);
+    // const spy = vi.spyOn(global.console, "log");
+  });
+});
+
+describe("func3のテスト", () => {
+  test("モックしたモジュールが使われる", () => {
+    vi.mock("../calc", () => {
+      return {
+        multi: () => 10,
+      };
+    });
+    expect(func3(3, 5)).toBe(10);
+  });
+});

calc.js

@@ -0,0 +1,3 @@
+export const multi = (a, b) => {
+  return a * b;
+};

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <link rel="stylesheet" type="text/css" href="./style.css">
+</head>
+<body>
+
+<a href=""></a>
+<section>
+  <div id="temp">temp content</div>
+</section>
+
+</body>
+<script type="module" src="./script_dom.js"></script>
+</html>
+

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "ueq-study-vitest",
+  "version": "1.0.0",
+  "devDependencies": {
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@vitest/coverage-v8": "^0.34.1",
+    "@vitest/ui": "^1.5.0",
+    "vitest": "^0.34.1"
+  },
+  "dependencies": {
+    "happy-dom": "^12.9.0",
+    "vite": "^5.2.9"
+  },
+  "type": "module",
+  "scripts": {
+    "test": "vitest"
+  },
+  "volta": {
+    "node": "18.17.1",
+    "yarn": "4.0.2"
+  }
+}

script_class.js

@@ -0,0 +1,8 @@
+export class Calculator {
+  add(a, b) {
+    return a + b;
+  }
+  subtract(a, b) {
+    return a - b;
+  }
+}

script_dom.js

@@ -0,0 +1,16 @@
+export const main = () => {
+  const link = document.querySelector("a");
+  link.textContent = "REDIMPULZ";
+  link.href = "https://redimpulz.com/";
+
+  const section = document.querySelector("section");
+  const p = document.createElement("p");
+  p.textContent = "We hope you enjoy JavaScript.";
+  section.appendChild(p);
+  p.setAttribute("class", "highlight");
+
+  const temp = document.querySelector("#temp");
+  section.removeChild(temp);
+};
+
+window.addEventListener("load", main);

script_func.js

@@ -0,0 +1,18 @@
+export const add = (a, b) => {
+  return a + b;
+};
+
+export const subtract = (a, b) => {
+  return a - b;
+};
+
+export const getOjb = () => {
+  return {
+    id: 1,
+    name: "hoge",
+  };
+};
+
+export const getArr = () => {
+  return [1, 2, 3];
+};

script_mock.js

@@ -0,0 +1,17 @@
+import { multi } from "./calc";
+
+export const func1 = (a, b, f) => {
+  f(a + b);
+};
+
+export const obj = {
+  f: (v) => console.log(v),
+};
+
+export const func2 = (a, b) => {
+  obj.f(a + b);
+};
+
+export const func3 = (a, b) => {
+  return multi(a, b);
+};