graphql-apiml.cy.js

/*
 * This program and the accompanying materials are made available under the terms of the
 * Eclipse Public License v2.0 which accompanies this distribution, and is available at
 * https://www.eclipse.org/legal/epl-v20.html
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 * Copyright Contributors to the Zowe Project.
 */
/* eslint-disable no-undef */
/// <reference types="Cypress" />

const expectedKeyWords = ['name', 'getAllBooks', 'Effective Java', "Hitchhiker's Guide to the Galaxy", 'Down Under'];

function login() {
    cy.visit(`${Cypress.env('catalogHomePage')}/index.html#/login`);

    const username = Cypress.env('username');
    const password = Cypress.env('password');

    cy.get('button[type="submit"]').as('submitButton');

    cy.get('#username').type(username);
    cy.get('input[name="password"]').type(password);

    cy.get('@submitButton').click();
}

describe('>>> GraphiQL Playground page test', () => {
    it('Detail page test', () => {
        login();

        cy.get('#grid-container').contains('Discoverable client with GraphQL').click();

        cy.url().should('contain', '/service/graphqlclient');

        cy.get('#go-back-button').should('exist');

        cy.get('.api-description-container').should('exist');
    });

    it('Should display the service information in the detail page', () => {
        login();

        cy.contains('Discoverable client with GraphQL').click();

        cy.visit(`${Cypress.env('catalogHomePage')}/index.html#/service/graphqlclient`);

        cy.get('.tabs-container').should('not.exist');

        cy.get('.serviceTab').should('exist').and('contain', 'Discoverable client with GraphQL');

        cy.contains('Service Homepage').should('exist');

        cy.contains('Swagger/OpenAPI JSON Document').should('not.exist');

        cy.contains('Service ID and Version').should('not.exist');

        cy.get('#version-div').should('not.exist');

        cy.contains('Sample for data demonstration using GraphiQL Playround.');

        cy.get('#swagger-label').should('contain', 'GraphQL');

        cy.get(`a[href="#/service/graphqlclient"]`).should('have.class', 'Mui-selected');
    });

    it('Should display the GraphiQL Playground', () => {
        login();

        cy.contains('Discoverable client with GraphQL').click();

        cy.get('#graphiql-container').should('exist');

        const query = '{ "query": "{ hello }" }';

        cy.contains('# Write your query here!')                // clear out the placeholder/default text
            .type(query, {parseSpecialCharSequences: false});

    });

    it('Should run query', () => {
        login();

        cy.contains('Discoverable client with GraphQL').click();
        cy.contains('# Write your query here!').click()
            .type('{ctrl}a')
            .type('{del}')
        const query = 'query {' + 'getAllBooks{' + 'name' + ' }';
        cy.get('.graphiql-editor').first()
            .type(query, {parseSpecialCharSequences: false})
        cy.get('.graphiql-execute-button').click();
        cy.get('span.cm-def').should('contain.text', 'data');

        cy.get('.result-window').then(($container) => {
            const text = $container.text().trim();
            expectedKeyWords.forEach((word) => {
                expect(text).to.include(word);
            });
        });

    });

    it('Should add and remove a tab in the playground', () => {
        login();

        cy.contains('Discoverable client with GraphQL').click();

        cy.get('.graphiql-un-styled.graphiql-tab-add').click();

        cy.get('#graphiql-session-tab-1').should('exist').should('contain.text', 'My Query 2');

        cy.get('.graphiql-un-styled.graphiql-tab-close').last().click();

        cy.get('#graphiql-session-tab-1').should('not.exist');
    });

    it('Should open the Documentation Explorer', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[aria-label="Show Documentation Explorer"]').click();

        cy.get('.graphiql-doc-explorer').should('be.visible');

        cy.get('.graphiql-markdown-description').should(
            'contain',
            'A GraphQL schema provides a root type for each kind of operation.'
        );
    });

    it('Should open the History window', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[aria-label="Show History"]').click();

        cy.get('.graphiql-history').should('be.visible').should('contain', 'History');
    });

    it('Refetch button is present', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[aria-label="Re-fetch GraphQL schema"]').should('be.visible');
    });

    it('Should open the short keys dialog', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[aria-label="Open short keys dialog"]').click();

        cy.get('.graphiql-dialog-header h2').should('be.visible').should('contain', 'Short Keys');
    });

    it('Should open the settings keys dialog', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[aria-label="Open settings dialog"]').click();

        cy.get('.graphiql-dialog-header h2').should('be.visible').should('contain', 'Settings');
    });

    it('Variable usage', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[data-name="variables"]').click();

        cy.get('.graphiql-editor-tool').should('be.visible');

        const variable = '{"id" :"book-1"}';

        cy.get('.graphiql-editor-tool .cm-s-graphiql').first().as('variablesInput').click();

        cy.get('@variablesInput').first()
            .type(variable, {parseSpecialCharSequences: false});

        cy.get('.graphiql-editor-tool').then(($container) => {
            const text = $container.text().trim();
            expect(text).to.include(variable);
        });
    });

    it('Variable usage', () => {
        login();
        cy.contains('Discoverable client with GraphQL').click();

        cy.get('[data-name="headers"]').click();

        cy.get('.graphiql-editor-tool').should('be.visible');

        const header = '{"X-Custom-Header": "CustomValue"}';

        cy.get('.graphiql-editor-tool .cm-s-graphiql').last().as('headersInput').click();

        cy.get('@headersInput').first()
            .type(header, {parseSpecialCharSequences: false});

        cy.get('.graphiql-editor-tool').then(($container) => {
            const text = $container.text().trim();
            expect(text).to.include(header);
        });
    });

});