Tests: Initial e2e tests setup (#332)

* Tests: config integration tests

Add "Add trigger" test
Add "Navigate to Add trigger page" test

* Find the redis instance name and put into clearDatabase expression

* Storybook with typescript

Co-authored-by: Vladimir Sorokin <v_sorokin@kontur>

.creevey/start.js

@@ -3,7 +3,7 @@ const path = require("path");
 
 require("@babel/register")({
     babelrc: false,
-    extensions: [".js", ".jsx"],
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
     presets: [
         "@babel/preset-flow",
         [
@@ -14,6 +14,7 @@ require("@babel/register")({
                 },
             }
         ],
+        "@babel/typescript",
         "@babel/preset-react"
     ],
     plugins: [

.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/**/*.ts\"",
+        "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": {
@@ -61,6 +62,8 @@
         "@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",
@@ -76,22 +79,24 @@
         "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",
         "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/Api/MoiraApi.ts

@@ -159,7 +159,7 @@ export default class MoiraApi implements IMoiraApi {
 
     async getSettings(): Promise<Settings> {
         const result = await this.get<Settings>("/user/settings");
-        result.subscriptions.forEach(s => {
+        result.subscriptions.forEach((s) => {
             // eslint-disable-next-line no-param-reassign
             s.tags = s.tags === null ? [] : s.tags;
         });

src/Api/MoiraApiInjection.tsx

@@ -10,11 +10,11 @@ export function withMoiraApi<ComponentProps extends { moiraApi: IMoiraApi }>(
 ): React.ComponentType<Omit<ComponentProps, "moiraApi">> {
     function ComponentWithApi(props: Omit<ComponentProps, "moiraApi">) {
         const moiraApi = React.useContext(ApiContext);
-        return <Component {...props as ComponentProps} moiraApi={moiraApi} />;
+        return <Component {...(props as ComponentProps)} moiraApi={moiraApi} />;
     }
 
-    ComponentWithApi.displayName = `withApi(${Component.displayName ||
-        Component.name ||
-        "Component"})`;
+    ComponentWithApi.displayName = `withApi(${
+        Component.displayName || Component.name || "Component"
+    })`;
     return ComponentWithApi;
 }

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/Domain/Schedule.ts

@@ -32,7 +32,7 @@ export const WholeWeek: DaysOfWeek[] = [
 
 export function createSchedule(days: DaysOfWeek[]): Schedule {
     return {
-        days: WholeWeek.map(x => ({ enabled: days.includes(x), name: x })),
+        days: WholeWeek.map((x) => ({ enabled: days.includes(x), name: x })),
         tzOffset: new Date().getTimezoneOffset(),
         startOffset: 0,
         endOffset: 1439,

src/helpers/PromiseUtils.ts

@@ -1,3 +1,3 @@
 export default function delay(timeout: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, timeout));
+    return new Promise((resolve) => setTimeout(resolve, timeout));
 }

src/helpers/check-mobile.ts

@@ -15,6 +15,6 @@ const check = {
 };
 
 const checkMobile = (userAgent: string): boolean =>
-    Object.values(check).some(callback => callback(userAgent));
+    Object.values(check).some((callback) => callback(userAgent));
 
 export default checkMobile;

src/helpers/group-metrics-by-statuses.ts

@@ -13,7 +13,7 @@ export interface IMetricByStatuses {
 function groupMetricsByStatuses(metrics: MetricList): IMetricByStatuses {
     const result: IMetricByStatuses = {};
 
-    Object.keys(metrics).forEach(metricName => {
+    Object.keys(metrics).forEach((metricName) => {
         const metric = metrics[metricName];
         const { state } = metric;
 

src/logic/parseLocalStorage.ts

@@ -23,7 +23,7 @@ function parseLocalStorage(localData: string): MoiraUrlParams {
             - что onlyProblems будет булевым
         */
         if (Array.isArray(tags)) {
-            result.tags = tags.map(value => value.toString());
+            result.tags = tags.map((value) => value.toString());
         }
         if (onlyProblems !== undefined) {
             result.onlyProblems = onlyProblems === "false" ? false : Boolean(onlyProblems);

src/logic/parseLocationSearch.ts

@@ -26,7 +26,7 @@ function parseLocationSearch(search: string): MoiraUrlParams {
         result.page = parseInt(page, 10);
     }
     if (Array.isArray(tags)) {
-        result.tags = tags.map(value => value.toString());
+        result.tags = tags.map((value) => value.toString());
     }
     if (onlyProblems !== undefined) {
         result.onlyProblems = onlyProblems === "false" ? false : Boolean(onlyProblems);

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);
+});