Travis config, Typescript config with basic interfaces, basic tests

.eslintrc

@@ -1,23 +1,47 @@
 {
-  "parser": "babel-eslint",
-  "extends": [
-    "standard",
-    "standard-react"
-  ],
-  "env": {
-    "es6": true
-  },
-  "plugins": [
-    "react"
-  ],
-  "parserOptions": {
-    "sourceType": "module"
+  "globals": {
+    "window": "writable",
+    "document": "writable",
+    "localStorage": "writable",
+    "fetch": "readonly",
+    "FormData": "readonly",
+    "FileReader": "readonly",
+    "Headers": "readonly",
+    "navigator": "readonly",
+    "it": "readonly",
+    "test": "readonly",
+    "beforeEach": "readonly",
+    "describe": "readonly",
+    "expect": "readonly",
+    "cy": "readonly",
+    "should": "readonly"
   },
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier", "react", "jsx-a11y", "import"],
   "rules": {
-    // don't force es6 functions to include space before paren
-    "space-before-function-paren": 0,
-
-    // allow specifying true explicitly for boolean props
-    "react/jsx-boolean-value": 0
-  }
+    "prettier/prettier": ["error"],
+    "import/prefer-default-export": "off", // disabled because we don't want default exports in utils files etc.
+    "import/no-unresolved": "off", // disabled to allow absolute path imports
+    "prefer-template": "off", // disable because it is not necessary and valuable
+    "react/jsx-wrap-multilines": 0, // disabled because it's made automatically with prettier
+    "no-use-before-define": ["error", { "functions": false }], // disabled for making more structured components
+    "no-param-reassign": ["error", { "props": false }], // disabled to allow using draft, previous state props
+    "no-console": ["error", { "allow": ["warn", "error"] }], // warn and error logs are allowed for debug purposes
+    "jsx-a11y/label-has-for": [
+      "error",
+      {
+        "required": {
+          "every": ["id"]
+        }
+      }
+    ], // require only passing htmlFor to the label, nesting is an option
+    "import/no-extraneous-dependencies": 0 // allow dev dependencies
+  },
+  "parser": "babel-eslint",
+  "overrides": [
+    {
+      "files": ["*test.js", "*test.jsx", "utils.jsx"],
+      "rules": {}
+    }
+  ]
 }

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "proseWrap": "always"
+}

.travis.yml

@@ -2,14 +2,7 @@ language: node_js
 node_js:
   - 12
 script:
+  - npm run build
   - npm run lint
   - npm run test
-before_deploy:
-  - npm run build
-deploy:
-  provider: npm
-  email: "$NPM_EMAIL"
-  api_key: "$NPM_API_TOKEN"
-  skip_cleanup: true
-  on:
-    branch: master
+  - npm run test-example

__tests__/exampleRendering.test.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { clickOnComponent } from "./utils";
+import App from "../example/src/App";
+
+describe("Example view", () => {
+  describe("When example view has been rendered", () => {
+    const environment = {};
+
+    beforeEach(async () => {
+      const component = render(<App />);
+      const { getByTestId, getByAltText, getAllByText, container } = component;
+      environment.component = component;
+      // set controls buttons
+      environment.toggleBtn = getByTestId("toggle-button");
+      environment.zoomInBtn = getByTestId("zoom-in-button");
+      environment.zoomOutBtn = getByTestId("zoom-out-button");
+      environment.resetBtn = getByTestId("reset-button");
+      // set transform content
+      environment.transformComponent = container.querySelector(
+        ".react-transform-element",
+      );
+      // set transform element
+      environment.getImgElement = () => getByAltText("example-image");
+      environment.getTextElement = () => getAllByText(/Lorem ipsum/)[0];
+    });
+    test("it renders entire example without errors", () => {
+      const { container } = environment.component;
+      expect(container).toBeDefined();
+    });
+    test("it renders toggle button without errors", () => {
+      const { toggleBtn } = environment;
+      expect(toggleBtn).toBeDefined();
+    });
+    test("it renders zoom in button without errors", () => {
+      const { zoomInBtn } = environment;
+      expect(zoomInBtn).toBeDefined();
+    });
+    test("it renders zoom out button without errors", () => {
+      const { zoomOutBtn } = environment;
+      expect(zoomOutBtn).toBeDefined();
+    });
+    test("it renders reset button without errors", () => {
+      const { resetBtn } = environment;
+      expect(resetBtn).toBeDefined();
+    });
+    test("it renders transform component without errors", () => {
+      const { transformComponent } = environment;
+      expect(transformComponent).toBeDefined();
+    });
+    test("it renders image element without errors", () => {
+      const { getImgElement } = environment;
+      expect(getImgElement()).toBeDefined();
+    });
+    test("it renders text element without errors when toggle button get clicked", () => {
+      const { getTextElement, toggleBtn } = environment;
+      clickOnComponent(toggleBtn);
+      expect(getTextElement()).toBeDefined();
+    });
+  });
+});

__tests__/props.test.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import {
+  TransformWrapper,
+  TransformComponent
+} from "./node_modules/react-zoom-pan-pinch";
+import { clickOnComponent } from "./utils";
+import logoImg from "../../logo/logo.png";
+
+const App = (
+  <TransformWrapper>
+    <TransformComponent>
+      <img className="zoom" src={logoImg} alt="example" />
+    </TransformComponent>
+  </TransformWrapper>
+);
+
+describe("Library components", () => {
+  describe("When library components have been rendered", () => {
+    const environment = {};
+
+    beforeEach(async () => {
+      const component = render(<App />);
+      const { container } = component;
+      environment.component = component;
+      environment.transformComponent = container.querySelector(
+        ".react-transform-element"
+      );
+    });
+    describe("When library components have been rendered", () => {
+      test("it renders transform component without errors", () => {
+        const { transformComponent } = environment;
+        expect(transformComponent).toBeDefined();
+      });
+    });
+  });
+});

example/package.json

@@ -14,7 +14,6 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
 }