skillbox/client/cypress/e2e/frontend/modules/snapshots.spec.js

import module from '../../../fixtures/module.minimal';
import {getMinimalMe} from '../../../support/helpers';
import {hasOperationName} from '../../../support/graphql';

const mockDeleteSnapshot = (success) => {
  cy.intercept('POST', '/api/graphql', (req) => {
    if (hasOperationName(req, 'DeleteSnapshot')) {
      let result;
      if (success) {
        result = {
              message: 'yay!',
              __typename: 'Success'
            };
      } else {
        result = {
          reason: 'Not the owner',
          __typename: 'NotOwner'
        };
      }
      req.reply({
        data: {
          deleteSnapshot: {
            result
          }
        },
      });

    }
  });
};

const mockUpdateSnapshot = (title) => {
  cy.intercept('POST', '/api/graphql', (req) => {
    if (hasOperationName(req, 'UpdateSnapshot')) {
      let snapshot;
      if (title) {
        snapshot = {
          __typename: 'SnapshotNode',
          id: 'U25hcHNob3ROb2RlOjQ=',
          title,
        };
      } else {
        snapshot = {
          __typename: 'NotOwner',
          reason: 'Not the owner'
        };
      }
      req.reply({
        data: {
          updateSnapshot: {
            snapshot,
          },
        },
      });
    }
  });

};


describe('Snapshot', () => {
  const operations = isTeacher => ({
    operations: {
      MeQuery: getMinimalMe({isTeacher}),
      ModuleDetailsQuery: {
        module,
      },
      CreateSnapshot: {
        createSnapshot: {
          snapshot: {
            id: '',
            title: '',
            created: '',
            creator: '',
          },
          success: true,
        },
      },
      UpdateLastModule: {},
      ModuleSnapshotsQuery: {
        module: {
          ...module,
          snapshots: [
            {
              id: 'U25hcHNob3ROb2RlOjQ=',
              title: 'Old Title',
              created: '2020-01-01',
              mine: true,
              shared: false,
              creator: 'me',
            },
            {
              id: 'U25hcHNob3ROb2RlOjU=',
              title: 'Shared snapshot',
              created: '2020-01-02',
              mine: false,
              shared: true,
              creator: 'someone else',
            },
          ],
        },
      },
      SnapshotDetail: {
        snapshot: {
          chapters: [],
          module: {}
        }
      },
      ApplySnapshot: {
        applySnapshot: {
          success: true
        }
      }
    },
  });

  beforeEach(() => {
    cy.setup();
  });

  it('Menu is visible for teacher', () => {
    cy.mockGraphqlOps(operations(true));
    cy.visit('module/miteinander-reden/');
    cy.getByDataCy('snapshot-menu').should('be.visible');
  });

  it('Menu is not visible for student', () => {
    cy.mockGraphqlOps(operations(false));
    cy.visit('module/miteinander-reden/');

    cy.getByDataCy('module-title').should('be.visible');
    cy.getByDataCy('snapshot-menu').should('not.exist');
  });

  it('Creates Snapshot', () => {
    cy.mockGraphqlOps(operations(true));
    cy.visit('module/miteinander-reden/');
    cy.getByDataCy('module-snapshots-button').click();
    cy.getByDataCy('create-snapshot-button').click();
    cy.getByDataCy('show-all-snapshots-button').click();
    cy.getByDataCy('snapshot-list').should('exist').within(() => {
      cy.get('.snapshots__snapshot').should('have.length', 1);
    });
  });

  it('Applies Snapshot', () => {
    cy.mockGraphqlOps(operations(true));
    cy.visit('module/miteinander-reden/snapshots');
    cy.getByDataCy('snapshot-link').click();
    cy.getByDataCy('apply-checkbox').click();
    cy.getByDataCy('apply-button').click();

    cy.getByDataCy('module-title').should('exist');
    cy.getByDataCy('snapshot-header').should('not.exist');
  });

  it('Renames Snapshot', () => {
    cy.mockGraphqlOps(operations(true));
    const newTitle = 'New Title';
    mockUpdateSnapshot(newTitle);
    cy.visit('module/miteinander-reden/snapshots');
    cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
    cy.getByDataCy('rename-snapshot-button').click();
    cy.getByDataCy('edit-name-input').clear().type(newTitle);
    cy.getByDataCy('modal-save-button').click();
    cy.getByDataCy('snapshot-link').should('have.text', 'New Title');
  });

  it('Deletes Snapshot', () => {
    cy.mockGraphqlOps(operations(true));
    mockDeleteSnapshot(true);
    cy.visit('module/miteinander-reden/snapshots');
    cy.getByDataCy('snapshot-entry').should('have.length', 1);
    cy.getByDataCy('delete-snapshot-button').click();
    cy.getByDataCy('modal-save-button').click();
    cy.getByDataCy('snapshot-entry').should('have.length', 0);
  });

  it('Displays the Snapshot list correcly', () => {
    cy.mockGraphqlOps(operations(true));
    cy.visit('module/miteinander-reden/snapshots');
    cy.getByDataCy('snapshot-entry').should('have.length', 1);
    cy.getByDataCy('delete-snapshot-button').should('exist');
    cy.getByDataCy('rename-snapshot-button').should('exist');
    cy.getByDataCy('snapshot-link').should('have.text', 'Old Title');
    cy.getByDataCy('team-snapshots-link').click();
    cy.getByDataCy('snapshot-entry').should('have.length', 1);
    cy.getByDataCy('snapshot-link').should('have.text', 'Shared snapshot');
    cy.getByDataCy('delete-snapshot-button').should('not.exist');
    cy.getByDataCy('rename-snapshot-button').should('not.exist');
  });
});