Dev2

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: "plugin:react/recommended",
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: "latest",
+    },
+    plugins: ["@typescript-eslint", "react"],
+    rules: {},
+};

.github/workflows/commitlint.yml

@@ -0,0 +1,11 @@
+name: Lint Commit Messages
+on: [push]
+
+jobs:
+  commitlint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: wagoid/commitlint-github-action@v5

.github/workflows/testpr.yml

@@ -0,0 +1,20 @@
+name: Test PR and lint
+on:
+    pull_request:
+        branches:
+            - "main"
+jobs:
+    unint-tests:
+        runs-on: ubuntu-22.04
+        steps:
+            - name: Get repo code
+              uses: actions/checkout@v3
+            - name: Install dependencies
+              run: npm ci
+            - name: Start unit-tests
+              run: |
+                  for commit in $(git rev-list ${{ github.base_ref }}..${{ github.head_ref }}); do
+                    git checkout $commit
+                    npm run lint
+                    npm test
+                  done

README.md

@@ -1,7 +1,10 @@
+1. Добавил `config` файлы для commitlint и добавил workflows для github [commitlint.yml](https://github.com/AparinAA/unit-demo-cra/blob/dev1/.github/workflows/commitlint.yml) . Делать коммит для проверки через с именем `'refactor: commitText'` , либо в любов виде: соглашаения о коммитах.
+2. Добавил [testpr.yml](https://github.com/AparinAA/unit-demo-cra/blob/dev1/.github/workflows/testpr.yml) для тестирования и проверки линтером pull requests
+
 В этом репозитории находится пример приложения с тестами:
 
-- [e2e тесты](e2e/example.spec.ts)
-- [unit тесты](src/example.test.tsx)
+-   [e2e тесты](e2e/example.spec.ts)
+-   [unit тесты](src/example.test.tsx)
 
 Для запуска примеров необходимо установить [NodeJS](https://nodejs.org/en/download/) 16 или выше.
 

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] };

package.json

@@ -31,7 +31,8 @@
         "eject": "react-scripts eject",
         "test": "react-scripts test",
         "e2e": "playwright test --project=chromium && playwright show-report",
-        "test-ci": "CI=true npm test -- --reporters=\"default\" --reporters=\"jest-html-reporter\" --reporters=\"jest-teamcity\""
+        "test-ci": "CI=true npm test -- --reporters=\"default\" --reporters=\"jest-html-reporter\" --reporters=\"jest-teamcity\"",
+        "lint": "./node_modules/.bin/eslint src/"
     },
     "eslintConfig": {
         "extends": [
@@ -59,6 +60,7 @@
     "devDependencies": {
         "@playwright/test": "^1.28.0",
         "@types/react-helmet": "^6.1.5",
+        "eslint": "^8.45.0",
         "jest-html-reporter": "^3.7.0"
     }
 }

src/example.test.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/react-in-jsx-scope */
 import { it, expect } from "@jest/globals";
 import { render } from "@testing-library/react";
 import events from "@testing-library/user-event";
@@ -10,37 +11,36 @@ import { initStore } from "./store";
 import { Application } from "./Application";
 
 it('по адресу /about должна открываться страница "о проекте"', () => {
-  const store = initStore();
-  const application = (
-    <MemoryRouter initialEntries={["/about"]} initialIndex={0}>
-      <Provider store={store}>
-        <Application />
-      </Provider>
-    </MemoryRouter>
-  );
-
-  const { getByTestId } = render(application);
-
-  expect(getByTestId("page-title").textContent).toEqual("About");
+    const store = initStore();
+    const application = (
+        <MemoryRouter initialEntries={["/about"]} initialIndex={0}>
+            <Provider store={store}>
+                <Application />
+            </Provider>
+        </MemoryRouter>
+    );
+
+    const { getByTestId } = render(application);
+    expect(getByTestId("page-title").textContent).toEqual("About");
 });
 
 it("если добавить элемент, он появляется в списке", async () => {
-  const store = initStore();
-  const application = (
-    <BrowserRouter>
-      <Provider store={store}>
-        <Application />
-      </Provider>
-    </BrowserRouter>
-  );
+    const store = initStore();
+    const application = (
+        <BrowserRouter>
+            <Provider store={store}>
+                <Application />
+            </Provider>
+        </BrowserRouter>
+    );
 
-  const { getByTestId, getAllByTestId } = render(application);
+    const { getByTestId, getAllByTestId } = render(application);
 
-  await events.type(getByTestId("input-add"), "Сделать домашку");
+    await events.type(getByTestId("input-add"), "Сделать домашку");
 
-  await events.click(getByTestId("button-add"));
+    await events.click(getByTestId("button-add"));
 
-  const items = getAllByTestId("list-item");
+    const items = getAllByTestId("list-item");
 
-  expect(items.map((el) => el.textContent)).toContain("Сделать домашку");
+    expect(items.map((el) => el.textContent)).toContain("Сделать домашку");
 });

src/pages/About.tsx

@@ -2,13 +2,13 @@ import { FC } from "react";
 import { Helmet } from "react-helmet";
 
 export const About: FC = () => {
-  return (
-    <>
-      <Helmet>
-        <title>About page</title>
-      </Helmet>
-      <h1 data-testid="page-title">About</h1>
-      <p>This is an example application.</p>
-    </>
-  );
+    return (
+        <>
+            <Helmet>
+                <title>About page</title>
+            </Helmet>
+            <h1 data-testid="page-title">About</h1>
+            <p>This is an example application.</p>
+        </>
+    );
 };

src/pages/Home.tsx

@@ -4,14 +4,14 @@ import { Helmet } from "react-helmet";
 import { TodoList } from "../components/TodoList";
 
 export const Home: FC = () => {
-  return (
-    <>
-      <Helmet>
-        <title>Home page</title>
-      </Helmet>
-      <h1 data-testid="page-title">Home</h1>
-      <p>This is the list.</p>
-      <TodoList />
-    </>
-  );
+    return (
+        <>
+            <Helmet>
+                <title>Home page</title>
+            </Helmet>
+            <h1 data-testid="page-title">Home</h1>
+            <p>This is the list.</p>
+            <TodoList />
+        </>
+    );
 };