Generated by XState Viz: https://xstate.js.org/viz

machine.js

    const appMachine = Machine({
        id: 'app',
        initial: 'initiating',
        states: {
            initiating: {
                on: {
                    FINISHED_INITIAL: 'initialled'
                },
                meta: {
                    test: ({ queryByTestId }) => {
                        const breadcrumb = appComponent.container.querySelectorAll(`
                            [data-selector-id*="${BREADCRUMB_SELECTOR.BREADCRUMB_ITEM.ID}_"]`);
                        const nav = appComponent.container.querySelectorAll(`
                            [data-selector-id*="${NAV_ASIDE_SELECTOR.NAV_ITEM.ID}_"]`);
                        const loading = queryByTestId(APP_SELECTOR.PAGE_LOADING_ICON.ID);

                        expect(breadcrumb.length).toBe(0);
                        expect(nav.length).toBe(0);
                        expect(loading).toBeInTheDocument();
                    }
                }
            },
            initialled: {
                on: {
                    SWITCH_STANDALONE: 'standalone',
                    SWITCH_MICRO_FRONTEND: 'microFrontend',
                    RECEIVE_PERMISSION_SUCCESS: 'permission'
                },
                meta: {
                    test: ({ queryByTestId }) => {
                        const breadcrumb = appComponent.container.querySelectorAll(`
                            [data-selector-id*="${BREADCRUMB_SELECTOR.BREADCRUMB_ITEM.ID}_"]`);
                        const nav = appComponent.container.querySelectorAll(`
                            [data-selector-id*="${NAV_ASIDE_SELECTOR.NAV_ITEM.ID}_"]`);
                        const loading = queryByTestId(APP_SELECTOR.PAGE_LOADING_ICON.ID);

                        expect(breadcrumb.length).toBeGreaterThan(0);
                        expect(nav.length).toBeGreaterThan(0);
                        expect(loading).not.toBeInTheDocument();
                    }
                }
            },
            standalone: {
                meta: {
                    test: ({ queryByTestId }) => {
                        const header = queryByTestId(HEADER_SELECTOR.HEADER_CONTAINER.ID);
                        const themeButton = queryByTestId(APP_SELECTOR.THEME_SWITCH_BUTTON.ID);

                        expect(header).toBeInTheDocument();
                        expect(themeButton).toBeInTheDocument();
                    }
                }
            },
            microFrontend: {
                meta: {
                    test: ({ queryByTestId }) => {
                        const header = queryByTestId(HEADER_SELECTOR.HEADER_CONTAINER.ID);
                        const themeButton = queryByTestId(APP_SELECTOR.THEME_SWITCH_BUTTON.ID);

                        expect(header).not.toBeInTheDocument();
                        expect(themeButton).not.toBeInTheDocument();
                    }
                }
            },
            permission: {
                initial: 'success',
                states: {
                    success: {
                        meta: {
                            test: ({ queryByTestId }) => {
                                const permissionErrorModal = queryByTestId(APP_SELECTOR.PERMISSION_DENIED_ERROR_MODAL.ID);
                                expect(permissionErrorModal).not.toBeInTheDocument();
                            }
                        }
                    },
                    error: {
                        meta: {
                            test: ({ queryByTestId }) => {
                                const permissionErrorModal = queryByTestId(APP_SELECTOR.PERMISSION_DENIED_ERROR_MODAL.ID);
                                expect(permissionErrorModal).toBeInTheDocument();
                            }
                        }
                    }
                },
                on: {
                    RECEIVE_PERMISSION_ERROR: 'permission.error'
                },
                meta: {
                    test: () => {}
                }
            }
        }
    });