test: integrate cypress

cypress/e2e/auth-user.ts

@@ -0,0 +1,12 @@
+export default function authUser() {
+  cy.visit('http://127.0.0.1:3000/login');
+  cy.getBySel('login-header').should('exist');
+  cy.getBySel('login-form').should('exist');
+  cy.getBySel('email-input').should('exist');
+  cy.getBySel('password-input').should('exist');
+  cy.getBySel('login-button').should('exist');
+  cy.getBySel('email-input').type('cypress@example.com');
+  cy.getBySel('password-input').type('Password123!');
+  cy.getBySel('login-button').click();
+  cy.url().should('include', '/home');
+}

cypress/e2e/event-create.cy.ts

@@ -0,0 +1,9 @@
+import authUser from './auth-user';
+
+describe('event creation', () => {
+  it('loads', () => {
+    authUser();
+
+    // cy.visit('http://127.0.0.1:3000/events/new'); // TODO: Add event creation tests
+  });
+});

cypress/e2e/login.cy.ts

@@ -0,0 +1,45 @@
+describe('login and register', () => {
+  it('loads', () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('login-header').should('exist');
+  });
+
+  it('shows register form', () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('register-switch').click();
+
+    cy.getBySel('register-form').should('exist');
+    cy.getBySel('first-name-input').should('exist');
+    cy.getBySel('last-name-input').should('exist');
+    cy.getBySel('email-input').should('exist');
+    cy.getBySel('username-input').should('exist');
+    cy.getBySel('password-input').should('exist');
+    cy.getBySel('confirm-password-input').should('exist');
+    cy.getBySel('register-button').should('exist');
+  });
+
+  it('allows to register', async () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('register-switch').click();
+
+    cy.getBySel('first-name-input').type('Test');
+    cy.getBySel('last-name-input').type('User');
+    cy.getBySel('email-input').type('test@example.com');
+    cy.getBySel('username-input').type('testuser');
+    cy.getBySel('password-input').type('Password123!');
+    cy.getBySel('confirm-password-input').type('Password123!');
+    cy.getBySel('register-button').click();
+    cy.getBySel('login-header').should('exist');
+    cy.getBySel('login-form').should('exist');
+    cy.getBySel('email-input').should('exist');
+    cy.getBySel('password-input').should('exist');
+    cy.getBySel('login-button').should('exist');
+    cy.getBySel('email-input').type('test@example.com');
+    cy.getBySel('password-input').type('Password123!');
+    cy.getBySel('login-button').click();
+    cy.url().should('include', '/home');
+  });
+});

cypress/e2e/seed.ts

@@ -0,0 +1,29 @@
+import { PrismaClient } from '../../src/generated/prisma';
+
+const prisma = new PrismaClient();
+
+export default async function requireUser() {
+  await prisma.$transaction(async (tx) => {
+    const { id } = await tx.user.create({
+      data: {
+        email: 'cypress@example.com',
+        name: 'cypress',
+        password_hash:
+          '$2a$10$FmkVRHXzMb63dLHHwG1mDOepZJirL.U964wU/3Xr7cFis8XdRh8sO',
+        first_name: 'Cypress',
+        last_name: 'Tester',
+        emailVerified: new Date(),
+      },
+    });
+
+    await tx.account.create({
+      data: {
+        userId: id,
+        type: 'credentials',
+        provider: 'credentials',
+        providerAccountId: id,
+      },
+    });
+  });
+}
+requireUser();

cypress/support/commands.ts

@@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-cy=${selector}]`, ...args);
+});
+
+Cypress.Commands.add('getBySelLike', (selector, ...args) => {
+  return cy.get(`[data-cy*=${selector}]`, ...args);
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getBySel(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+      getBySelLike(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+export {};

cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,38 @@
+// ***********************************************************
+// This example support/component.ts 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 '@/app/globals.css';
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+import { mount } from 'cypress/react';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts 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';