Skip to content
This repository has been archived by the owner on Jul 2, 2024. It is now read-only.

Commit

Permalink
Merge branch 'main' into DEVPROD-802
Browse files Browse the repository at this point in the history
khelif96 committed Jan 17, 2024
2 parents 62c622a + 4704ad1 commit b20ddac
Showing 512 changed files with 2,143 additions and 2,082 deletions.
10 changes: 6 additions & 4 deletions .evergreen.yml
Original file line number Diff line number Diff line change
@@ -6,11 +6,13 @@ ignore:

modules:
- name: evergreen
repo: [email protected]:evergreen-ci/evergreen.git
owner: evergreen-ci
repo: evergreen
branch: main
auto_update: true
- name: logkeeper
repo: [email protected]:evergreen-ci/logkeeper.git
owner: evergreen-ci
repo: logkeeper
branch: main
auto_update: true

@@ -243,7 +245,7 @@ functions:
if [[ "${requester}" == "github_pr" || "${requester}" == "commit" ]]; then
yarn cy:run --record --key "${cypress_record_key}" --reporter junit
elif [[ "${requester}" == "patch" ]]; then
yarn cy:run --record --key "${cypress_record_key}" --reporter junit --spec ${cypress_spec}
yarn cy:run --record --key "${cypress_record_key}" --reporter junit --spec "${cypress_spec}"
else
yarn cy:run --reporter junit
fi
@@ -524,5 +526,5 @@ buildvariants:

parameters:
- key: cypress_spec
value: "cypress/integration/**/*"
value: cypress/integration/**/*
description: Specify the Cypress spec files to run for user submitted patches running the e2e_test task.
109 changes: 48 additions & 61 deletions README.md
Original file line number Diff line number Diff line change
@@ -2,32 +2,19 @@

Spruce is the React UI for MongoDB's continuous integration software.

## Table of Contents

- [Getting Started](#getting-started)
- [Running Locally](#running-locally)
- [Environment Variables](#environment-variables)
- [Deployment](#deployment)
- [Requirements](#requirements)
- [How to Deploy](#how-to-deploy)

## Getting Started

### Running Locally

1. Clone the Spruce Github repository
2. Ensure you have Node.js v16+ and MongoDB Command Line Database Tools
1. Clone the Spruce GitHub repository
2. Ensure you have Node.js v20+ and MongoDB Command Line Database Tools
v100.8.0+ installed
3. Ask a colleague for their .cmdrc.json file and follow the instructions
[here](#environment-variables)
4. Run `yarn`
5. Start a local evergreen server by doing the following:

- Clone the evergreen repo
- Run `make local-evergreen`

6. Run `yarn run dev`. This will launch the app and point it at the local
evergreen server you just ran.
3. Run `yarn install`
4. Start a local Evergreen server by doing the following:
- Clone the [Evergreen repo](https://github.com/evergreen-ci/evergreen)
- From the Evergreen directory, run `make local-evergreen`
5. Run `yarn run dev`. This will launch the app and point it at the local
Evergreen server you just started.

### Storybook

@@ -47,11 +34,11 @@ results.

1. Symlink the standard definition language GraphQL schema used in your backend
to a file named sdlschema in the root of the Spruce directory to enable query
linting with ESlint like so
linting with ESLint like so
`ln -s <path_to_evergreen_repo>/graphql/schema sdlschema`
2. Run `yarn run eslint` to see the results of query linting in your terminal or
install a plugin to integrate ESlint into your editor. If you are using
VSCode, we recommend ESLint by Dirk Baeumer.
VS Code, we recommend ESLint by Dirk Baeumer.

### Environment Variables

@@ -62,11 +49,11 @@ with non-sensitive information, and `.env-cmdrc.json` for builds deployed to S3.
This file is git ignored because it contains API keys that we do not want to
publish. It should be named `.env-cmdrc.json` and placed in the root of the
project. This file is required to deploy Spruce to production and to staging.
The credential file is located in the R&D Dev Prod 1password vault.
The credential file is located in the R&D Dev Prod 1Password vault.

## GraphQL Type Generation

We use Code generation to generate our types for our GraphQL queries and
We use code generation to generate our types for our GraphQL queries and
mutations. When you create a query or mutation you can run the code generation
script with the steps below. The types for your query/mutation response and
variables will be generated and saved to `gql/generated/types.ts`. Much of the
@@ -75,21 +62,24 @@ well and you can refer to those before creating your own.

### Setting up code generation

- create a symlink from the `schema` folder from evergreen with the spruce
folder using `ln -s <path_to_evergreen_repo>/graphql/schema sdlschema`
- Create a symlink from the `schema` folder from Evergreen to Spruce using

```bash
ln -s <path_to_evergreen_repo>/graphql/schema sdlschema
```

### Using code generation

- From within the spruce folder run `yarn codegen`
- From within the Spruce folder run `yarn codegen`
- As long as your queries are declared correctly the types should generate

### Code generation troubleshooting and tips

- Queries should be declared with a query name so the code generation knows what
to name the corresponding type.
- Each query and mutation should have a unique name.
- Since query analysis for type generation occurs statically we cant place
dynamic variables with in query strings we instead have to hard code the
- Since query analysis for type generation occurs statically we can't place
dynamic variables with in query strings. We instead have to hard code the
variable in the query or pass it in as query variable.

### Common errors
@@ -107,58 +97,55 @@ Cypress.

### Unit tests

Unit Tests are used to test individual features in isolation. We utilize the
[Jest Test Runner](https://jestjs.io/) to execute our Unit Tests and generate
Unit tests are used to test individual features in isolation. We utilize the
[Jest Test Runner](https://jestjs.io/) to execute our unit tests and generate
reports.

There are 3 types of unit tests you may encounter in this codebase.

#### Component Tests

These test React Componenents. We utilize
These test React components. We utilize
[React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
to help us write our component tests. React Testing Library provides several
utilities that are useful for making assertions on React Componenents. When
writing component tests you should import
[test_utils](https://github.com/evergreen-ci/spruce/blob/main/src/test_utils/index.tsx)
instead of React Testing Library, `test_utils` is a wrapper around React Testing
instead of React Testing Library; `test_utils` is a wrapper around React Testing
Library which provides a series of helpful utilities for common testing
scenarios such as `queryByDataCy` which is a helper for selecting `data-cy`
attributes or `renderWithRouterMatch` which is helpful for testing components
scenarios such as `queryByDataCy`, which is a helper for selecting `data-cy`
attributes, or `renderWithRouterMatch`, which is helpful for testing components
that rely on React Router.

#### Hook Tests

Often times you may find yourself writing
[custom react hooks](https://reactjs.org/docs/hooks-custom.html). The best way
to test these is using
[React Hooks Testing Library](https://react-hooks-testing-library.com/). React
Hooks Testing Library allows you to test your custom Hooks in isolation without
needing to wrap them in a Component. It provides several methods that make it
easy to assert and test different behaviors in your hooks. Such as
[`waitForNextUpdate`](https://react-hooks-testing-library.com/reference/api#waitfornextupdate)
[custom React hooks](https://reactjs.org/docs/hooks-custom.html). The best way
to test these is using React Testing Library's [`renderHook`](https://testing-library.com/docs/react-testing-library/api#renderhook) utility. This allows you to test your custom hooks in isolation without
needing to wrap them in a component. It provides several methods that make it
easy to assert and test different behaviors in your hooks. Such as [`waitFor`](https://testing-library.com/docs/dom-testing-library/api-async/#waitfor),
which will wait for your hook to rerender before allowing a test to proceed.

#### Standard utility tests

These are the most basic of tests. They do not require any special libraries to
run and often just test standard javascript functions.
run and often just test standard JavaScript functions.

- You can run all Unit Tests using `yarn test`
- You can run a specific Unit Test using `yarn test -t <test_name>`
- You can run jest in watch mode using `yarn test:watch` This will open an
interactive CLI you can use to automatically run tests as you update them.
- You can run all unit tests using `yarn test`
- You can run a specific unit test using `yarn test -t <test_name>`
- You can run Jest in watch mode using `yarn test:watch` This will open an
interactive CLI that can be used to automatically run tests as you update them.

### E2E tests

At a high level, we use [Cypress](https://www.cypress.io/) to start a virtual
browser that is running Spruce. Cypress then is able to run our test specs,
which tell it to interact with the browser in certain ways and makes assertions
about what happens in the UI. Note that you must be running the Evergreen server
on localhost:9090 for the front-end to work.
on http://localhost:9090 for the front-end to work.

In order to run the Cypress tests, do the following, assuming you have this repo
checked out and all the dependencies installed by yarn:
checked out and all the dependencies installed by Yarn:

1. Increase the limit on open files by running `ulimit -n 64000` before running
mongod in the same shell.
@@ -177,16 +164,16 @@ checked out and all the dependencies installed by yarn:

### Snapshot Tests

Snapshot tests are automatically generated when we create storybook stories.
These Tests create a snapshot of the UI and compare them to previous snapshots
which are stored as files along side your storybook stories in a `__snapshots__`
Snapshot tests are automatically generated when we create Storybook stories.
These tests create a snapshot of the UI and compare them to previous snapshots
which are stored as files along side your Storybook stories in a `__snapshots__`
directory. They try to catch unexpected UI regressions. Read more about them
[Here](https://jestjs.io/docs/snapshot-testing).
[here](https://jestjs.io/docs/snapshot-testing).

## How to get data for your feature

If you need more data to be able to test out your feature locally the easiest
way to do it is to populate the local db using real data from the staging or
If you need more data to be able to test out your feature locally, the easiest
way to do so is to populate the local db using real data from the staging or
production environments.

1. You should identify if the data you need is located in the staging or prod db
@@ -244,22 +231,22 @@ so you don't accidently export an entire collection you can do this by passing a

### Logkeeper

Spruce has a minimal dependency on Logkeeper: it is used for Cypress tests on
Spruce has a minimal dependency on Logkeeper: it is used by Cypress tests on
the Job Logs page. If you'd like to get set up to develop these tests, complete
the following:

1. Clone the [Logkeeper Repository](https://github.com/evergreen-ci/logkeeper)
2. Run `yarn bootstrap-logkeeper` to download some sample resmoke logs from S3.
1. Clone the [Logkeeper repository](https://github.com/evergreen-ci/logkeeper)
2. Run `yarn bootstrap-logkeeper` within Spruce to download some sample resmoke logs from S3.
3. Run the command output by the previous step to seed the env variables and
start the local logkeeper server at http://localhost:8080.

## Deployment

### Requirements

You must be on the `main` Branch if deploying to prod.
You must be on the `main` branch if deploying to prod.

A `.cmdrc.json` file is required to deploy because it sets the environment
An `.env-cmdrc.json` file is required to deploy because it sets the environment
variables that the application needs in production and staging environments. See
[Environment Variables](#environment-variables) section for more info about this
file.
4 changes: 2 additions & 2 deletions codegen.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export const getConfig = ({
generatedFileName: string;
} & Pick<CodegenConfig, "silent">): CodegenConfig => ({
documents: ["./src/**/*.ts", "./src/**/*.graphql", "./src/**/*.gql"].map(
(d) => path.resolve(__dirname, d)
(d) => path.resolve(__dirname, d),
),
generates: {
[generatedFileName]: {
@@ -36,7 +36,7 @@ export const getConfig = ({

export const generatedFileName = path.resolve(
__dirname,
"./src/gql/generated/types.ts"
"./src/gql/generated/types.ts",
);

export default getConfig({
4 changes: 2 additions & 2 deletions cypress/integration/banners/slack_notification_banner.ts
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ describe("Slack notification banner", () => {
cy.dataCy(slackNotificationBanner).should("exist");

cy.visit(
"/task/evergreen_ubuntu1604_dist_patch_33016573166a36bd5f46b4111151899d5c4e95b1_5ecedafb562343215a7ff297_20_05_27_21_39_46/logs?execution=1"
"/task/evergreen_ubuntu1604_dist_patch_33016573166a36bd5f46b4111151899d5c4e95b1_5ecedafb562343215a7ff297_20_05_27_21_39_46/logs?execution=1",
);
cy.dataCy(slackNotificationBanner).should("exist");
});
@@ -33,7 +33,7 @@ describe("Slack notification banner", () => {
cy.dataCy(slackNotificationBanner).should("not.exist");
cy.validateToast(
"success",
"You will now receive Slack notifications when your patches fail or succeed"
"You will now receive Slack notifications when your patches fail or succeed",
);

cy.visit("/preferences/notifications");
10 changes: 5 additions & 5 deletions cypress/integration/breadcrumbs.ts
Original file line number Diff line number Diff line change
@@ -2,15 +2,15 @@ describe("Viewing a patch", () => {
describe("Viewing a user's own patch", () => {
beforeEach(() => {
cy.visit(
"/task/mci_ubuntu1604_test_command_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47"
"/task/mci_ubuntu1604_test_command_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47",
);
});
it("Clicking on the display task breadcrumb should take you to that task", () => {
cy.dataCy("bc-display-task").should("include.text", "asdf");
cy.dataCy("bc-display-task").click();
cy.url().should(
"include",
"/task/mci_ubuntu1604_display_asdf_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47"
"/task/mci_ubuntu1604_display_asdf_patch_a1d2c8f70bf5c543de8b9641ac1ec08def1ddb26_5f74d99ab2373627c047c5e5_20_09_30_19_16_47",
);
});
it("Clicking the 'My Patches' breadcrumb goes to the logged in user's Patches Page when the current patch belongs to the logged in user", () => {
@@ -21,7 +21,7 @@ describe("Viewing a patch", () => {
describe("Viewing another user's patch", () => {
beforeEach(() => {
cy.visit(
"/task/evergreen_ubuntu1604_dist_patch_33016573166a36bd5f46b4111151899d5c4e95b1_5ecedafb562343215a7ff297_20_05_27_21_39_46"
"/task/evergreen_ubuntu1604_dist_patch_33016573166a36bd5f46b4111151899d5c4e95b1_5ecedafb562343215a7ff297_20_05_27_21_39_46",
);
});
it("Clicking on the patch name breadcrumb from a task should take you to that version", () => {
@@ -40,13 +40,13 @@ describe("Viewing a patch", () => {
describe("Viewing a mainline commit", () => {
beforeEach(() => {
cy.visit(
"/task/evergreen_ubuntu1604_test_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48"
"/task/evergreen_ubuntu1604_test_service_patch_5e823e1f28baeaa22ae00823d83e03082cd148ab_5e4ff3abe3c3317e352062e4_20_02_21_15_13_48",
);
});
it("Clicking the commit message breadcrumb from a task should take you to that version", () => {
cy.dataCy("bc-message").should(
"include.text",
"5e823e1 - 'ever…reen/pull/3186)"
"5e823e1 - 'ever…reen/pull/3186)",
);
cy.dataCy("bc-message").click();
cy.url().should("include", "/version/5e4ff3abe3c3317e352062e4");
6 changes: 3 additions & 3 deletions cypress/integration/commit_queue.ts
Original file line number Diff line number Diff line change
@@ -54,7 +54,7 @@ describe("commit queue page", () => {
cy.dataCy("commit-queue-message").should("exist");
cy.dataCy("commit-queue-message").should(
"contain.text",
"This is the commit queue"
"This is the commit queue",
);
});

@@ -68,8 +68,8 @@ describe("commit queue page", () => {
"some other commit",
"crazy cool commit!!!",
"mega commit",
][index]
)
][index],
),
);
});
});
2 changes: 1 addition & 1 deletion cypress/integration/container/container_events.ts
Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@ describe("Container events", () => {
.should(
"have.attr",
"href",
"/task/logkeeper_ubuntu_test_edd78c1d581bf757a880777b00685321685a8e67_16_10_20_21_58_58?execution=0"
"/task/logkeeper_ubuntu_test_edd78c1d581bf757a880777b00685321685a8e67_16_10_20_21_58_58?execution=0",
);
});
});
6 changes: 3 additions & 3 deletions cypress/integration/distroSettings/general_section.ts
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@ describe("general section", () => {
cy.dataCy("save-settings-button").should(
"have.attr",
"aria-disabled",
"true"
"true",
);

// Update fields.
@@ -27,7 +27,7 @@ describe("general section", () => {
cy.getInputByLabel("Alias").should("have.value", "localhost-alias");
cy.getInputByLabel("Notes").should("have.value", "this is a note");
cy.getInputByLabel("Disable shallow clone for this distro").should(
"be.checked"
"be.checked",
);

// Undo changes.
@@ -47,7 +47,7 @@ describe("general section", () => {

it("warns users that the distro will not be spawned for tasks", () => {
cy.contains(
"Distro is a container pool, so it cannot be spawned for tasks."
"Distro is a container pool, so it cannot be spawned for tasks.",
).should("be.visible");
});
});
Loading

0 comments on commit b20ddac

Please sign in to comment.