add cypress tests for collections

cypress.config.ts

@@ -1,9 +1,17 @@
-// eslint-disable-next-line import/no-extraneous-dependencies -- cypress SHOULD be a dev dependency
 import fs from 'node:fs';
+// eslint-disable-next-line import/no-extraneous-dependencies -- cypress SHOULD be a dev dependency
 import { defineConfig } from 'cypress';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import pg from 'pg';
 
 const isCI = Boolean(process.env.CI);
 
+export type Token = {
+  sAccessToken: string;
+  sFrontToken: string;
+  sRefreshToken: string;
+};
+
 export default defineConfig({
   video: isCI,
   screenshotOnRunFailure: isCI,
@@ -13,7 +21,233 @@ export default defineConfig({
     POSTGRES_URL: 'postgresql://postgres:postgres@localhost:5432/registry',
   },
   e2e: {
-    setupNodeEvents(on) {
+    setupNodeEvents(on, config) {
+      async function connectDB(query: string) {
+        const dbUrl = new URL(config.env.POSTGRES_URL);
+        const client = new pg.Client({
+          user: dbUrl.username,
+          password: dbUrl.password,
+          host: dbUrl.hostname,
+          database: dbUrl.pathname.slice(1),
+          port: Number(dbUrl.port),
+          ssl: false,
+        });
+        await client.connect();
+        const res = await client.query(query);
+        await client.end();
+        return res.rows;
+      }
+
+      on('task', {
+        connectDB,
+        async deleteUser(email = '[email protected]') {
+          const [user] = await connectDB(`SELECT *
+                                          FROM users
+                                          WHERE email = '${email}';`);
+          if (user) {
+            await connectDB(`
+BEGIN;
+
+DELETE FROM organizations WHERE user_id = '${user.id}';
+DELETE FROM users WHERE id = '${user.id}';
+DELETE FROM supertokens_emailpassword_user_to_tenant WHERE email = '${email}';
+
+COMMIT;          
+`);
+          }
+
+          return true;
+        },
+        async createUser({
+          email = '[email protected]',
+          password = 'qwerty123',
+          firstName = 'Dima',
+          lastName = 'Test',
+        }: {
+          email?: string;
+          password?: string;
+          firstName?: string;
+          lastName?: string;
+        } = {}) {
+          const response = await fetch('http://localhost:3001/auth-api/signup', {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+              formFields: [
+                { id: 'email', value: email },
+                { id: 'password', value: password },
+                { id: 'firstName', value: firstName },
+                { id: 'lastName', value: lastName },
+              ],
+            }),
+          });
+          const data = await response.json();
+          if (response.status !== 200 || data.status === 'FIELD_ERROR') {
+            throw new Error(
+              `${response.status}: ${response.statusText}\n\n${JSON.stringify(data, null, 2)}`,
+            );
+          }
+          const result: Token = {
+            sAccessToken: response.headers.get('st-access-token')!,
+            sFrontToken: response.headers.get('front-token')!,
+            sRefreshToken: response.headers.get('st-refresh-token')!,
+          };
+          return result;
+        },
+        async login() {
+          const response = await fetch('http://localhost:3001/auth-api/signin', {
+            method: 'POST',
+            headers: {
+              'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+              formFields: [
+                { id: 'email', value: '[email protected]' },
+                { id: 'password', value: 'qwerty123' },
+              ],
+            }),
+          });
+          const data = await response.json();
+          if (response.status !== 200) {
+            throw new Error(
+              `${response.status}: ${response.statusText}\n\n${JSON.stringify(data, null, 2)}`,
+            );
+          }
+
+          const result: Token = {
+            sAccessToken: response.headers.get('st-access-token')!,
+            sFrontToken: response.headers.get('front-token')!,
+            sRefreshToken: response.headers.get('st-refresh-token')!,
+          };
+          return result;
+        },
+        async createOrganization(token) {
+          const response = await fetch('http://localhost:3001/graphql', {
+            method: 'POST',
+            headers: {
+              authorization: `Bearer ${token}`,
+              'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+              operationName: 'CreateOrganizationMutation',
+              variables: { input: { slug: 'foo' } },
+              query: /* GraphQL */ `
+                mutation CreateOrganizationMutation($input: CreateOrganizationInput!) {
+                  createOrganization(input: $input) {
+                    ok {
+                      createdOrganizationPayload {
+                        organization {
+                          id
+                          slug
+                        }
+                      }
+                    }
+                    error {
+                      message
+                    }
+                  }
+                }
+              `,
+            }),
+          });
+          const { data, errors = [] } = await response.json();
+          const error = data?.createOrganization.error;
+          if (error) {
+            errors.push(error);
+          }
+          if (!data || errors.length) {
+            throw new Error((errors as Error[]).map(error => error.message).join('\n'));
+          }
+          return data;
+        },
+        async createProject(token) {
+          const response = await fetch('http://localhost:3001/graphql', {
+            method: 'POST',
+            headers: {
+              authorization: `Bearer ${token}`,
+              'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+              operationName: 'CreateProject',
+              query: /* GraphQL */ `
+                mutation CreateProject($input: CreateProjectInput!) {
+                  createProject(input: $input) {
+                    ok {
+                      createdProject {
+                        id
+                        slug
+                      }
+                    }
+                    error {
+                      message
+                    }
+                  }
+                }
+              `,
+              variables: {
+                input: {
+                  slug: 'my-new-project',
+                  organizationSlug: 'foo',
+                  type: 'SINGLE',
+                },
+              },
+            }),
+          });
+          const { data, errors = [] } = await response.json();
+          const error = data?.createProject.error;
+          if (error) {
+            errors.push(error);
+          }
+          if (!data || errors.length) {
+            throw new Error((errors as Error[]).map(error => error.message).join('\n'));
+          }
+          return data;
+        },
+        async createCollection(token) {
+          const response = await fetch('http://localhost:3001/graphql', {
+            method: 'POST',
+            headers: {
+              authorization: `Bearer ${token}`,
+              'content-type': 'application/json',
+            },
+            body: JSON.stringify({
+              operationName: 'CreateCollection',
+              query: /* GraphQL */ `
+                mutation CreateCollection($selector: TargetSelectorInput!, $input: CreateDocumentCollectionInput!) {
+                  createDocumentCollection(selector: $selector, input: $input) {
+                    error {
+                      message
+                    }
+                  }
+                }
+              `,
+              variables: {
+                input: {
+                  description: 'Test Description',
+                  name: 'Test Collection',
+                },
+                selector: {
+                  organizationSlug: 'foo',
+                  projectSlug: 'my-new-project',
+                  targetSlug: 'development',
+                },
+              },
+            }),
+          });
+          const { data, errors = [] } = await response.json();
+          const error = data?.createDocumentCollection.error;
+          if (error) {
+            errors.push(error);
+          }
+          if (!data || errors.length) {
+            throw new Error((errors as Error[]).map(error => error.message).join('\n'));
+          }
+          return data;
+        },
+      });
+
       on('after:spec', (_, results) => {
         if (results && results.video) {
           // Do we have failures for any retry attempts?

cypress/e2e/collections.cy.ts

@@ -0,0 +1,51 @@
+import { Token } from '../../cypress.config';
+
+beforeEach(() => {
+  cy.task('deleteUser');
+  cy.task<Token>('createUser').then(result => {
+    cy.task('createOrganization', result.sAccessToken);
+    cy.task('createProject', result.sAccessToken);
+    cy.setCookie('sRefreshToken', result.sRefreshToken);
+    cy.setCookie('sAccessToken', result.sAccessToken);
+  });
+  cy.visit('/foo/my-new-project/development/laboratory');
+});
+
+describe('Laboratory Collections', () => {
+  it('should show toast when there is no collections', () => {
+    cy.dataCy('save-operation').click();
+    cy.dataCy('save-operation-as').click();
+    cy.get('.Toastify').contains('Please create a collection first.');
+  });
+
+  it('should create a collection', () => {
+    const collectionName = 'Test Collection';
+    cy.dataCy('create-collection').click();
+    cy.dataCy('collection-name').type(collectionName);
+    cy.dataCy('collection-description').type('Test Description');
+    cy.dataCy('save-collection').click();
+    cy.get('.graphiql-plugin').contains(collectionName);
+  });
+
+  it('should save operation to collection', () => {
+    cy.getCookie('sAccessToken').then(result => {
+      cy.task('createCollection', result.value);
+    });
+    cy.reload();
+    cy.get('.graphiql-query-editor .graphiql-editor textarea').type('{CMD}{A}{Backspace}', {
+      force: true,
+    });
+    cy.get('.graphiql-query-editor .graphiql-editor textarea').type('{\nfoo', {
+      force: true,
+    });
+    const operationName = 'Test Operation';
+    cy.dataCy('save-operation').click();
+    cy.dataCy('save-operation-as').click();
+    cy.dataCy('operation-name').type(operationName);
+    cy.dataCy('collections-select').click();
+    cy.dataCy('collections-select-item').first().click();
+    cy.dataCy('confirm').click();
+    cy.get('.graphiql-plugin').contains(operationName);
+    cy.get('body').contains('Operation "Test Operation" added to collection "Test Collection"');
+  });
+});