ci: adds basic e2e tests (#446)

* chore: add basic e2e tests

* chore: update e2e tests to use fixed time in the day

* chore: remove unnecessary snapshots

cypress/README.md

@@ -29,7 +29,7 @@ It requires docker installed and available under the `docker` binary in `PATH`.
 
 To just run without updating the snapshots, run
 ```
-CYPRESS_updateSnapshots=false yarn cy:ss
+yarn cy:ss-check
 ```
 
 ## Why

cypress/integration/e2e.ts

@@ -1,19 +1,79 @@
 // Following tests should have NO mocking involved.
 // The objective involve validating server/webapp interaction is working correctly
-// Therefore we can't really validate certain states
-//
-// TODO
-// somehow seed the database?
+import { v4 as uuidv4 } from 'uuid';
+import * as moment from 'moment';
+
 describe('E2E Tests', () => {
+  // TODO:
+  // instead of generating a new application
+  // delete the old one?
+  let appName = '';
+  // use a fixed time IN THE DAY so that the hours in the timeline are always the same
+  const t0 = moment().startOf('day').unix();
+  const t1 = moment().startOf('day').add(3, 'minutes').unix();
+  const t2 = moment().startOf('day').add(5, 'minutes').unix();
+  const t3 = moment().startOf('day').add(6, 'minutes').unix();
+  const t4 = moment().startOf('day').add(10, 'minutes').unix();
+
+  before(() => {
+    appName = uuidv4();
+
+    // populate the db with 2 items
+    //
+    // it's important that they are recent
+    // otherwise the database may just drop them
+    // if they are older than the retention date
+
+    cy.request({
+      method: 'POST',
+      url: `/ingest?name=${appName}&sampleRate=100&from=${t1}&until=${t1}`,
+      body: 'foo;bar 100',
+    });
+
+    cy.request({
+      method: 'POST',
+      url: `/ingest?name=${appName}&sampleRate=100&from=${t3}&until=${t3}`,
+      body: 'foo;bar;baz 10',
+    });
+  });
+
   it('tests single view', () => {
-    cy.visit('/');
+    cy.visit(`/?query=${appName}&from=${t0}&until=${t4}`);
+
+    cy.findByTestId('flamegraph-canvas').matchImageSnapshot(
+      `e2e-single-flamegraph`
+    );
   });
 
   it('tests /comparison view', () => {
-    cy.visit('/comparison');
+    cy.visit(
+      `/comparison?query=${appName}&leftFrom=${t0}&leftUntil=${t2}&rightFrom=${t2}&rightUntil=${t4}&from=${t0}&until=${t4}`
+    );
+
+    const findFlamegraph = (n: number) => {
+      const query = `> :nth-child(${n})`;
+
+      return cy.findByTestId('comparison-container').find(query);
+    };
+
+    // flamegraph 1 (the left one)
+    findFlamegraph(1)
+      .findByTestId('flamegraph-canvas')
+      .matchImageSnapshot(`e2e-comparison-flamegraph-left`);
+
+    // flamegraph 2 (the right one)
+    findFlamegraph(2)
+      .findByTestId('flamegraph-canvas')
+      .matchImageSnapshot(`e2e-comparison-flamegraph-right`);
   });
 
   it('tests /comparison-diff view', () => {
-    cy.visit('/comparison-diff');
+    cy.visit(
+      `/comparison-diff?query=${appName}&from=${t2}&until=${t4}&leftFrom=${t0}&leftUntil=${t2}`
+    );
+
+    cy.findByTestId('flamegraph-canvas').matchImageSnapshot(
+      `e2e-comparison-diff-flamegraph`
+    );
   });
 });

package.json

@@ -19,6 +19,7 @@
     "cy:open": "cypress open",
     "cy:ci": "cypress run",
     "cy:ss": "./scripts/cypress-screenshots.sh",
+    "cy:ss-check": "CYPRESS_updateSnapshots=false ./scripts/cypress-screenshots.sh",
     "prepare": "husky install",
     "lint-staged": "lint-staged"
   },
@@ -80,6 +81,7 @@
     "sync-request": "^6.1.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.4.3",
+    "uuid": "^8.3.2",
     "webpack": "~5.51.1",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.8.0",