skillbox/client/cypress/e2e/frontend/modules/current-module.spec.js

const topics = [
  {
    id: 'VG9waWNOb2RlOjU=',
    order: 1,
    title: 'Geld und Kauf',
    slug: 'geld-und-kauf',
  },
  {
    id: 'VG9waWNOb2RlOjUz',
    order: 2,
    title: 'Berufliche Grundbildung',
    slug: 'berufliche-grundbildung',
  },
];

let recentModules = [];

const getId = (id) => btoa(`ModuleNode:${id}`);

const modules = {
  [getId(1)]: {
    title: 'Lohn und Budget',
    metaTitle: 'Modul 1',
    slug: 'lohn-und-budget',
    id: getId(1),
  },
  [getId(2)]: {
    title: 'Geld',
    metaTitle: 'Modul 2',
    slug: 'geld',
    id: getId(2),
  },
  [getId(3)]: {
    title: 'Lerntipps',
    metaTitle: 'Modul 4',
    slug: 'lerntipps',
    id: getId(3),
  },
  [getId(4)]: {
    title: 'Random',
    metaTitle: 'Modul 5',
    slug: 'random',
    id: getId(4),
  },
};

const slugs = {
  'lohn-und-budget': getId(1),
  geld: getId(2),
  lerntipps: getId(3),
  random: getId(4),
};

const getModuleBySlug = (slug) => {
  console.log('getModuleBySlug', slug);
  const id = slugs[slug];
  console.log(id);
  return modules[id];
};

const moduleNodes = Object.values(modules).map((module) => ({
  node: module,
}));
console.log(moduleNodes);

const getTopic = () => {
  console.info('calling getTopic');
  return {
    topic: {
      title: 'Geld und Kauf',
      id: 'VG9waWNOb2RlOjU=',
      teaser: 'Topic 2',
      modules: {
        edges: moduleNodes,
      },
    },
  };
};

const checkHome = (n, skipHome) => {
  cy.log(`Checking if home has ${n} teasers`);
  if (!skipHome) {
    cy.get('[data-cy="home-link"]').click();
  }
  cy.get('[data-cy=start-modules-list]').should('exist');
  cy.get('[data-cy=start-module-teaser]').should('have.length', n);
};

const goToModule = (topicTitle, moduleMetaTitle) => {
  cy.log(`Going to module ${moduleMetaTitle} in topic ${topicTitle}`);
  cy.get('[data-cy=open-sidebar-link]').click();
  cy.contains(topicTitle).click();
  cy.get('[data-cy=topic-title]').should('exist').should('contain', topicTitle);
  cy.contains(moduleMetaTitle).click();
};

describe('Current Module', () => {
  const me = {
    lastModule: {
      slug: 'lohn-und-budget',
      id: 'last-module-id',
    },
    lastTopic: {
      id: 'VG9waWNOb2RlOjU=',
      slug: 'geld-und-kauf',
    },
    recentModules: {
      edges: recentModules,
    },
  };

  const operations = {
    MeQuery: {
      me,
    },
    AssignmentsQuery: {
      assignments: [],
    },
    ModuleDetailsQuery: (variables) => {
      console.log('calling ModuleDetailsQuery', getModuleBySlug(variables.slug));
      return {
        module: getModuleBySlug(variables.slug),
      };
    },
    TopicsQuery: {
      topics: {
        edges: topics.map((topic) => ({ node: topic })),
      },
    },
    Topic: getTopic(),
    UpdateLastTopic: () => {
      const Topic = getTopic();
      const topic = Topic.topic;
      return {
        updateLastTopic: {
          topic,
        },
      };
    },
    NewsTeasers: {
      newsTeasers: {
        edges: [],
      },
    },
    UpdateLastModule: ({ input: { id } }) => {
      const lastModule = modules[id];
      return {
        updateLastModule: {
          lastModule,
        },
      };
    },
  };

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

  it.skip('is set correctly', () => {
    cy.mockGraphqlOps({
      operations,
    });

    cy.visit('/');

    // module list exists, but does not have anything in it
    checkHome(0, true);
    cy.get('[data-cy=no-modules-yet]')
      .should('exist')
      .should('contain', 'Sie haben sich noch kein Modul angeschaut. Legen Sie jetzt los!');

    goToModule('Geld und Kauf', 'Modul 2');
    cy.get('[data-cy=module-title]').should('contain', 'Geld');
    checkHome(1);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld');

    goToModule('Geld und Kauf', 'Modul 1');
    cy.get('[data-cy=module-title]').should('contain', 'Lohn und Budget');
    checkHome(2);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lohn und Budget');
    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld');

    goToModule('Geld und Kauf', 'Modul 4');
    cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
    checkHome(3);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps');
    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Lohn und Budget');
    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');

    // module list is full, should switch only the order around
    goToModule('Geld und Kauf', 'Modul 2');
    cy.get('[data-cy=module-title]').should('contain', 'Geld');
    checkHome(3);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Geld');
    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Lerntipps');
    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lohn und Budget');

    goToModule('Geld und Kauf', 'Modul 5');
    cy.get('[data-cy=module-title]').should('contain', 'Random');
    checkHome(3);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Random');
    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Geld');
    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Lerntipps');

    cy.get('[data-cy=start-module-teaser]').last().click();
    cy.get('[data-cy=module-title]').should('contain', 'Lerntipps');
    checkHome(3);
    cy.get('[data-cy=start-module-teaser]').first().should('contain', 'Lerntipps');
    cy.get('[data-cy=start-module-teaser]').eq(1).should('contain', 'Random');
    cy.get('[data-cy=start-module-teaser]').eq(2).should('contain', 'Geld');
  });
});