> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Test the bot

export const ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<ProgressBar
  pages={[
                      "guides/collaborations/connect-slack-to-group-collabs/configure-slack",
                      "guides/collaborations/connect-slack-to-group-collabs/configure-box",
                      "guides/collaborations/connect-slack-to-group-collabs/scaffold-application-code",
                      "guides/collaborations/connect-slack-to-group-collabs/handle-slack-events",
                      "guides/collaborations/connect-slack-to-group-collabs/connect-box-functions",
                      "guides/collaborations/connect-slack-to-group-collabs/test-bot"
                    ]}
/>

In this last section we'll test the full range of functionality of the Slack
bot.

* **Group creation**: When a bot is added to a channel, a new Box group should be created with all of the current channel participants. Only those people in the channel with matching Box accounts (based on email address matching) should be added.
* **User event functions**: When a user enters or leaves a channel, they should be added or removed from the channel group.
* **Content add functions**: When a user enters a valid `/boxadd` slash command, that content should be shared with the group through a new collaboration.

<Note>
  If you haven't done so already, ensure that all the code we've written so far
  is deployed as an application that is publicly accessible.
</Note>

## Testing group creation

When a bot is first added to a channel, there are a number of expectations.

* A new group is created with a name that matches the Slack channel ID.
* All people currently in the channel are added to the group, as long as their Slack email address matches an enterprise account with the same email.

When the Slack bot was configured in <Link href="/guides/collaborations/connect-slack-to-group-collabs/configure-slack">step 1</Link>, we installed it within
the Slack workspace. To test group creation we need to add it to a channel.

From any Slack channel, invite the Slack bot, either through the Slack UI or
using a `/invite @bot_app_name` command.

Once added, verify that the group is created in Box and members have been
added. From a Box enterprise admin account, go to the
**[Users and Groups][box-users-groups]** section of the admin console. If
successful, you will see a group with an random alpha-numeric string as the
group name. This is the Slack channel ID, which is mirrored in the group name.

<Frame noborder center shadow>
  <img src="https://mintcdn.com/box/7Uky7FPvsR-xkqwh/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_groups.png?fit=max&auto=format&n=7Uky7FPvsR-xkqwh&q=85&s=90fdbfe0a262d54718a37ed7e6df4fca" alt="View Box Groups" width="1004" height="228" data-path="guides/collaborations/connect-slack-to-group-collabs/img/slack_6_groups.png" />
</Frame>

Under the **Members** column, you should also see a number indicating the
number of Box users with matching email addresses that were found in the
enterprise and added to the group during group creation.

If you see your group and members, this step is a success.

<Note>
  If you see no members added to the group, and no errors being returned from
  the bot application, the most likely cause is email mismatch. Ensure that the
  email addresses used by the accounts in Slack match the emails used by users
  in your Box enterprise.
</Note>

## Testing user event functions

Keep the **[Users and Groups][box-users-groups]** section of the Box admin
console open and take note of the number in the **Members** column beside your
Slack group.

From the Slack channel with the bot invited, add or remove someone other than
the bot from the channel.

Refresh the users and groups section of the Box admin console and you should
see the members number drop or increase depending on if you added or removed a
user.

If the number of members changes, this step is a success.

## Testing content add functions

To test the functionality of sharing content with the group, you will need
access to two users in the channel, one person to share the content from their
Box account, and another person in the group to view their list of files to
verify that the content was shared.

From the Slack channel with the bot invited, type in the slash command to share
files or folders with the group, in the format of
`/boxadd [file/folder] [ID of file/folder]`, such as
`/boxadd folder 324554221`.

<Note>
  The file or folder ID specified needs to be content within the Box account of
  the person sharing it.
</Note>

To find the ID of a file or folder in a Box account, load up the file or folder
within [the Box site][box], then look at the URL. The ID will be the
last string in the URL, often right after a section which includes either
`/file/` or `/folder/`.

<Frame noborder center shadow>
  <img src="https://mintcdn.com/box/7Uky7FPvsR-xkqwh/guides/collaborations/connect-slack-to-group-collabs/img/slack_6_file_id.png?fit=max&auto=format&n=7Uky7FPvsR-xkqwh&q=85&s=2e2900aba9f18316579f7c3bb7907cc9" alt="Get File or Folder ID" width="518" height="84" data-path="guides/collaborations/connect-slack-to-group-collabs/img/slack_6_file_id.png" />
</Frame>

Once the command is typed in, go to the [the Box site][box] account
of another person within the Slack channel and Box group. The content that was
shared should now be available to that account.

If the shared content is available to others in the group, this step is a
success.

## Next Steps

With our minima bot deployed we can now think about ways to improve the
experience on top of what we've created so far. Next steps in this
journey may include any number of different expansion areas.

* Add new slash commands for <Link href="/guides/shared-links/create-or-update">creating shared links</Link> for the files and folders shared with the group, allowing you to share the content with others who are not in the group and people outside your enterprise.
* <Link href="/reference/post-retention-policies">Creating retention policies</Link> and <Link href="/reference/post-retention-policy-assignments">assigning them</Link> to any content shared with the group, allowing you to control the lifespan and governance of shared content.
* Adding new slash commands for allowing people in the channel to <Link href="/reference/post-comments">comment on the files</Link> that are shared with the group.

[box-users-groups]: https://app.box.com/master/groups

[box]: https://box.com