skillbox/client/cypress/integration/school-class.spec.js

const schema = require('../fixtures/schema.json');
const me = require('../fixtures/me.join-class.json');
const selectedClass = require('../fixtures/selected-school-class.json');

describe('Class Management', () => {
  beforeEach(() => {
    cy.server();

    cy.mockGraphql({
      schema: schema,
    });

    cy.viewport('macbook-15');
    cy.apolloLogin('rahel.cueni', 'test');

  });

  it('should join class', () => {
    const name = 'KF1A';
    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
    const __typename = 'SchoolClassNode';

    let localMe = {
      ...me
    };

    cy.mockGraphqlOps({
      operations: {
        MeQuery: localMe,
        // JoinClass() {
        //   // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
        //   let schoolClass = {
        //     id,
        //     name,
        //     // __typename
        //   };
        //   // localMe.me.schoolClasses.edges.push({
        //   //   node: schoolClass,
        //   //   __typename: 'SchoolClassNodeEdge'
        //   // });
        //   return {
        //     joinClass: {
        //       success: true,
        //       schoolClass
        //     }
        //   }
        // },
        JoinClass: {
          joinClass: {
            success: true,
            schoolClass: {
              name,
              id
            }
          }
        },
        MySchoolClassQuery: {
          me: {
            ...selectedClass.me,
            selectedClass: {
              __typename,
              name,
              id,
              members: []
            }
          }
        }
      }
    });

    cy.visit('/me/profile');

    cy.get('[data-cy=header-user-widget]').within(() => {
      cy.get('[data-cy=user-widget-avatar]').click();
    });
    //
    cy.get('[data-cy=class-selection]').click();
    cy.get('[data-cy=class-selection-entry]').should('have.length', 1);
    cy.get('[data-cy=class-selection]').click();

    cy.get('[data-cy=join-class-link]').click();

    cy.get('[data-cy=input-class-code]').type('XXXX');
    cy.get('[data-cy=join-class]').click();

    cy.get('[data-cy=school-class-name]').should('contain', name);
    cy.get('[data-cy=current-class-name]').should('contain', name);

    cy.get('[data-cy=header-user-widget]').within(() => {
      cy.get('[data-cy=user-widget-avatar]').click();
    });

    cy.get('[data-cy=class-selection]').click();
    cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
    //
  });

  it('should not be able to leave class', () => {
    cy.mockGraphqlOps({
      operations: {
        MeQuery: me,
        MySchoolClassQuery: selectedClass
      }
    });

    cy.visit('/me/my-class');
    cy.get('[data-cy=school-class-member]').should('have.length', 2);
    cy.get('[data-cy=remove-from-class]').should('have.length', 0);
    cy.get('[data-cy=add-to-class]').should('have.length', 0);
  });

  it('should leave and re-join class', () => {
    const teacher = {
      me: {
        ...me.me,
        isTeacher: true
      }
    };
    const teacherSelectedClass = {
      me: {
        ...selectedClass.me,
        isTeacher: true
      }
    };
    cy.mockGraphqlOps({
      operations: {
        MeQuery: teacher,
        AddRemoveMember: {
          addRemoveMember: {
            success: true
          }
        },
        MySchoolClassQuery: teacherSelectedClass
      }
    });

    cy.visit('/me/my-class');
    cy.get('[data-cy=active-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 2)
    });
    cy.get('[data-cy=inactive-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 0)
    });

    cy.get('[data-cy=remove-from-class]').first().click();

    cy.get('[data-cy=active-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 1)
    });
    cy.get('[data-cy=inactive-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 1)
    });

    cy.get('[data-cy=add-to-class]').first().click();

    cy.get('[data-cy=active-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 2)
    });
    cy.get('[data-cy=inactive-class-members-list]').within(() => {
      cy.get('[data-cy=school-class-member]').should('have.length', 0)
    });
  });

  it('should display old classes', () => {
    let oldClasses = me.me.schoolClasses;
    let OldClassesQuery = {
      me: {
        ...me.me,
        oldClasses
      },
    };

    cy.mockGraphqlOps({
      operations: {
        MeQuery: me,
        OldClassesQuery
      }
    });

    cy.visit('/me/old-classes');

    cy.get('[data-cy=old-class-item]').should('have.length', 1);

  });

  it('changes class name', () => {
    let className = 'Gotta have class';

    cy.mockGraphqlOps({
      operations: {
        MeQuery: me,
        MySchoolClassQuery: selectedClass,
        UpdateSchoolClass: {
          updateSchoolClass: {
            success: true,
            schoolClass: {
              name: className,
              __typename: 'SchoolClassNode'
            },
            __typename: 'UpdateSchoolClassPayload'
          }
        }
      }
    });

    cy.visit('/me/my-class');

    cy.get('[data-cy=edit-class-name-link]').click();
    cy.get('[data-cy=edit-class-name-input]').type('{selectall}{backspace}').type(className);
    cy.get('[data-cy=modal-save-button]').click();
    cy.get('[data-cy=school-class-name]').should('contain', className);
  });

  it.only('creates a new class', () => {
    const name = 'Moordale';
    const id = 'U2Nob29sQ2xhc3NOb2RlOjI=';
    const __typename = "SchoolClassNode";
    let localMe = {...me};

    cy.mockGraphqlOps({
      operations: {
        MeQuery: () => {
          return localMe;
        },
        CreateSchoolClass() {
          // fixme: is this necessary? the cache somehow does not seem to do anything for the MeQuery
          let schoolClass = {
            id,
            name,
            __typename
          };
          // localMe.me.schoolClasses.edges.push({
          //   node: schoolClass,
          //   __typename: 'SchoolClassNodeEdge'
          // });
          return {
            createSchoolClass: {
              success: true,
              schoolClass
            }
          }
        },
        MySchoolClassQuery: {
          me: {
            ...selectedClass.me,
            selectedClass: {
              __typename,
              name,
              id,
              members: []
            }
          }
        }
      }
    });

    cy.visit('/me/my-class');

    cy.get('h1').should('exist');

    cy.get('[data-cy=header-user-widget]').within(() => {
      cy.get('[data-cy=user-widget-avatar]').click();
    });

    cy.get('[data-cy=class-selection]').click();
    cy.get('[data-cy=class-selection-entry]').should('have.length', 1);


    cy.get('[data-cy=create-class-link]').click();

    cy.get('[data-cy=input-class-name]').type(name);

    cy.get('[data-cy=create-class]').click();

    cy.get('[data-cy=school-class-name]').should('contain', name);
    cy.get('[data-cy=current-class-name]').should('contain', name);

    cy.get('[data-cy=header-user-widget]').within(() => {
      cy.get('[data-cy=user-widget-avatar]').click();
    });

    cy.get('[data-cy=class-selection]').click();
    cy.get('[data-cy=class-selection-entry]').should('have.length', 2);
  });
});