first commit

.github/workflows/test.yml

@@ -0,0 +1,35 @@
+name: Run Tests
+
+on:
+  push:
+    branches:
+      - '**'
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    env:
+      DD_API_KEY: ${{ secrets.DD_API_KEY }}
+      DD_CIVISIBILITY_AGENTLESS_ENABLED: true
+      DD_SERVICE: close-the-deal-tests
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Setup web app
+        run: npm run serve-app &
+
+      - name: Run tests
+        ## ******CLOSE THE DEAL TODO*******: SUBSTITUTE BY THE COMMAND IN THE IN APP ONBOARDING
+        #run: echo "noop" ## ******CLOSE THE DEAL TODO*******: Delete me!
+        run: npm test
+        env:
+          NODE_OPTIONS: -r dd-trace/ci/init

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.vscode
+.env
+coverage

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2
+}

CODEOWNERS

@@ -0,0 +1 @@
+* @close-the-deal-attendees

README.md

@@ -0,0 +1,85 @@
+# Close the deal exercise
+
+## 1. Test Visibility
+
+Find how to setup this project.
+
+### Fork repository
+
+First thing is to fork this repository:
+
+<img src="assets/fork-repository.png" alt="For the repository" width="400"/>
+
+It's important that you fork into the **DataDog** namespace. Choose a name like `build-and-test-close-the-deal-$YOUR_NAME`.
+
+Keep the repository page open in a tab at all times.
+
+### Set `DD_API_KEY` as secret in your repository.
+
+- Go to https://app.datadoghq.com
+- Press Cmd + K.
+- Type API Keys in the modal.
+- Search for "CI Visibility - test environment".
+- Click on "Copy"
+- Go to https://github.com/DataDog/$YOUR_REPOSITORY/settings/secrets/actions
+- Select "Secrets and Variables" -> "Actions".
+- Click on "New repository secret".
+- Name must be `DD_API_KEY`.
+- Secret must be the value you just copied.
+- Go to "Actions": enable GHA workflows.
+- Now go back to the in app onboarding.
+
+### Follow the in app onboarding
+
+- Go to https://app.datadoghq.com/ci/setup/test and follow the instructions.
+- Do **not** select the type of CI provider we're using.
+- Test framework: Jest.
+- Write your `DD_ENV`: use something that identifies you, such as "test-juan".
+- Set `DD_SERVICE` to `close-the-deal-tests`.
+
+### Enable Intelligent Test Runner
+
+- Activate the toggle.
+- Set the repository URL. It should have this shape: https://github.com/DataDog/$YOUR_REPOSITORY
+- Select "main" as default branch.
+- Click on "Save".
+
+### Enable GitHub PR comments
+
+- Activate the toggle.
+- Click on "Save".
+
+### Enable Early Flake Detection
+
+- Activate the toggle.
+- Select "main" as default branch.
+
+### Change your GHA workflow
+
+- Scroll up to the "Run your tests" section.
+- Copy the snippet of code at the right side.
+- Go to [test.yml](./.github/workflows/test.yml) and substitute the "Run tests" step's current command by the snippet.
+- **IMPORTANT**: Make sure you are not committing any API Key.
+- Commit directly to main.
+
+### See results in Datadog
+
+- Go to https://app.datadoghq.com/ci/test-services
+- Select your env (`DD_ENV` value) from the dropdown.
+- Click on the test service.
+
+## 2. Intelligent Test Runner
+
+We're going to test Intelligent Test Runner's capability to skip tests by modifying a file that's used by a single test.
+
+- Modify [array.js](./src/array.js) by uncommenting the line following the comment in `calculateAverage`.
+- Commit changes in a _different_ branch from the default branch. You can use `feature-branch-itr` or something similar.
+- See Intelligent Test Runner savings in the branch page.
+
+## 3. Early Flake Detection
+
+We're going to test Early Flake Detection's capability to detect flakiness early.
+
+- Modify [array.test.js](./tests/array.test.js) by uncommenting the last test
+- Commit changes in a _different_ branch from the default branch. You can use `feature-branch-efd` or something similar.
+- See flakiness being detected in the branch page.

app/index.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Close the Deal</title>
+    <link
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="container mt-5">
+      <h1 class="text-center">Close the Deal</h1>
+      <div class="text-center mt-4">
+        <button
+          type="button"
+          class="btn btn-primary"
+          data-toggle="modal"
+          data-target="#myModal"
+        >
+          Open Modal
+        </button>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="myModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">Hello</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">Hello</div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+  </body>
+</html>

cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+      return require('dd-trace/ci/cypress/plugin')(on, config);
+    },
+  },
+});

cypress/e2e/spec.cy.js

@@ -0,0 +1,17 @@
+describe('Modal Interaction Test', () => {
+  before(() => {
+    cy.visit(`http://127.0.0.1:${Cypress.env('WEB_APP_PORT') || 8080}`); // Replace with the actual path to your index.html file
+  });
+
+  it('should open modal and check it shows "hello"', () => {
+    // Click the button to open the modal
+    cy.get('button[data-target="#myModal"]').click();
+
+    // Wait for the modal to become visible and check its text content
+    cy.get('#myModal')
+      .should('be.visible')
+      .within(() => {
+        cy.get('.modal-body').should('contain.text', 'Hello');
+      });
+  });
+});

cypress/support/e2e.js

@@ -0,0 +1,16 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import 'dd-trace/ci/cypress/support';