skillbox/client/cypress/e2e/frontend/instruments/instruments-page.spec.js

const LANGUAGE_COMMUNICATION = 'LANGUAGE_COMMUNICATION';
const LANGUAGE_COMMUNICATION_VALUE = 'Sprache & Kommunikation';
const SOCIETY = 'SOCIETY';
const SOCIETY_VALUE = 'Gesellschaft';
const INTERDISCIPLINARY = 'INTERDISCIPLINARY';
const INTERDISCIPLINARY_VALUE = 'Überfachliche Instrumente';

describe('Instruments Page', () => {
  beforeEach(() => {
    cy.setup();

    const languageCategory = {
      name: LANGUAGE_COMMUNICATION_VALUE,
      id: LANGUAGE_COMMUNICATION,
      foreground: '#000000',
      background: '#00ffff',
    };
    const societyCategory = {
      name: SOCIETY_VALUE,
      id: SOCIETY,
      foreground: '#ffffff',
      background: '#000fff',
    };
    const ANALYSE = 'analyse';
    const ARGUMENTATION = 'argumentation';
    const ETHIK = 'ethik';

    const analyse = {
      name: 'Analyse',
      category: languageCategory,
      type: ANALYSE,
      id: ANALYSE,
    };

    const argumentation = {
      name: 'Argumentation',
      category: languageCategory,
      type: ARGUMENTATION,
      id: ARGUMENTATION,
    };

    const ethik = {
      name: 'Ethik',
      category: societyCategory,
      type: ETHIK,
      id: ETHIK,
    };

    cy.mockGraphqlOps({
      operations: {
        MeQuery: {},
        InstrumentsQuery: {
          instruments: [
            {
              type: analyse,
              title: 'Instrument: Analyse',
              slug: 'analyse',
              language: 'de',
            },
            {
              type: argumentation,
              title: 'Instrument: Argumentation',
              slug: 'argumentation',
              language: 'de',
            },
            {
              type: ethik,
              title: 'Instrument: Ethik',
              slug: 'ethik',
              language: 'de',
            },
            {
              type: ethik,
              title: 'Instrument: La éthique, bourgois',
              slug: 'ethik-burgois',
              language: 'fr',
            },
          ],
        },
        InstrumentCategoriesQuery: {
          instrumentCategories: [
            {
              name: 'Sprache & Kommunikation',
              id: LANGUAGE_COMMUNICATION,
              types: [
                analyse,
                argumentation,
                {
                  name: 'Beschreibung',
                  category: languageCategory,
                  type: 'beschreibung',
                },
              ],
            },
            {
              name: SOCIETY_VALUE,
              id: SOCIETY,
              types: [
                ethik,
                {
                  name: 'Identität und Sozialisation',
                  category: societyCategory,
                  type: 'identitt-und-sozialisation',
                },
              ],
            },
            {
              name: INTERDISCIPLINARY_VALUE,
              id: INTERDISCIPLINARY,
              types: [],
            },
          ],
        },
      },
    });
  });

  it('opens the instruments page', () => {
    cy.visit('instruments/');

    cy.getByDataCy('instrument').should('have.length', 3);

    cy.getByDataCy('filter-entry').filter(`:contains("${LANGUAGE_COMMUNICATION_VALUE}")`).click();
    cy.getByDataCy('instrument').should('have.length', 2);

    cy.getByDataCy('filter-entry').filter(`:contains("${SOCIETY_VALUE}")`).click();
    cy.getByDataCy('instrument').should('have.length', 1);

    cy.getByDataCy('filter-entry').filter(`:contains("${INTERDISCIPLINARY_VALUE}")`).click();
    cy.getByDataCy('instrument').should('have.length', 0);

    cy.get('.filter-entry').filter(`:contains("Analyse")`).click();
    cy.getByDataCy('instrument').should('have.length', 1);

    cy.get('.filter-entry').filter(`:contains("Ethik")`).click();
    cy.getByDataCy('instrument').should('have.length', 1);

    cy.getByDataCy('filter-all-instruments').click();
    cy.getByDataCy('instrument').should('have.length', 3);
  });

  it('shows the correct instrument label', () => {
    cy.visit('instruments/');
    cy.getByDataCy('instrument')
      .first()
      .within(() => {
        cy.getByDataCy('instrument-subheader').should('contain', 'Instrumente – Sprache & Kommunikation');
      });
  });

  it('filter by title', () => {
    cy.visit('instruments/');
    cy.getByDataCy('instrument').should('have.length', 3);

    cy.getByDataCy('filter-input').type('Analyse');
    cy.getByDataCy('instrument').should('have.length', 1);

    cy.getByDataCy('filter-input').clear();
    cy.getByDataCy('instrument').should('have.length', 3);
  });

  it.skip('filter by language', () => {
    // todo: move this to a myKV test env

    cy.visit('instruments/');

    // todo: replace this invoke with something that works like a user as soon as the myKV test env is running
    // cy.get('.filter-bar__language-selection').invoke('show');
    cy.getByDataCy('radio-button-de').click();
    cy.getByDataCy('instrument').should('have.length', 3);

    cy.getByDataCy('radio-button-en').click();
    cy.getByDataCy('instrument').should('have.length', 0);
    cy.getByDataCy('info-message-no-entry').should(
      'contain',
      'Für die ausgewählten Filtereinstellungen sind keine Einträge vorhanden'
    );

    cy.getByDataCy('radio-button-fr').click();
    cy.getByDataCy('instrument').should('have.length', 1);
  });
});