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

machine.js

const feedbackMachine = Machine({
  id: 'comment',
  initial: 'comment_tab_closed',
  context: {
    text: null,
    resolved: false,
    hasResponses: false,
  },
  states: {
    comment_tab_closed: {
      on: {
        OPEN_COMMENTS: 'comment_tab_opened',
      },
      meta: {
        test: async (browser) => {
          const el = await browser.$('h3[data-qa-id="mailup-bee-commenting.allCommentsTitle"]');
          assert.isFalse(await el.isDisplayed());
        },
      },
    },
    comment_tab_opened: {
      on: {
        SUBMIT_COMMENT: 'thread',
        HIDE_COMMENTS: 'comment_tab_closed',
      },
      meta: {
        test: async (browser) => {
          controlData.threadCount = await getCommentCount(browser);

          const el = await browser.$('h3[data-qa-id="mailup-bee-commenting.allCommentsTitle"]');
          assert.isTrue(await el.isDisplayed());

          switch (controlData.lastEvent) {
            case EVENTS.DELETE_THREAD: {
              const threads = await browser.$$('div[data-qa-id="mailup-bee-commenting.thread"]');
              assert(threads.length === expectedData.threadCountBeforeDelete - 1);
              break;
            }
            default:
              break;
          }
        },
      },
    },
    thread: {
      initial: 'created',
      states: {
        created: {
          on: {
            EDIT_THREAD: 'editing',
            RESOLVE_THREAD: { target: 'created', cond: (context) => context.resolved === false, actions: assign({ resolved: true }) },
            REOPEN_THREAD: { target: 'created', cond: (context) => context.resolved === true, actions: assign({ resolved: false }) },
            REPLY: { target: '#opened_thread', cond: (context) => context.resolved === false },
            SHOW_COMMENTS: { target: '#opened_thread', cond: (context) => context.hasResponses === true },
          },
          meta: {
            test: async (browser) => {
              const ele = await browser.$('h3[data-qa-id="mailup-bee-commenting.allCommentsTitle"]');
              assert.isTrue(await ele.isDisplayed());

              console.log(`CURRENT STATE: thread.created.\nLatestEvent: ${controlData.lastEvent}`);
              switch (controlData.lastEvent) {
                case EVENTS.SUBMIT_COMMENT: {
                  // Check if actual count of threads is previous + 1;
                  const actualCount = await getCommentCount(browser);
                  assert(actualCount === controlData.threadCount + 1, `Expected count of threads:"${controlData.threadCount + 1}",\n Actual count of threads: ${actualCount}`);
                  break;
                }
                case EVENTS.RESOLVE_THREAD: {
                  const el = await getLatestThread(browser);
                  const label = await el.$('span[data-qa-id="mailup-bee-commenting.labelResolved"]');
                  assert(await label.isDisplayed() === true);
                  break;
                }
                case EVENTS.REOPEN_THREAD: {
                  const el = await getLatestThread(browser);
                  const label = await el.$('span[data-qa-id="mailup-bee-commenting.labelResolved"]');
                  assert(await label.isDisplayed() === false);
                  break;
                }
                case EVENTS.SAVE_EDIT: {
                  const el = await getLatestThread(browser);
                  const textField = await el.$('*[data-qa-id="mailup-bee-commenting.commentText"]');
                  assert(await textField.getText() === expectedData.text);
                  break;
                }
                case EVENTS.DISCARD_EDIT: {
                  const el = await getLatestThread(browser);
                  const textField = await el.$('*[data-qa-id="mailup-bee-commenting.commentText"]');
                  assert(await textField.getText() !== 'THIS IS NOT SAVED');
                  break;
                }
                default:
                  break;
              }
            },
          },
        },
        editing: {
          on: {
            SAVE_EDIT: { target: 'created', actions: assign({ text: 'changed' }) },
            DISCARD_EDIT: { target: 'created', actions: assign({ text: 'same' }) },
          },
          meta: {
            test: async (browser) => {
              const textInput = await browser.$('textarea[data-qa-id="mailup-bee-commenting.textareaEditingComment"]');
              const value = await textInput.getValue();
              assert(value === controlData.currentText, `Input for comment edit\nExpected: ${controlData.currentText}\nActual: ${value} `);
              assert(await value.isEnabled() === true, 'Input for comment edit is not enabled');
            },
          },
        },
      },
      on: {
        DELETE_THREAD: 'comment_tab_opened',
      },
      guards: {},
    },
    opened_thread: {
      id: 'opened_thread',
      initial: 'opened',
      states: {
        opened: {
          on: {
            ADD_COMMENT: { target: 'comment', cond: (context) => context.resolved === false, actions: assign({ hasResponses: true }) },
            RESOLVE_THREAD: { target: 'opened', cond: (context) => context.resolved === false, actions: assign({ resolved: true }) },
            REOPEN_THREAD: { target: 'opened', cond: (context) => context.resolved === true, actions: assign({ resolved: false }) },
          },
          meta: {
            test: async (browser) => {
              console.log(`controlData - resolved: ${controlData.threadState.resolved}`);
              // check init state.
              const search = await browser.$('input[type="search"]');
              assert(await search.isDisplayed() === true, 'Search button is not visible in thread.');
              

              // test if input is disabled for resolved_thread.
              if (controlData.threadState.resolved != null) {
                const el = await browser.$('*[data-qa-id="mailup-bee-commenting.autoGenerated"]');
                await el.waitForDisplayed();
              }
              switch (controlData.threadState.resolved) {
                case true: {
                  const textInput = await browser.$('*[data-qa-id="mailup-bee-commenting.textareaNewComment"]');
                  assert(await textInput.isEnabled() === false, 'TextInput should be disabled, it is NOT.');
                  const autoGeneratedComments = await browser.$$('*[data-qa-id="mailup-bee-commenting.autoGenerated"]');
                  assert(autoGeneratedComments.length > 0, `AutogeneratedComments.length "${autoGeneratedComments.length}" is not > 0`);
                  break;
                }
                case false: {
                  const textInput = await browser.$('*[data-qa-id="mailup-bee-commenting.textareaNewComment"]');
                  assert(await textInput.isEnabled() === true, 'TextInput should be enabled, it is NOT.');
                  const autoGeneratedComments = await browser.$$('*[data-da-id="mailup-bee-commenting.autoGenerated"]');
                  assert(autoGeneratedComments.length > 0, `AutogeneratedComments.length "${autoGeneratedComments.length}" is not > 0`);
                  break;
                }
                default: {
                  const textInput = await browser.$('*[data-qa-id="mailup-bee-commenting.textareaNewComment"]');
                  assert(await textInput.isEnabled() === true);
                  break;
                }
              }
            },
          },
        },
        comment: {
          initial: 'created',
          states: {
            created: {
              on: {
                EDIT_COMMENT: 'editing',
              },
              meta: {
                test: async () => {
                },
              },
            },
            editing: {
              on: {
                SAVE_EDIT: { target: 'created', actions: assign({ text: 'changed' }) },
                DISCARD_EDIT: { target: 'created', actions: assign({ text: 'same' }) },
              },
              meta: {
                test: async () => {
                },
              },
            },
          },
          on: {
            DELETE_COMMENT: 'opened'
          }
        },
      },
      on: {
        CLOSE_THREAD: 'thread'
      }
    },
  }
});