initial cypress tests

cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": false,
+  "pluginsFile": false
+}

cypress/integration/layout.spec.ts

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+
+import { theme } from "theme";
+
+describe("Layout", () => {
+  beforeEach(() => {
+    cy.visit("/");
+  });
+
+  it("changes color mode with correct bg color", () => {
+    cy.get("body").should("have.backgroundColor", theme.light.bgColor);
+    cy.get("[data-cy=color-mode-toggle]").click();
+    cy.get("body").should("have.backgroundColor", theme.dark.bgColor);
+  });
+});

cypress/integration/profile.spec.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+
+describe("Profile", () => {
+  beforeEach(() => {
+    cy.visit("/u/455039198672453645");
+  });
+
+  it("avatar loads", () => {
+    cy.get("[data-cy=profile-page-avatar]").find("img");
+  });
+});

cypress/support/commands.js

@@ -0,0 +1,26 @@
+const compareColor = (color, property) => (targetElement) => {
+  const tempElement = document.createElement('div');
+  tempElement.style.color = color;
+  tempElement.style.display = 'none'; // make sure it doesn't actually render
+  document.body.appendChild(tempElement); // append so that `getComputedStyle` actually works
+
+  const tempColor = getComputedStyle(tempElement).color;
+  const targetColor = getComputedStyle(targetElement[0])[property];
+
+  document.body.removeChild(tempElement); // remove it because we're done with it
+
+  expect(tempColor).to.equal(targetColor);
+};
+
+Cypress.Commands.overwrite('should', (originalFn, subject, expectation, ...args) => {
+  const customMatchers = {
+      'have.backgroundColor': compareColor(args[0], 'backgroundColor'),
+      'have.color': compareColor(args[0], 'color'),
+  };
+
+  // See if the expectation is a string and if it is a member of Jest's expect
+  if (typeof expectation === 'string' && customMatchers[expectation]) {
+      return originalFn(subject, customMatchers[expectation]);
+  }
+  return originalFn(subject, expectation, ...args);
+});

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.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 commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -12,7 +12,8 @@
     "generate": "npx prisma generate",
     "seed": "ts-node prisma/seed.ts",
     "gen": "graphql-codegen --config codegen.yml",
-    "prettier": "prettier --write ."
+    "prettier": "prettier --write .",
+    "cypress:open": "cypress open"
   },
   "dependencies": {
     "@apollo/client": "^3.2.4",
@@ -39,6 +40,7 @@
     "@graphql-codegen/typescript-react-apollo": "2.0.7",
     "@prisma/cli": "^2.8.0",
     "@types/react": "^16.9.49",
+    "cypress": "^5.4.0",
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
     "typescript": "^4.0.3"

scenes/Layout/components/TopNav.tsx

@@ -74,6 +74,7 @@ const TopNav = () => {
     >
       <Flex alignItems="center">
         <IconButton
+          data-cy="color-mode-toggle"
           aria-label={`Switch to ${
             colorMode === "light" ? "dark" : "light"
           } mode`}

scenes/Profile/components/AvatarWithInfo.tsx

@@ -32,6 +32,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user }) => {
     <>
       <Flex flexWrap="wrap">
         <Avatar
+          data-cy="profile-page-avatar"
           name={user.fullUsername}
           src={user.avatarUrl ?? ""}
           size="2xl"

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["cypress"],
     "allowJs": false,
     "skipLibCheck": true,
     "strict": true,