channel_header.test.jsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`components/ChannelHeader should render active flagged posts 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <OverlayTrigger
              defaultOverlayShown={false}
              delayShow={400}
              onEntering={[Function]}
              overlay={
                <Tooltip
                  bsClass="tooltip"
                  id="favoriteTooltip"
                  placement="right"
                >
                  <FormattedMessage
                    defaultMessage="Add to Favorites"
                    id="channelHeader.addToFavorites"
                    values={Object {}}
                  />
                </Tooltip>
              }
              placement="bottom"
              trigger={
                Array [
                  "hover",
                  "focus",
                ]
              }
            >
              <button
                aria-label="add to favorites"
                className="style--none color--link channel-header__favorites inactive"
                id="toggleFavorite"
                onClick={[Function]}
              >
                <i
                  className="icon fa fa-star-o"
                />
              </button>
            </OverlayTrigger>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span />
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        >
          <Connect(ChannelPermissionGate)
            channelId="channel_id"
            permissions={
              Array [
                "manage_public_channel_properties",
              ]
            }
            teamId="team_id"
          >
            <button
              className="style--none"
              onClick={[Function]}
            >
              <FormattedMessage
                defaultMessage="Add a channel description"
                id="channel_header.addChannelHeader"
                values={Object {}}
              />
              <FormattedMessage
                defaultMessage="(Edit)"
                id="channel_header.editLink"
                values={Object {}}
              >
                <Component />
              </FormattedMessage>
            </button>
          </Connect(ChannelPermissionGate)>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 0,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 0,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon active"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render active mentions posts 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <OverlayTrigger
              defaultOverlayShown={false}
              delayShow={400}
              onEntering={[Function]}
              overlay={
                <Tooltip
                  bsClass="tooltip"
                  id="favoriteTooltip"
                  placement="right"
                >
                  <FormattedMessage
                    defaultMessage="Add to Favorites"
                    id="channelHeader.addToFavorites"
                    values={Object {}}
                  />
                </Tooltip>
              }
              placement="bottom"
              trigger={
                Array [
                  "hover",
                  "focus",
                ]
              }
            >
              <button
                aria-label="add to favorites"
                className="style--none color--link channel-header__favorites inactive"
                id="toggleFavorite"
                onClick={[Function]}
              >
                <i
                  className="icon fa fa-star-o"
                />
              </button>
            </OverlayTrigger>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span />
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        >
          <Connect(ChannelPermissionGate)
            channelId="channel_id"
            permissions={
              Array [
                "manage_public_channel_properties",
              ]
            }
            teamId="team_id"
          >
            <button
              className="style--none"
              onClick={[Function]}
            >
              <FormattedMessage
                defaultMessage="Add a channel description"
                id="channel_header.addChannelHeader"
                values={Object {}}
              />
              <FormattedMessage
                defaultMessage="(Edit)"
                id="channel_header.editLink"
                values={Object {}}
              >
                <Component />
              </FormattedMessage>
            </button>
          </Connect(ChannelPermissionGate)>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 0,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 0,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon active"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render active pinned posts 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <OverlayTrigger
              defaultOverlayShown={false}
              delayShow={400}
              onEntering={[Function]}
              overlay={
                <Tooltip
                  bsClass="tooltip"
                  id="favoriteTooltip"
                  placement="right"
                >
                  <FormattedMessage
                    defaultMessage="Add to Favorites"
                    id="channelHeader.addToFavorites"
                    values={Object {}}
                  />
                </Tooltip>
              }
              placement="bottom"
              trigger={
                Array [
                  "hover",
                  "focus",
                ]
              }
            >
              <button
                aria-label="add to favorites"
                className="style--none color--link channel-header__favorites inactive"
                id="toggleFavorite"
                onClick={[Function]}
              >
                <i
                  className="icon fa fa-star-o"
                />
              </button>
            </OverlayTrigger>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span />
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        >
          <Connect(ChannelPermissionGate)
            channelId="channel_id"
            permissions={
              Array [
                "manage_public_channel_properties",
              ]
            }
            teamId="team_id"
          >
            <button
              className="style--none"
              onClick={[Function]}
            >
              <FormattedMessage
                defaultMessage="Add a channel description"
                id="channel_header.addChannelHeader"
                values={Object {}}
              />
              <FormattedMessage
                defaultMessage="(Edit)"
                id="channel_header.editLink"
                values={Object {}}
              >
                <Component />
              </FormattedMessage>
            </button>
          </Connect(ChannelPermissionGate)>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 0,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 0,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon active"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render archived view 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span>
                      <ArchiveIcon
                        className="icon icon__archive icon channel-header-archived-icon svg-text-color"
                      />
                    </span>
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        />
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 1234,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 1234,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render correct menu when muted 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <OverlayTrigger
              defaultOverlayShown={false}
              delayShow={400}
              onEntering={[Function]}
              overlay={
                <Tooltip
                  bsClass="tooltip"
                  id="favoriteTooltip"
                  placement="right"
                >
                  <FormattedMessage
                    defaultMessage="Add to Favorites"
                    id="channelHeader.addToFavorites"
                    values={Object {}}
                  />
                </Tooltip>
              }
              placement="bottom"
              trigger={
                Array [
                  "hover",
                  "focus",
                ]
              }
            >
              <button
                aria-label="add to favorites"
                className="style--none color--link channel-header__favorites inactive"
                id="toggleFavorite"
                onClick={[Function]}
              >
                <i
                  className="icon fa fa-star-o"
                />
              </button>
            </OverlayTrigger>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span />
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
          <OverlayTrigger
            defaultOverlayShown={false}
            delayShow={400}
            overlay={
              <Tooltip
                bsClass="tooltip"
                id="channelMutedTooltip"
                placement="right"
              >
                <FormattedMessage
                  defaultMessage="Unmute"
                  id="channelHeader.unmute"
                  values={Object {}}
                />
              </Tooltip>
            }
            placement="bottom"
            trigger={
              Array [
                "hover",
                "focus",
              ]
            }
          >
            <button
              aria-label="Muted Icon"
              className="style--none color--link channel-header__mute inactive"
              id="toggleMute"
              onClick={[Function]}
            >
              <i
                className="icon fa fa-bell-slash-o"
              />
            </button>
          </OverlayTrigger>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        >
          <Connect(ChannelPermissionGate)
            channelId="channel_id"
            permissions={
              Array [
                "manage_public_channel_properties",
              ]
            }
            teamId="team_id"
          >
            <button
              className="style--none"
              onClick={[Function]}
            >
              <FormattedMessage
                defaultMessage="Add a channel description"
                id="channel_header.addChannelHeader"
                values={Object {}}
              />
              <FormattedMessage
                defaultMessage="(Edit)"
                id="channel_header.editLink"
                values={Object {}}
              >
                <Component />
              </FormattedMessage>
            </button>
          </Connect(ChannelPermissionGate)>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 0,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 0,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render properly when empty 1`] = `
<div
  className="channel-header"
/>
`;

exports[`components/ChannelHeader should render properly when populated 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <OverlayTrigger
              defaultOverlayShown={false}
              delayShow={400}
              onEntering={[Function]}
              overlay={
                <Tooltip
                  bsClass="tooltip"
                  id="favoriteTooltip"
                  placement="right"
                >
                  <FormattedMessage
                    defaultMessage="Add to Favorites"
                    id="channelHeader.addToFavorites"
                    values={Object {}}
                  />
                </Tooltip>
              }
              placement="bottom"
              trigger={
                Array [
                  "hover",
                  "focus",
                ]
              }
            >
              <button
                aria-label="add to favorites"
                className="style--none color--link channel-header__favorites inactive"
                id="toggleFavorite"
                onClick={[Function]}
              >
                <i
                  className="icon fa fa-star-o"
                />
              </button>
            </OverlayTrigger>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span />
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description light"
          id="channelHeaderDescription"
        >
          <Connect(ChannelPermissionGate)
            channelId="channel_id"
            permissions={
              Array [
                "manage_public_channel_properties",
              ]
            }
            teamId="team_id"
          >
            <button
              className="style--none"
              onClick={[Function]}
            >
              <FormattedMessage
                defaultMessage="Add a channel description"
                id="channel_header.addChannelHeader"
                values={Object {}}
              />
              <FormattedMessage
                defaultMessage="(Edit)"
                id="channel_header.editLink"
                values={Object {}}
              >
                <Component />
              </FormattedMessage>
            </button>
          </Connect(ChannelPermissionGate)>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "delete_at": 0,
            "id": "channel_id",
            "name": "Test",
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "delete_at": 0,
          "id": "channel_id",
          "name": "Test",
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;

exports[`components/ChannelHeader should render properly when populated with channel props 1`] = `
<div
  aria-label="channel header region"
  className="channel-header alt a11y__region"
  data-a11y-sort-order="8"
  data-channelid="channel_id"
  id="channel-header"
  role="banner"
  tabIndex="-1"
>
  <div
    className="flex-parent"
  >
    <div
      className="flex-child"
    >
      <div
        className="channel-header__info"
        id="channelHeaderInfo"
      >
        <div
          className="channel-header__title dropdown"
        >
          <div>
            <MenuWrapper
              animationComponent={[Function]}
              className=""
            >
              <div
                className="channel-header__top"
                id="channelHeaderDropdownButton"
              >
                <button
                  aria-label="channel menu"
                  className="channel-header__trigger style--none"
                >
                  <strong
                    aria-level="2"
                    className="heading"
                    id="channelHeaderTitle"
                    role="heading"
                  >
                    <span>
                      <ArchiveIcon
                        className="icon icon__archive icon channel-header-archived-icon svg-text-color"
                      />
                    </span>
                  </strong>
                  <span
                    aria-label="dropdown icon"
                    className="fa fa-angle-down header-dropdown__icon"
                    id="channelHeaderDropdownIcon"
                  />
                </button>
              </div>
              <ChannelHeaderDropdown />
            </MenuWrapper>
          </div>
        </div>
        <div
          className="channel-header__description"
          id="channelHeaderDescription"
        >
          <div
            className="header-popover-text-measurer"
          >
            <Connect(Markdown)
              message="See ~test"
              options={
                Object {
                  "atMentions": true,
                  "channelNamesMap": Object {
                    "test": Object {
                      "display_name": "Test",
                    },
                  },
                  "mentionHighlight": false,
                  "singleline": true,
                }
              }
            />
          </div>
          <span
            className="header-description__text"
            onClick={[Function]}
            onMouseOut={[Function]}
            onMouseOver={[Function]}
          >
            <Overlay
              animation={[Function]}
              onEnter={[Function]}
              placement="bottom"
              rootClose={true}
              show={false}
              target={null}
            >
              <Popover
                className="channel-header__popover"
                id="header-popover"
                placement="bottom"
                popoverSize="lg"
                popoverStyle="info"
                style={
                  Object {
                    "maxWidth": "0px",
                  }
                }
              >
                <span
                  onClick={[Function]}
                >
                  <Connect(Markdown)
                    message="See ~test"
                    options={
                      Object {
                        "atMentions": true,
                        "channelNamesMap": Object {
                          "test": Object {
                            "display_name": "Test",
                          },
                        },
                        "mentionHighlight": false,
                        "singleline": false,
                      }
                    }
                  />
                </span>
              </Popover>
            </Overlay>
            <Connect(Markdown)
              message="See ~test"
              options={
                Object {
                  "atMentions": true,
                  "channelNamesMap": Object {
                    "test": Object {
                      "display_name": "Test",
                    },
                  },
                  "mentionHighlight": false,
                  "singleline": true,
                }
              }
            />
          </span>
        </div>
      </div>
    </div>
    <div
      className="flex-child"
    >
      <Connect(PopoverListMembers)
        channel={
          Object {
            "header": "See ~test",
            "id": "channel_id",
            "name": "Test",
            "props": Object {
              "channel_mentions": Object {
                "test": Object {
                  "display_name": "Test",
                },
              },
            },
            "team_id": "team_id",
          }
        }
      />
    </div>
    <Connect(ChannelHeaderPlug)
      channel={
        Object {
          "header": "See ~test",
          "id": "channel_id",
          "name": "Test",
          "props": Object {
            "channel_mentions": Object {
              "test": Object {
                "display_name": "Test",
              },
            },
          },
          "team_id": "team_id",
        }
      }
      channelMember={
        Object {
          "channel_id": "channel_id",
          "user_id": "user_id",
        }
      }
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderPinButton"
      iconComponent={
        <PinIcon
          aria-hidden="true"
          className="icon icon__pin"
        />
      }
      onClick={[Function]}
      tooltipKey="pinnedPosts"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonId="channelHeaderSearchButton"
      iconComponent={
        <SearchIcon
          aria-hidden="true"
          className="icon icon__search icon--stroke"
        />
      }
      onClick={[Function]}
      tooltipKey="search"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderMentionButton"
      iconComponent={
        <MentionsIcon
          aria-hidden="true"
          className="icon icon__mentions"
        />
      }
      onClick={[Function]}
      tooltipKey="recentMentions"
    />
    <HeaderIconWrapper
      ariaLabel={true}
      buttonClass="style--none channel-header__icon"
      buttonId="channelHeaderFlagButton"
      iconComponent={
        <FlagIcon
          className="icon icon__flag"
        />
      }
      onClick={[Function]}
      tooltipKey="flaggedPosts"
    />
  </div>
</div>
`;