0

My project is web related, and the intent is that I am decoupling two pages worth of actions so that each class would have a list of actions on their page, and if any action so happens to navigate to another page. The class itself does not need to know which page it goes to, but it should also return the list of possible actions on that page.

Current design:

file1

export default class Actions {
    constructor( destinations ) {
        const _this = this;

        this._ctaNext = destinations.ctaNext;
    }

    get select () { // pretend this is a select element
        const _this = this;
        return {
            click() {
                return {
                    get options () { // pretend this is the list of options clickable
                        return {
                            get weekly() {
                                cy.click() // pretend this works
                                return _this
                            },
                            get monthly() {
                                cy.click() // pretend this works
                                return _this
                            },
                            get yearly() {
                                cy.click() // pretend this works
                                return _this
                            }
                        };
                    },
                }
            }
        };
    }

    get cta () {
        const _this = this;

        return {
            click () {
                getter.body.cta.click();
                return _this._ctaNext;
            },
        };
    }
}

file2

export default class Actions1 {
    constructor( destinations ) {
        const _this = this;

        this._ctaNext = destinations.ctaNext;
    }

    get select () { // pretend this is a select element
        const _this = this;
        return {
            click() {
                return {
                    get options () { // pretend this is the list of options clickable
                        return {
                            get weekly() {
                                cy.click() // pretend this works
                                return _this
                            },
                            get monthly() {
                                cy.click() // pretend this works
                                return _this
                            },
                            get yearly() {
                                cy.click() // pretend this works
                                return _this
                            }
                        };
                    },
                }
            }
        };
    }

    get cta () {
        const _this = this;

        return {
            click () {
                getter.body.cta.click();
                return _this._ctaNext;
            },
        };
    }
}

mediator file

const page1 = new Actions()
const page2 = new Actions1()
page1._ctaNext = page2
page2._ctaNext = page1

What would be a good design so that after page1 performs its cta click, it would be able to access page2's actions? Is the only way to initiate both classes with an undefined _ctaNext and then to set it after their initialization?

Example of desired use

page1
    .cta
    .click() // we should be on page 2 now
    .cta
    .click() // goes back to page 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.