Merge branch 'main' of https://github.com/evergreen-ci/spruce into EV…

…G-19995

.evergreen.yml

@@ -392,6 +392,7 @@ functions:
       script: |
         echo "Generating .env-cmdrc.json"
         REACT_APP_BUGSNAG_API_KEY=${REACT_APP_BUGSNAG_API_KEY} \
+        REACT_APP_SENTRY_AUTH_TOKEN=${REACT_APP_SENTRY_AUTH_TOKEN} \
         REACT_APP_SENTRY_DSN=${REACT_APP_SENTRY_DSN} \
         REACT_APP_NEW_RELIC_ACCOUNT_ID=${REACT_APP_NEW_RELIC_ACCOUNT_ID} \
         REACT_APP_NEW_RELIC_AGENT_ID=${REACT_APP_NEW_RELIC_AGENT_ID} \

src/setupTests.ts → config/jest/setupTests.ts

@@ -2,7 +2,7 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";
+import "@testing-library/jest-dom";
 import MutationObserver from "mutation-observer";
 
 // @ts-ignore
@@ -16,3 +16,16 @@ window.crypto.randomUUID = (() => {
     return value.toString();
   };
 })();
+
+// Mock focus-trap-react to prevent errors in tests that use modals. focus-trap-react is a package used
+// by LeafyGreen and is not a direct dependency of Spruce.
+jest.mock(
+  "focus-trap-react",
+  () => {
+    const focusTrap = jest.requireActual(
+      "focus-trap-react"
+    );
+    focusTrap.prototype.setupFocusTrap = () => null;
+    return focusTrap;
+  }
+);

cypress/integration/commit_queue.ts

@@ -3,13 +3,11 @@ const commitQueue = {
   id2: "mongodb-mongo-test",
   id3: "non-existent-item",
   id4: "evergreen",
-  id5: "logkeeper",
 };
 const COMMIT_QUEUE_ROUTE_1 = `/commit-queue/${commitQueue.id1}`;
 const COMMIT_QUEUE_ROUTE_2 = `/commit-queue/${commitQueue.id2}`;
 const INVALID_COMMIT_QUEUE_ROUTE = `/commit-queue/${commitQueue.id3}`;
 const COMMIT_QUEUE_ROUTE_4 = `/commit-queue/${commitQueue.id4}`;
-const COMMIT_QUEUE_ROUTE_PR = `/commit-queue/${commitQueue.id5}`;
 
 describe("commit queue page", { testIsolation: false }, () => {
   describe(COMMIT_QUEUE_ROUTE_1, () => {
@@ -84,32 +82,4 @@ describe("commit queue page", { testIsolation: false }, () => {
       cy.validateToast("error", "There was an error loading the commit queue");
     });
   });
-
-  describe(COMMIT_QUEUE_ROUTE_PR, () => {
-    before(() => {
-      cy.visit(COMMIT_QUEUE_ROUTE_PR);
-    });
-    it("Clicking on remove a patch for the PR commit queue should work", () => {
-      cy.dataCy("commit-queue-card").should("have.length", 1);
-      cy.dataCy("commit-queue-card-title").should(
-        "have.text",
-        "patch description here"
-      );
-      cy.dataCy("commit-queue-card-title").within(() => {
-        cy.get("a").should(
-          "have.attr",
-          "href",
-          "https://github.com/logkeeper/logkeeper/pull/1234"
-        );
-      });
-      cy.dataCy("commit-queue-patch-button").should("exist");
-      cy.dataCy("commit-queue-patch-button").click();
-      cy.dataCy("commit-queue-confirmation-modal").should("be.visible");
-      cy.dataCy("commit-queue-confirmation-modal").within(() => {
-        cy.contains("Remove").click();
-      });
-      cy.dataCy("commit-queue-confirmation-modal").should("not.exist");
-      cy.dataCy("commit-queue-card").should("not.exist");
-    });
-  });
 });

cypress/integration/distroSettings/provider_section.ts

@@ -0,0 +1,38 @@
+import { save } from "./utils";
+
+describe("provider section", () => {
+  beforeEach(() => {
+    cy.visit("/distro/localhost/settings/provider");
+  });
+
+  it("successfully updates static provider fields", () => {
+    cy.dataCy("provider-select").contains("Static IP/VM");
+
+    // Correct fields are displayed
+    cy.dataCy("provider-settings").within(() => {
+      cy.get("button").should("have.length", 1);
+      cy.get("textarea").should("have.length", 1);
+      cy.get("input[type=checkbox]").should("have.length", 1);
+      cy.get("input[type=text]").should("have.length", 0);
+    });
+
+    cy.getInputByLabel("User Data").type("my user data");
+    cy.getInputByLabel("Merge with existing user data").check({
+      force: true,
+    });
+    cy.contains("button", "Add security group").click();
+    cy.getInputByLabel("Security Group ID").type("group-1234");
+
+    save();
+    cy.validateToast("success");
+
+    cy.getInputByLabel("User Data").clear();
+    cy.getInputByLabel("Merge with existing user data").uncheck({
+      force: true,
+    });
+    cy.dataCy("delete-item-button").click();
+
+    save();
+    cy.validateToast("success");
+  });
+});

cypress/integration/projectSettings/project_settings.ts

@@ -197,7 +197,7 @@ describe("Repo Settings", { testIsolation: false }, () => {
 
       countCQFields(2);
       cy.dataCy("cq-enabled-radio-box").children().first().click();
-      countCQFields(7);
+      countCQFields(4);
 
       cy.dataCy("error-banner")
         .contains(
@@ -206,8 +206,16 @@ describe("Repo Settings", { testIsolation: false }, () => {
         .should("exist");
     });
 
-    it("Presents three options for merge method", () => {
+    it("Shows merge method only if merge queue is Evergreen", () => {
       const selectId = "merge-method-select";
+
+      // Hides merge method for GitHub.
+      cy.getInputByLabel("GitHub").check({ force: true });
+      cy.dataCy(selectId).should("not.exist");
+
+      // Shows merge method for Evergreen.
+      cy.getInputByLabel("Evergreen").check({ force: true });
+      cy.dataCy(selectId).should("exist");
       cy.get(`button[name=${selectId}]`).click();
       cy.get(`#${selectId}-menu`).children().should("have.length", 3);
       cy.get(`#${selectId}-menu`).children().first().click();

jest.config.js

@@ -14,7 +14,7 @@ module.exports = {
   modulePaths: ["<rootDir>/src"],
   resetMocks: true,
   setupFiles: ["react-app-polyfill/jsdom", "jest-canvas-mock"],
-  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+  setupFilesAfterEnv: ["<rootDir>/config/jest/setupTests.ts"],
   snapshotSerializers: ["@emotion/jest/serializer"],
   testEnvironment: "jsdom",
   testMatch: ["<rootDir>/{src,scripts}/**/*.{spec,test}.{js,jsx,ts,tsx}"],
@@ -40,7 +40,5 @@ module.exports = {
     "jest-watch-typeahead/testname",
   ],
   globalSetup: "<rootDir>/global-setup.js",
-  globals: {
-    APP_VERSION: JSON.stringify(process.env.npm_package_version),
-  },
+  testTimeout: 30000,
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spruce",
-  "version": "3.0.128",
+  "version": "3.0.132",
   "private": true,
   "scripts": {
     "bootstrap-logkeeper": "./scripts/bootstrap-logkeeper.sh",
@@ -57,7 +57,7 @@
     "@apollo/client": "3.6.9",
     "@bugsnag/js": "7.20.2",
     "@bugsnag/plugin-react": "7.18.0",
-    "@emotion/css": "11.11.0",
+    "@emotion/css": "11.11.2",
     "@emotion/react": "11.11.0",
     "@emotion/styled": "11.11.0",
     "@leafygreen-ui/badge": "8.0.2",
@@ -137,11 +137,12 @@
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/eslint-plugin": "11.11.0",
     "@emotion/jest": "11.11.0",
-    "@graphql-codegen/cli": "3.2.2",
-    "@graphql-codegen/typescript": "3.0.2",
-    "@graphql-codegen/typescript-operations": "3.0.2",
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/typescript": "4.0.1",
+    "@graphql-codegen/typescript-operations": "4.0.1",
     "@graphql-eslint/eslint-plugin": "3.18.0",
     "@originjs/vite-plugin-commonjs": "1.0.3",
+    "@sentry/vite-plugin": "2.6.2",
     "@storybook/addon-actions": "7.0.21",
     "@storybook/addon-essentials": "7.0.21",
     "@storybook/addon-interactions": "7.0.21",
@@ -151,10 +152,9 @@
     "@storybook/react-vite": "7.0.21",
     "@storybook/testing-library": "0.2.0",
     "@styled/typescript-styled-plugin": "1.0.0",
-    "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.0",
-    "@testing-library/user-event": "12.5.0",
+    "@testing-library/jest-dom": "6.1.2",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/user-event": "14.4.3",
     "@types/jest": "29.4.0",
     "@types/js-cookie": "^3.0.2",
     "@types/lodash.debounce": "4.0.7",

scripts/setup-credentials.js

@@ -13,6 +13,7 @@ const production = {
   REACT_APP_SPRUCE_URL: "https://spruce.mongodb.com",
   REACT_APP_RELEASE_STAGE: "production",
   REACT_APP_BUGSNAG_API_KEY: process.env.REACT_APP_BUGSNAG_API_KEY,
+  REACT_APP_SENTRY_AUTH_TOKEN: process.env.REACT_APP_SENTRY_AUTH_TOKEN,
   REACT_APP_SENTRY_DSN: process.env.REACT_APP_SENTRY_DSN,
   REACT_APP_NEW_RELIC_ACCOUNT_ID: process.env.REACT_APP_NEW_RELIC_ACCOUNT_ID,
   REACT_APP_NEW_RELIC_AGENT_ID: process.env.REACT_APP_NEW_RELIC_AGENT_ID,

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -21,6 +21,7 @@ describe("breadcrumbs", () => {
     expect(screen.queryAllByDataCy("breadcrumb-chevron")).toHaveLength(1);
   });
   it("breadcrumbs with long text should be collapsed and viewable with a tooltip", async () => {
+    const user = userEvent.setup();
     const longMessage = "some really long string that could be a patch title";
     const breadcrumbs = [{ text: longMessage }];
     render(<Breadcrumbs breadcrumbs={breadcrumbs} />);
@@ -29,31 +30,29 @@ describe("breadcrumbs", () => {
     expect(
       screen.getByText(trimStringFromMiddle(longMessage, 30))
     ).toBeInTheDocument();
-    userEvent.hover(screen.getByText(trimStringFromMiddle(longMessage, 30)));
+    await user.hover(screen.getByText(trimStringFromMiddle(longMessage, 30)));
     await waitFor(() => {
       expect(screen.getByDataCy("breadcrumb-tooltip")).toBeInTheDocument();
     });
     expect(screen.getByText(longMessage)).toBeInTheDocument();
   });
   it("should not display a tooltip if the text is short", async () => {
+    const user = userEvent.setup();
     const shortMessage = "short";
     const breadcrumbs = [{ text: shortMessage }];
     render(<Breadcrumbs breadcrumbs={breadcrumbs} />);
     expect(screen.getByText(shortMessage)).toBeInTheDocument();
-    userEvent.hover(screen.getByText(shortMessage));
-    await waitFor(() => {
-      expect(
-        screen.queryByDataCy("breadcrumb-tooltip")
-      ).not.toBeInTheDocument();
-    });
+    await user.hover(screen.getByText(shortMessage));
+    expect(screen.queryByDataCy("breadcrumb-tooltip")).not.toBeInTheDocument();
   });
-  it("clicking on a tooltip with a link and event handler should call the event", () => {
+  it("clicking on a tooltip with a link and event handler should call the event", async () => {
+    const user = userEvent.setup();
     const onClick = jest.fn();
     const breadcrumbs = [{ text: "test", onClick, to: "/" }];
     render(<Breadcrumbs breadcrumbs={breadcrumbs} />);
     expect(screen.getByText("test")).toBeInTheDocument();
     expect(screen.getByRole("link")).toHaveAttribute("href", "/");
-    userEvent.click(screen.getByText("test"));
+    await user.click(screen.getByText("test"));
     expect(onClick).toHaveBeenCalledTimes(1);
   });
 });

src/components/CommitChartLabel/CommitChartLabel.test.tsx

@@ -24,7 +24,8 @@ describe("commitChartLabel", () => {
   it("displays author, githash and createTime", () => {
     renderWithRouterMatch(<RenderCommitChartLabel version={versionShort} />);
     expect(screen.queryByDataCy("commit-label")).toHaveTextContent(
-      "4137c33 Jun 16, 2021, 11:38 PM Mohamed Khelif"
+      "4137c33 Jun 16, 2021, 11:38 PM Mohamed Khelif -SERVER-57332 Create skeleton Internal" +
+        "Git Tags: v1.2.3, v1.2.3-rc0"
     );
   });
 
@@ -50,7 +51,8 @@ describe("commitChartLabel", () => {
     renderWithRouterMatch(<RenderCommitChartLabel version={versionLong} />);
     expect(screen.getByText("more")).toBeInTheDocument();
     expect(screen.queryByDataCy("commit-label")).toHaveTextContent(
-      "4137c33 Jun 16, 2021, 11:38 PM Mohamed Khelif -SERVER-57332 Create skeleton Internal...more"
+      "4137c33 Jun 16, 2021, 11:38 PM Mohamed Khelif -SERVER-57332 Create skeleton Internal...more" +
+        "Git Tags: v1.2.3, v1.2.3-rc0"
     );
   });
 
@@ -62,11 +64,11 @@ describe("commitChartLabel", () => {
   });
 
   it("clicking on the 'more' button should open a tooltip containing commit message", async () => {
+    const user = userEvent.setup();
     renderWithRouterMatch(<RenderCommitChartLabel version={versionLong} />);
 
     expect(screen.queryByDataCy("long-commit-message-tooltip")).toBeNull();
-    userEvent.click(screen.queryByText("more"));
-
+    await user.click(screen.queryByText("more"));
     await waitFor(() => {
       expect(
         screen.getByDataCy("long-commit-message-tooltip")

src/components/Dropdown/Dropdown.test.tsx

@@ -9,33 +9,39 @@ describe("dropdown", () => {
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
   });
 
-  it("clicking on the button opens and closes the dropdown", () => {
+  it("clicking on the button opens and closes the dropdown", async () => {
+    const user = userEvent.setup();
     render(<Dropdown buttonText="Some Button"> {children()} </Dropdown>);
-    expect(screen.getByText("Some Button")).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Some Button" });
+    expect(button).toBeInTheDocument();
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
-    userEvent.click(screen.queryByText("Some Button"));
+    await user.click(button);
     expect(screen.getByText("Some Children")).toBeInTheDocument();
-    userEvent.click(screen.queryByText("Some Button"));
+    await user.click(button);
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
   });
 
-  it("clicking on the dropdown contents should not close the dropdown", () => {
+  it("clicking on the dropdown contents should not close the dropdown", async () => {
+    const user = userEvent.setup();
     render(<Dropdown buttonText="Some Button"> {children()} </Dropdown>);
-    expect(screen.getByText("Some Button")).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Some Button" });
+    expect(button).toBeInTheDocument();
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
-    userEvent.click(screen.queryByText("Some Button"));
+    await user.click(button);
     expect(screen.getByText("Some Children")).toBeInTheDocument();
-    userEvent.click(screen.queryByText("Some Children"));
+    await user.click(screen.queryByText("Some Children"));
     expect(screen.getByText("Some Children")).toBeInTheDocument();
   });
 
-  it("clicking outside the button and dropdown closes the dropdown", () => {
+  it("clicking outside the button and dropdown closes the dropdown", async () => {
+    const user = userEvent.setup();
     render(<Dropdown buttonText="Some Button"> {children()} </Dropdown>);
-    expect(screen.getByText("Some Button")).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Some Button" });
+    expect(button).toBeInTheDocument();
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
-    userEvent.click(screen.queryByText("Some Button"));
+    await user.click(button);
     expect(screen.getByText("Some Children")).toBeInTheDocument();
-    userEvent.click(document.body);
+    await user.click(document.body);
     expect(screen.queryByText("Some Children")).not.toBeInTheDocument();
   });