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

exports[`<ChannelDetails /> as a moderator should render and test snapshot 1`] = `
<div
  class="channeldetails"
>
  <h1
    class="channeldetails__name"
  >
    channel name
  </h1>
  <div
    class="channeldetails__description"
    style={
      Object {
        "marginBottom": "20px",
      }
    }
  >
    <em>
      something about this channel
    </em>
  </div>
  <div
    class="channeldetails__user"
  >
    <img
      alt="channeluser1 profile"
      class="channeldetails__userprofileimage"
      data-content="users/userid1"
    />
    <a
      data-content="users/by_username?url=channeluser1"
      href="/channeluser1"
      style={
        Object {
          "color": undefined,
          "padding": "3px 0px",
        }
      }
    >
      channel user 1
    </a>
  </div>
  <div
    class="channeldetails__user"
  >
    <img
      alt="channeluser2 profile"
      class="channeldetails__userprofileimage"
      data-content="users/userid2"
    />
    <a
      data-content="users/by_username?url=channeluser2"
      href="/channeluser2"
      style={
        Object {
          "color": undefined,
          "padding": "3px 0px",
        }
      }
    >
      channel user 2
    </a>
  </div>
  <div
    class="channeldetails__inviteusers"
  >
    <h2>
      Invite Members
    </h2>
    <input
      onKeyUp={[Function]}
      placeholder="Find users"
    />
    <div
      class="channeldetails__searchresults"
    />
    <h2>
      Pending Invites:
    </h2>
    <div
      class="channeldetails__pendingusers"
    >
      <a
        data-content="users/pendinguserid1"
        href="/pendinguser1"
        rel="noopener noreferrer"
        target="_blank"
      >
        @pendinguser1 - pending user 1
      </a>
    </div>
    <div
      class="channeldetails__pendingusers"
    >
      <a
        data-content="users/pendinguserid2"
        href="/pendinguser2"
        rel="noopener noreferrer"
        target="_blank"
      >
        @pendinguser2 - pending user 2
      </a>
    </div>
    <div
      style={
        Object {
          "marginTop": "10px",
        }
      }
    >
      Contact yo@dev.to for assistance.
    </div>
  </div>
</div>
`;

exports[`<ChannelDetails /> as a moderator should search users and populate searched users div 1`] = `
preact-render-spy (1 nodes)
-------
<div class="channeldetails">
  <h1 class="channeldetails__name">channel name</h1>
  <div
    class="channeldetails__description"
    style="margin-bottom: 20px;"
  >
    <em>something about this channel</em>
  </div>
  <div class="channeldetails__user">
    <img
      class="channeldetails__userprofileimage"
      alt="channeluser1 profile"
      data-content="users/userid1"
     />
    <a
      href="/channeluser1"
      style="padding: 3px 0px;"
      data-content="users/by_username?url=channeluser1"
    >
      channel user 1
    </a>
  </div>
  <div class="channeldetails__user">
    <img
      class="channeldetails__userprofileimage"
      alt="channeluser2 profile"
      data-content="users/userid2"
     />
    <a
      href="/channeluser2"
      style="padding: 3px 0px;"
      data-content="users/by_username?url=channeluser2"
    >
      channel user 2
    </a>
  </div>
  <div class="channeldetails__inviteusers">
    <h2>Invite Members</h2>
    <input
      onKeyUp={[Function value]}
      placeholder="Find users"
     />
    <div class="channeldetails__searchresults">
      <div class="channeldetails__searchedusers">
        <a
          href="/user_path1"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            src="channeluser1pic.png"
            alt="profile_image"
           />
          @channeluser1 - i am channel user 1
        </a>
         
        <span class="channel__member">
          is already in 
          <em>channel name</em>
        </span>
      </div>
      <div class="channeldetails__searchedusers">
        <a
          href="/search_path3"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            src="searcheduser3pic.png"
            alt="profile_image"
           />
          @searcheduser3 - i am searched user 3
        </a>
         
        <button
          type="button"
          onClick={[Function value]}
          data-content="searched_userid3"
        >
          Invite
        </button>
      </div>
    </div>
    <h2>Pending Invites:</h2>
    <div class="channeldetails__pendingusers">
      <a
        href="/pendinguser1"
        target="_blank"
        rel="noopener noreferrer"
        data-content="users/pendinguserid1"
      >
        @pendinguser1 - pending user 1
      </a>
    </div>
    <div class="channeldetails__pendingusers">
      <a
        href="/pendinguser2"
        target="_blank"
        rel="noopener noreferrer"
        data-content="users/pendinguserid2"
      >
        @pendinguser2 - pending user 2
      </a>
    </div>
    <div style="margin-top: 10px;">Contact yo@dev.to for assistance.</div>
  </div>
</div>

`;

exports[`<ChannelDetails /> as a user should leave channel and show appropriate message 1`] = `
preact-render-spy (1 nodes)
-------
<div class="channeldetails">
  <h1 class="channeldetails__name">channel name</h1>
  <div
    class="channeldetails__description"
    style="margin-bottom: 20px;"
  >
    <em>something about this channel</em>
  </div>
  <div class="channeldetails__user">
    <img
      class="channeldetails__userprofileimage"
      alt="channeluser1 profile"
      data-content="users/userid1"
     />
    <a
      href="/channeluser1"
      style="padding: 3px 0px;"
      data-content="users/by_username?url=channeluser1"
    >
      channel user 1
    </a>
  </div>
  <div class="channeldetails__user">
    <img
      class="channeldetails__userprofileimage"
      alt="channeluser2 profile"
      data-content="users/userid2"
     />
    <a
      href="/channeluser2"
      style="padding: 3px 0px;"
      data-content="users/by_username?url=channeluser2"
    >
      channel user 2
    </a>
  </div>
  <div class="channeldetails__leftchannel">
    <h2>Danger Zone</h2>
    <h3>
      You have left this channel 
      <span
        role="img"
        aria-label="emoji"
      >
        😢😢😢
      </span>
    </h3>
    <h4>
      This may take a few minutes to be reflected in the sidebar
    </h4>
  </div>
</div>

`;

exports[`<ChannelDetails /> as a user should render and test snapshot 1`] = `
<div
  class="channeldetails"
>
  <h1
    class="channeldetails__name"
  >
    channel name
  </h1>
  <div
    class="channeldetails__description"
    style={
      Object {
        "marginBottom": "20px",
      }
    }
  >
    <em>
      something about this channel
    </em>
  </div>
  <div
    class="channeldetails__user"
  >
    <img
      alt="channeluser1 profile"
      class="channeldetails__userprofileimage"
      data-content="users/userid1"
    />
    <a
      data-content="users/by_username?url=channeluser1"
      href="/channeluser1"
      style={
        Object {
          "color": undefined,
          "padding": "3px 0px",
        }
      }
    >
      channel user 1
    </a>
  </div>
  <div
    class="channeldetails__user"
  >
    <img
      alt="channeluser2 profile"
      class="channeldetails__userprofileimage"
      data-content="users/userid2"
    />
    <a
      data-content="users/by_username?url=channeluser2"
      href="/channeluser2"
      style={
        Object {
          "color": undefined,
          "padding": "3px 0px",
        }
      }
    >
      channel user 2
    </a>
  </div>
  <div
    class="channeldetails__leavechannel"
  >
    <h2>
      Danger Zone
    </h2>
    <button
      data-content="12345"
      onClick={[Function]}
      type="button"
    >
      Leave Channel
    </button>
  </div>
</div>
`;
