// spec.ts file
it('Create Query Action', createQueryAction);

// test.ts file (simplified version)
export const createMutationAction = () => {
  // ...
  clearActionDef();
  typeIntoActionDef(statements.createMutationActionText);
  clearActionTypes();
  // ...
};

// test.ts file contains the clearActionDef, typeIntoActionDef, etc.
const clearActionDef = () => {
  cy.get('textarea').first().type('{selectall}', { force: true });
  cy.get('textarea').first().trigger('keydown', {
    keyCode: 46,
    which: 46,
    force: true,
  });
};

// test.ts file contains also the statements
const statements = {
  createMutationActionText: `type Mutation {
    login (username: String!, password: String!): LoginResponse
  }`,
  createMutationCustomType: `type LoginResponse {
    accessToken: String!
  }
  `,
  createMutationHandler: 'https://hasura-actions-demo.glitch.me/login',
  // ...
}

it('Create Query Action', () => {
  cy.get('textarea').eq(0).as('actionDefinitionTextarea');
  cy.get('textarea').eq(1).as('typeConfigurationTextarea');

  cy.get('@actionDefinitionTextarea')
    .clearConsoleTextarea()
    .type(
    `type Mutation {
        login (username: String!, password: String!): LoginResponse
      }`,
    { force: true, delay: 0 }
  );

  cy.get('@typeConfigurationTextarea')
    .clearConsoleTextarea()
    .type(
    `type LoginResponse {
      accessToken: String!
    }
    `,
    { force: true, delay: 0 }
  );

  // ...
})

/**
 * Clear a Console's textarea.
 * Work around cy.clear sometimes not
 * working in the Console's textareas.
 */
Cypress.Commands.add('clearConsoleTextarea',
  { prevSubject: 'element' },
  el => {
    cy.wrap(el).type('{selectall}',
      { force: true })
      .trigger('keydown', {
        keyCode: 46,
        which: 46,
        force: true,
      });
});

// ❌ bad abstraction
export const expectNotification = (
  {
    type,
    title,
    message,
  }: {
    type: 'success' | 'error';
    title: string;
    message?: string;
  },

  timeout = 10000
) => {
  const el = cy.get(
    type === 'success' ? '.notification-success' : '.notification-error',
    { timeout }
  );

  el.should('be.visible');
  el.should('contain', title);

  if (message) el.should('contain', message);
};



// ✅ good abstraction
function expectSuccessNotification(title: string) {
  cy.get('.notification-success')
    .should('be.visible')
    .should('contain', title)
}

START (the application state is empty)

Test 1: create the entity

Test 2: modify the entity

Test 3: delete the entity

END (the application state is empty)

1.  START (the application state is empty)

2.  Test 1: create the entity
    1.  BEFORE: Load the page (the application state is empty)
    2.  create the entity
    3.  AFTER: Delete the entity (the application state is empty)

3.  Test 2: modify the entity
    1.  BEFORE: create the entity (through APIs)
    2.  BEFORE: Load the page (the application state is empty)
    3.  modify the entity
    4.  AFTER: Delete the entity (through APIs, the application state is empty)

4.  Test 3: delete the entity
    1.  BEFORE: create the entity (through APIs)
    2.  BEFORE: Load the page (the application state is empty)
    3.  delete the entity
    4.  AFTER: Delete the action (the application state is empty)

5.  END (the application state is empty)

1.  START (the application state is empty)

2.  Test 1: create the entity
    1.  BEFORE: Does the entity exist?
        1.  NO: it's ok!
        2.  YES: delete the entity (through APIs)

    2.  BEFORE: Load the page (the application state is empty)
    3.  create the entity

3.  Test 2: modify the entity
    1.  BEFORE: Does the entity exist?
        1.  YES: it's ok!
        2.  NO: create the entity (through APIs)
    2.  BEFORE: Does the entity already includes the change the test is going to make?
        1.  YES: it's ok!
        2.  NO: modify the entity (through APIs)
    3.  BEFORE: Are we already on the correct page?
        1.  YES: it's ok!
        2.  NO: load the page
    4.  modify the entity

And so on...

1.  START (the application state is empty)

2.  Test: CRUD
  1.  BEFORE: Delete the entity if it exists (the application state is empty)
  
  2.  BEFORE: Load the page
  
  3.  create the entity
  
  4.  modify the entity
  
  5.  delete the entity
  
  6.  AFTER: Delete the entity if it exists (the application state is empty)

3.  END (the application state is empty)