Tests: Initial e2e tests setup

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-    "parser": "babel-flow",
+    "parser": "typescript",
     "printWidth": 100,
     "tabWidth": 4,
     "trailingComma": "es5",
     "endOfLine": "lf"
-}
+}

.storybook/main.js

@@ -18,6 +18,12 @@ module.exports = {
             ],
         });
 
+        config.module.rules.push({
+            test: /\.(ts|tsx)$/,
+            loader: require.resolve('babel-loader'),
+        });
+
+        config.resolve.extensions.push(".ts", ".tsx");
         config.resolve.modules = ["node_modules", "local_modules"];
 
         return config;

.travis.yml

@@ -27,7 +27,9 @@ install:
 before_script:
   - make lint
 script:
-  - if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then  node ./.creevey/startCI; fi
+  - if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then yarn test; fi
+  - if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then yarn test:e2e; fi
+  - if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then node ./.creevey/startCI; fi
   - if [[ ! -z "$TRAVIS_TAG" ]]; then make packages; fi
 cache:
     yarn: true

jest-puppeteer.config.js

@@ -0,0 +1,23 @@
+const path = require("path");
+
+module.exports = {
+    launch: {
+        headless: process.env.HEADLESS !== "false",
+    },
+    browser: "chromium",
+    server: [
+        {
+            command: `docker-compose -f ${path.join(
+                __dirname,
+                "src/tests/core/api/docker-compose.yml"
+            )} up`,
+            port: 8080,
+            launchTimeout: 120000,
+        },
+        {
+            command: "yarn start-with-local-api",
+            port: 9000,
+            launchTimeout: 60000,
+        },
+    ],
+};

jest.config.js

@@ -0,0 +1,13 @@
+let isE2eTests = process.env["TYPE"] === "e2e";
+// When running on code editor
+const testPathIndex = process.argv.findIndex((arg) => arg === "--runTestsByPath");
+if (testPathIndex !== -1) {
+    const testPath = process.argv[testPathIndex + 1];
+    isE2eTests = testPath.includes("/src/tests");
+}
+
+module.exports = {
+    // NOTE: ignore e2e tests when running jest with common config
+    modulePathIgnorePatterns: isE2eTests ? [] : ["/src/tests"],
+    preset: isE2eTests ? "jest-puppeteer" : undefined,
+};

package.json

@@ -11,13 +11,14 @@
         "start": "npm-run-all --parallel serve fakeapi",
         "lint": "eslint --ext .tsx --ext .ts src/",
         "test": "cross-env NODE_ENV=testing jest \"./src\"",
-        "prettier": "prettier \"./src/**/*.js\"",
+        "test:e2e": "cross-env NODE_ENV=testing TYPE=e2e jest ./src/tests --runInBand",
+        "prettier": "prettier \"./src/**/*.{ts,tsx}\"",
         "creevey": "wait-on http://localhost:9001 -t 60000 && node ./.creevey/start.js  -c ./.creevey/creevey.config.js",
         "creevey:ui": "yarn creevey --ui"
     },
     "husky": {
         "hooks": {
-            "pre-commit": "yarn lint && yarn prettier"
+            "pre-commit": "yarn lint && yarn prettier && npx tsc --noEmit"
         }
     },
     "dependencies": {
@@ -60,6 +61,9 @@
         "@storybook/addons": "^5.3.17",
         "@storybook/react": "^5.3.17",
         "@types/classnames": "^2.2.10",
+        "@types/jest": "^26.0.9",
+        "@types/jest-environment-puppeteer": "4.3.2",
+        "@types/puppeteer": "^3.0.1",
         "@types/react": "^16.9.43",
         "@types/react-dom": "^16.9.8",
         "@types/react-router-dom": "^5.1.5",
@@ -75,24 +79,26 @@
         "cross-env": "5.2.0",
         "css-loader": "^4.0.0",
         "eslint": "^7.5.0",
-        "eslint-config-prettier": "4.1.0",
+        "eslint-config-prettier": "6.11.0",
         "eslint-plugin-babel": "5.3.0",
         "eslint-plugin-flowtype": "3.4.2",
         "eslint-plugin-import": "^2.22.0",
         "eslint-plugin-jsx-a11y": "6.2.1",
-        "eslint-plugin-prettier": "3.0.1",
+        "eslint-plugin-prettier": "3.1.4",
         "eslint-plugin-react": "^7.20.3",
         "eslint-plugin-react-hooks": "^2.5.0",
         "file-loader": "^6.0.0",
         "flow-bin": "0.95.1",
         "flow-coverage-report": "0.6.1",
         "html-webpack-plugin": "3.2.0",
+        "jest-puppeteer": "4.4.0",
         "json-server": "0.14.2",
         "less": "^3.12.2",
         "less-loader": "^6.2.0",
         "mini-css-extract-plugin": "^0.9.0",
         "mockdate": "3.0.2",
-        "prettier": "1.16.4",
+        "prettier": "2.0.5",
+        "puppeteer": "5.2.1",
         "regenerator-runtime": "^0.13.5",
         "selenium-webdriver": "^4.0.0-alpha.7",
         "storybook-react-router": "1.0.3",

src/Components/AddingButton/AddingButton.tsx

@@ -9,7 +9,7 @@ interface IAddingButtonProps {
 export default function AddingButton(props: IAddingButtonProps): React.ReactNode {
     const { to } = props;
     return (
-        <Link to={to} className={cn("button")}>
+        <Link to={to} className={cn("button")} data-tid="Add Trigger">
             Add Trigger
         </Link>
     );

src/Components/NewTagBadge/NewTagBadge.jsx

@@ -18,7 +18,7 @@ export default function NewTagBadge(props: Props): React.Node {
     return (
         <div className={cn({ tag: true, removeable: onRemove, focused: focus })}>
             {onClick ? (
-                <button type="button" onClick={onClick} className={cn("title", "clickable")}>
+                <button type="button" onClick={onClick} className={cn("title", "clickable")} data-tid="New Tag">
                     <AddIcon /> {doNotShowNewTagCaption ? "" : "new tag "}
                     {title}
                 </button>

src/Components/Tag/Tag.jsx

@@ -9,6 +9,7 @@ type Props = {|
     focus?: boolean,
     onClick?: () => void,
     onRemove?: string => void,
+    "data-tid"?: string,
 |};
 
 type ColorTheme = {|
@@ -26,12 +27,12 @@ function getColor(title: string): ColorTheme {
 }
 
 export default function Tag(props: Props): React.Node {
-    const { title, focus, onRemove, onClick } = props;
+    const { title, focus, onRemove, onClick, "data-tid": dataTid } = props;
 
     if (typeof onClick === "function") {
         return (
             <div className={cn({ tag: true, focused: focus })} style={getColor(title)}>
-                <button type="button" onClick={onClick} className={cn("title", "clickable")}>
+                <button type="button" onClick={onClick} className={cn("title", "clickable")} data-tid={dataTid}>
                     {title}
                 </button>
             </div>

src/Components/TagDropdownSelect/TagDropdownSelect.jsx

@@ -19,6 +19,7 @@ type Props = {
     width: number,
     allowCreateNewTags?: boolean,
     placeholder?: string,
+    "data-tid"?: string;
 };
 
 type State = {
@@ -88,6 +89,7 @@ export default class TagDropdownSelect extends React.Component<Props, State> {
                                                         focus={i === focusedIndex - 1}
                                                         title={tag}
                                                         onClick={() => this.selectTag(tag)}
+                                                        data-tid={`Tag ${tag}`}
                                                     />
                                                 ))}
                                                 {allowCreateNewTags &&
@@ -238,7 +240,7 @@ export default class TagDropdownSelect extends React.Component<Props, State> {
     }
 
     renderInput(): React.Node {
-        const { error, value, isDisabled, placeholder } = this.props;
+        const { error, value, isDisabled, placeholder, "data-tid": dataTid } = this.props;
         const { isFocused, inputValue } = this.state;
         return (
             <div
@@ -270,6 +272,7 @@ export default class TagDropdownSelect extends React.Component<Props, State> {
                     onFocus={() => this.setState({ isFocused: true })}
                     disabled={isDisabled}
                     placeholder={value.length === 0 ? placeholder : undefined}
+                    data-tid={dataTid}
                 />
             </div>
         );

src/Components/TriggerEditForm/TriggerEditForm.jsx

@@ -122,6 +122,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                             width="100%"
                             value={name}
                             onValueChange={value => onChange({ name: value })}
+                            data-tid="Name"
                         />
                     </ValidationWrapperV1>
                 </FormRow>
@@ -131,8 +132,8 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                             value={descriptionMode}
                             onValueChange={value => this.setState({ descriptionMode: value })}
                         >
-                            <Tabs.Tab id="edit">Edit</Tabs.Tab>
-                            <Tabs.Tab id="preview">Preview</Tabs.Tab>
+                            <Tabs.Tab id="edit" data-tid="Description Edit">Edit</Tabs.Tab>
+                            <Tabs.Tab id="preview" data-tid="Description Preview">Preview</Tabs.Tab>
                         </Tabs>
                     </div>
                     {descriptionMode === "edit" ? (
@@ -141,6 +142,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                 width="100%"
                                 value={desc || ""}
                                 onValueChange={value => onChange({ desc: value })}
+                                data-tid={"Description"}
                             />
                             <EditDescriptionHelp />
                         </>
@@ -170,6 +172,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                             onValueChange={value =>
                                                 this.handleUpdateTarget(i, value)
                                             }
+                                            data-tid={`Target T${i + 1}`}
                                         />
                                     </ValidationWrapperV1>
                                 </Fill>
@@ -184,14 +187,15 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                             onValueChange={value =>
                                                 this.handleUpdateAloneMetrics(i, value)
                                             }
+                                            data-tid={`Target Single ${i + 1}`}
                                         >
                                             Single
                                         </Checkbox>
                                     </Fit>
                                 )}
                                 {targets.length > 1 && (
                                     <Fit>
-                                        <Button onClick={() => this.handleRemoveTarget(i)}>
+                                        <Button onClick={() => this.handleRemoveTarget(i)} data-tid="Target Remove">
                                             <RemoveIcon />
                                         </Button>
                                     </Fit>
@@ -283,6 +287,7 @@ export default class TriggerEditForm extends React.Component<Props, State> {
                                     tags: selectedTags,
                                 })
                             }
+                            data-tid="Tags"
                         />
                     </ValidationWrapperV1>
                 </FormRow>

src/Components/TriggerInfo/TriggerInfo.jsx

@@ -106,7 +106,7 @@ export default function TriggerInfo({
     return (
         <section>
             <header className={cn("header")}>
-                <h1 className={cn("title")}>{name != null && name !== "" ? name : "[No name]"}</h1>
+                <h1 className={cn("title")} data-tid="Name">{name != null && name !== "" ? name : "[No name]"}</h1>
                 <div className={cn("controls")}>
                     {throttling !== 0 && (
                         <span className={cn("control")}>

src/Components/TriggerSimpleModeEditor/TriggerSimpleModeEditor.jsx

@@ -77,6 +77,7 @@ export default class TriggerSimpleModeEditor extends React.Component<Props> {
                                                 value={risingValues.warn_value}
                                                 onChange={this.handleChangeWarnValue}
                                                 disabled={watchFor !== "rising"}
+                                                data-tid="WARN T1"
                                             />
                                         </ValidationWrapperV1>
                                     </Fit>
@@ -110,6 +111,7 @@ export default class TriggerSimpleModeEditor extends React.Component<Props> {
                                                 value={risingValues.error_value}
                                                 onChange={this.handleChangeErrorValue}
                                                 disabled={watchFor !== "rising"}
+                                                data-tid="ERROR T1"
                                             />
                                         </ValidationWrapperV1>
                                     </Fit>

src/Containers/TriggerAddContainer.jsx

@@ -117,7 +117,7 @@ class TriggerAddContainer extends React.Component<Props, State> {
                                                     this.handleSubmit();
                                                 }}
                                             >
-                                                Add trigger
+                                                <span data-tid="Add Trigger">Add trigger</span>
                                             </Button>
                                         </Fit>
                                         <Fit>

src/tests/addTriggerPage.test.ts

@@ -0,0 +1,23 @@
+import { clearDatabase } from "./core/utils";
+import { AddTriggerPage } from "./pages/AddTriggerPage";
+import { TriggerViewPage } from "./pages/TriggerViewPage";
+
+describe("Add trigger page", () => {
+    beforeAll(async () => {
+        await clearDatabase();
+    });
+
+    it(`create new trigger`, async () => {
+        const addTriggerPage = new AddTriggerPage(page);
+        await addTriggerPage.open();
+        await addTriggerPage.Name.type("trigger name");
+        await addTriggerPage.TargetT1.type("sumSeries(test.target.*)");
+        await addTriggerPage.WarnT1.type("10");
+        await addTriggerPage.Tags.addTag("test");
+        await addTriggerPage.AddTrigger.click();
+
+        const triggerViewPage = new TriggerViewPage(page);
+        await expect(triggerViewPage.isOpen()).resolves.toEqual(true);
+        await expect(triggerViewPage.Name).resolves.toEqual("trigger name");
+    }, 30000);
+});

src/tests/core/api/docker-compose.nginx.conf

@@ -0,0 +1,11 @@
+server {
+    listen 0.0.0.0:8083 default;
+
+    location /api/ {
+        proxy_pass http://api:8081;
+    }
+
+    location / {
+        proxy_pass http://web:80;
+    }
+}