OpenPanel/cypress/support/commands/resource.ts

/// <reference types="cypress" />
/// <reference types="../index.d.ts" />

const assertNotification = (ui: UITypes) => {
    switch (ui) {
        case "antd":
            return cy.getAntdNotification().should("contain", "Success");
        case "chakra-ui":
            return cy.getChakraUINotification().should("contain", "Success");
        case "mantine":
            return cy.getMantineNotification().should("contain", "Success");
        case "material-ui":
            return cy.getMaterialUINotification().should("contain", "Success");
    }
};

const waitLoadingOverlay = (ui: UITypes) => {
    switch (ui) {
        case "antd":
            return cy.getAntdLoadingOverlay().should("not.exist");
        case "chakra-ui":
            return cy.getChakraUILoadingOverlay().should("not.exist");
        case "mantine":
            return cy.getMantineLoadingOverlay().should("not.exist");
        case "material-ui":
            return cy.getMaterialUILoadingCircular().should("not.exist");
    }
};

const fillForm = (ui: UITypes) => {
    switch (ui) {
        case "antd":
            return cy.fillAntdForm();
        case "chakra-ui":
            return cy.fillChakraUIForm();
        case "mantine":
            return cy.fillMantineForm();
        case "material-ui":
            return cy.fillMaterialUIForm();
    }
};

const assertFormShouldHaveResponseValues = (response: any, ui: UITypes) => {
    const body = response?.body;

    // assert response values are equal to the form values
    switch (ui) {
        case "antd":
            cy.get("#title").should("have.value", body?.title);
            cy.get("#content textarea").should("have.value", body?.content);
            cy.get("#status")
                .parent()
                .siblings()
                .last()
                .should(($status) => {
                    return (
                        $status.val()?.toString().toLowerCase() ===
                        body?.status.toLowerCase()
                    );
                });
            cy.get("#category_id")
                .parent()
                .siblings()
                .last()
                .should(($category_id) => {
                    return (
                        $category_id.val()?.toString().toLowerCase() ===
                        body?.status.toLowerCase()
                    );
                });
            break;
        case "chakra-ui":
            cy.get("#title").should("have.value", body?.title);
            cy.get("#status").should("have.value", body?.status);
            cy.get("#content").should("have.value", body?.content);
            cy.get("#categoryId").should("have.value", body?.category?.id);
            break;

        case "mantine":
            cy.get("#title").should("have.value", body?.title);
            cy.get("#content textarea").should("have.value", body?.content);
            cy.get("#status").should(($status) => {
                return (
                    $status.val()?.toString().toLowerCase() ===
                    body?.status.toLowerCase()
                );
            });
            cy.fixture("categories").then((categories) => {
                const category = categories.find(
                    (category) => category.id === body?.category?.id,
                );
                cy.get("#categoryId").should("have.value", category?.title);
            });
            break;

        case "material-ui":
            cy.get("#title").should("have.value", body?.title);
            cy.get("#content").should("have.value", body?.content);
            cy.get("#status").should("have.value", body?.status);
            cy.fixture("categories").then((categories) => {
                const category = categories.find(
                    (category) => category.id === body?.category?.id,
                );
                cy.get("#category").should("have.value", category?.title);
            });
            break;
    }
};

const assertSuccessResponse = (response: any, ui: UITypes) => {
    const body = response?.body;

    expect(response?.statusCode).to.eq(200);
    expect(body).to.have.property("id");
    expect(body).to.have.property("category");

    cy.fixture("mock-post").then((mockPost) => {
        expect(body?.title).to.eq(mockPost.title);
        expect(body?.content).to.eq(mockPost.content);
        expect(body?.status?.toLowerCase()).to.eq(
            mockPost?.status?.toLowerCase(),
        );
    });

    assertNotification(ui);
    cy.location().should((loc) => {
        expect(loc.pathname).to.eq("/posts");
    });
};

export const list = () => {
    cy.url().should("include", "/posts");
    cy.getPageHeaderTitle().should("contain", "Posts");

    cy.assertDocumentTitle("Posts", "list");
};

export const create = ({ ui }: IResourceCreateParams) => {
    cy.interceptGETCategories();

    cy.getCreateButton().click();
    cy.wait("@getCategories");
    cy.location("pathname").should("eq", "/posts/create");

    cy.assertDocumentTitle("Post", "create");

    fillForm(ui);

    cy.interceptPOSTPost();
    cy.getSaveButton().click();

    cy.wait("@postPost").then((interception) => {
        const response = interception?.response;
        assertSuccessResponse(response, ui);
    });
};

export const edit = ({ ui }: IResourceEditParams) => {
    cy.interceptGETCategories();
    cy.interceptGETPost();

    // wait loading state and render to be finished
    cy.wait("@getPosts");
    waitLoadingOverlay(ui);

    cy.getEditButton().first().click();
    cy.wait("@getCategories");
    cy.wait("@getPost").then((interception) => {
        const getResponse = interception?.response;

        // wait loading state and render to be finished
        waitLoadingOverlay(ui);
        cy.getSaveButton().should("not.be.disabled");
        cy.location("pathname").should("include", "/posts/edit");

        assertFormShouldHaveResponseValues(getResponse, ui);
    });

    cy.assertDocumentTitle("Post", "edit");

    fillForm(ui);

    cy.interceptPATCHPost();
    cy.getSaveButton().click();

    cy.wait("@patchPost").then((interception) => {
        const response = interception?.response;
        assertSuccessResponse(response, ui);
    });
};

export const show = () => {
    cy.interceptGETPost();
    cy.interceptGETCategory();

    cy.getShowButton().first().click();

    cy.assertDocumentTitle("Post", "show");

    cy.wait("@getPost").then((interception) => {
        const response = interception?.response;

        const id = response?.body?.id;
        cy.location("pathname").should("include", `/posts/show/${id}`);

        // should be visible id,title,content
        ["Id", "Title", "Content"].forEach((field) => {
            cy.get("body").should("contain", field);
        });
        // should be visible id,title,content values
        const title = response?.body?.title;
        const content = response?.body?.content;
        [id, title, content].forEach((value) => {
            cy.get("body").should("contain", value);
        });
    });

    cy.wait("@getCategory").then((interception) => {
        const response = interception?.response;

        const category = response?.body;
        cy.get("body").should("contain", category?.title);
    });
};

export const resourceDelete = ({ ui }: IResourceDeleteParams) => {
    cy.interceptGETCategories();
    cy.wait("@getPosts");
    waitLoadingOverlay(ui);

    cy.interceptGETPost();
    cy.getEditButton().first().click();

    // wait loading state and render to be finished
    cy.wait("@getPost");
    waitLoadingOverlay(ui);
    cy.getSaveButton().should("not.be.disabled");

    cy.interceptDELETEPost();
    cy.getDeleteButton().first().click();
    switch (ui) {
        case "antd":
            cy.getAntdPopoverDeleteButton().click({ force: true });
            break;
        case "chakra-ui":
            cy.getChakraUIPopoverDeleteButton().click({ force: true });
            break;
        case "mantine":
            cy.getMantinePopoverDeleteButton().click({ force: true });
            break;
        case "material-ui":
            cy.getMaterialUIDeletePopoverButton().click({ force: true });
            break;
    }

    cy.wait("@deletePost").then((interception) => {
        const response = interception?.response;

        expect(response?.statusCode).to.eq(200);
        assertNotification(ui);
        cy.location().should((loc) => {
            expect(loc.pathname).to.eq("/posts");
        });
    });
};