14297441311

Committed 06 Apr 2025 10:58PM UTC coverage: 93.706% (-2.6%) from 96.296%

Build # 14297441311

Build Type

push

github

Committed by

super3

Commit Message

Add Slack Feed Channel

Add Slack Channel

Run Details

165 of 182 branches covered (90.66%)

Branch coverage included in aggregate %.

12 of 12 new or added lines in 3 files covered. (100.0%)

6 existing lines in 2 files now uncovered.

237 of 247 relevant lines covered (95.95%)

10.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

90.61

/src/components/DirectMessageSidebar.vue

<template>
  <div class="bg-indigo-darker text-purple-lighter flex-none w-64 pb-6 hidden md:block">
    <div class="text-white mb-2 mt-3 px-4 flex justify-between">
      <div class="flex-auto">
        <h1 class="font-semibold text-xl leading-tight mb-1 truncate">nilo.chat</h1>
        <div class="flex items-center mb-6">
          <span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2 mr-2']"></span>
          <span class="text-white/50 text-sm">{{ username }}</span>
        </div>
      </div>
    </div>
    
    <!-- Channels section -->
    <div class="mb-8">
      <div class="px-4 mb-1 text-white flex items-center">
        <div @click="toggleChannels" class="cursor-pointer w-4 mr-2 flex justify-center">
          <svg v-if="showChannels" class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
          </svg>
          <svg v-else class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
          </svg>
        </div>
        <div @click="toggleChannels" class="opacity-75 flex-1 cursor-pointer">Channels</div>
        <div>
          <svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
          </svg>
        </div>
      </div>
      <!-- Show all channels when showChannels is true -->
      <div v-if="showChannels">
        <div 
          @click="switchChannel('general')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"
          :class="{ 'bg-teal-dark': currentChannel === 'general' }"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>general</span>
          <div v-if="getUnreadCount('general') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('general') }}
            </span>
          </div>
        </div>
        <div 
          @click="switchChannel('feedback')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"
          :class="{ 'bg-teal-dark': currentChannel === 'feedback' }"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>feedback</span>
          <div v-if="getUnreadCount('feedback') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('feedback') }}
            </span>
          </div>
        </div>
        <div 
          @click="switchChannel('slack-feed')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"
          :class="{ 'bg-teal-dark': currentChannel === 'slack-feed' }"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>slack-feed</span>
          <div v-if="getUnreadCount('slack-feed') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('slack-feed') }}
            </span>
          </div>
        </div>
      </div>
      <!-- Show only selected channel when showChannels is false -->
      <div v-else>
        <div 
          v-if="currentChannel === 'general'"
          @click="switchChannel('general')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>general</span>
          <div v-if="getUnreadCount('general') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('general') }}
            </span>
          </div>
        </div>
        <div 
          v-if="currentChannel === 'feedback'"
          @click="switchChannel('feedback')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>feedback</span>
          <div v-if="getUnreadCount('feedback') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('feedback') }}
            </span>
          </div>
        </div>
        <div 
          v-if="currentChannel === 'slack-feed'"
          @click="switchChannel('slack-feed')" 
          class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
        >
          <div class="w-4 mr-2 text-center">#</div>
          <span>slack-feed</span>
          <div v-if="getUnreadCount('slack-feed') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('slack-feed') }}
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Direct Messages section -->
    <div class="mb-8">
      <div class="px-4 mb-1 text-white flex items-center">
        <div @click="toggleDirectMessages" class="cursor-pointer w-4 mr-2 flex justify-center">
          <svg v-if="showDirectMessages" class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
          </svg>
          <svg v-else class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
          </svg>
        </div>
        <div @click="toggleDirectMessages" class="opacity-75 flex-1 cursor-pointer">Direct Messages</div>
        <div>
          <svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
          </svg>
        </div>
      </div>
      <!-- Show all DMs when expanded -->
      <div v-if="showDirectMessages">
        <div class="px-4 py-1 flex items-center cursor-pointer hover:bg-teal-darker"
             :class="{ 'bg-teal-dark': currentChannel === 'dm_self' }"
             @click="switchChannel('dm_self')"
             data-testid="dm-self">
          <div class="w-4 mr-2 flex justify-center">
            <span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2']"></span>
          </div>
          <span class="text-white opacity-75">{{ username }} 
            <span :class="[currentChannel === 'dm_self' ? 'text-white text-opacity-80' : 'text-gray-500', 'text-sm']">(you)</span>
          </span>
          <div v-if="getUnreadCount('dm_self') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('dm_self') }}
            </span>
          </div>
        </div>
      </div>
      <!-- Show only selected DM when showDirectMessages is false -->
      <div v-else>
        <div 
          v-if="currentChannel === 'dm_self'"
          class="px-4 py-1 flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
          @click="switchChannel('dm_self')"
          data-testid="dm-self-collapsed">
          <div class="w-4 mr-2 flex justify-center">
            <span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2']"></span>
          </div>
          <span class="text-white opacity-75">{{ username }} 
            <span class="text-white text-opacity-80 text-sm">(you)</span>
          </span>
          <div v-if="getUnreadCount('dm_self') > 0" class="ml-auto">
            <span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
              {{ getUnreadCount('dm_self') }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DirectMessageSidebar',
  props: {
    username: {
      type: String,
      required: true
    },
    isConnected: {
      type: Boolean,
      default: false
    },
    currentChannel: {
      type: String,
      default: 'general'
    },
    channelUnreadCounts: {
      type: Object,
      default: () => ({
        general: 0,
        feedback: 0,
        'slack-feed': 0,
        dm_self: 0
      })
    }
  },
  data() {
    return {
      showChannels: true,
      showDirectMessages: true
    }
  },
  methods: {
    toggleChannels() {
      this.showChannels = !this.showChannels;
    },
    toggleDirectMessages() {
      this.showDirectMessages = !this.showDirectMessages;
    },
    switchChannel(channel) {
      if (channel !== this.currentChannel) {
        this.$emit('channel-change', channel);
      }
    },
    getUnreadCount(channel) {
      const count = this.channelUnreadCounts[channel] || 0;
      console.log(`Getting unread count for ${channel}: ${count}`);
      return count;
    }
  }
}
</script> 

1	<template>
2	<div class="bg-indigo-darker text-purple-lighter flex-none w-64 pb-6 hidden md:block">
3	<div class="text-white mb-2 mt-3 px-4 flex justify-between">
4	<div class="flex-auto">	1✔
5	<h1 class="font-semibold text-xl leading-tight mb-1 truncate">nilo.chat</h1>
6	<div class="flex items-center mb-6">
7	<span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2 mr-2']"></span>	1✔
8	<span class="text-white/50 text-sm">{{ username }}</span>	1✔
9	</div>
10	</div>
11	</div>
12
13	<!-- Channels section -->
14	<div class="mb-8">
15	<div class="px-4 mb-1 text-white flex items-center">
16	<div @click="toggleChannels" class="cursor-pointer w-4 mr-2 flex justify-center">
17	<svg v-if="showChannels" class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
18	<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
19	</svg>
20	<svg v-else class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
21	<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
22	</svg>
23	</div>
24	<div @click="toggleChannels" class="opacity-75 flex-1 cursor-pointer">Channels</div>
25	<div>	26✔
26	<svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
27	<path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
28	</svg>
29	</div>
30	</div>
31	<!-- Show all channels when showChannels is true -->
32	<div v-if="showChannels">
33	<div
34	@click="switchChannel('general')"	28✔
35	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"
36	:class="{ 'bg-teal-dark': currentChannel === 'general' }"
37	>
38	<div class="w-4 mr-2 text-center">#</div>
39	<span>general</span>
40	<div v-if="getUnreadCount('general') > 0" class="ml-auto">
41	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">	6✔
42	{{ getUnreadCount('general') }}
43	</span>
44	</div>	6✔
45	</div>
46	<div
47	@click="switchChannel('feedback')"	13✔
48	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"	7✔
49	:class="{ 'bg-teal-dark': currentChannel === 'feedback' }"
50	>
51	<div class="w-4 mr-2 text-center">#</div>
52	<span>feedback</span>	222✔
53	<div v-if="getUnreadCount('feedback') > 0" class="ml-auto">	222✔
54	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">	222✔
55	{{ getUnreadCount('feedback') }}
56	</span>
57	</div>
58	</div>	1✔
59	<div
60	@click="switchChannel('slack-feed')"	1✔
61	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker"
62	:class="{ 'bg-teal-dark': currentChannel === 'slack-feed' }"
63	>	1✔
64	<div class="w-4 mr-2 text-center">#</div>	1✔
65	<span>slack-feed</span>	1✔
66	<div v-if="getUnreadCount('slack-feed') > 0" class="ml-auto">
67	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
68	{{ getUnreadCount('slack-feed') }}	1✔
69	</span>
70	</div>
71	</div>	1✔
72	</div>
73	<!-- Show only selected channel when showChannels is false -->
74	<div v-else>	1✔
75	<div
76	v-if="currentChannel === 'general'"
77	@click="switchChannel('general')"	1✔
78	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
79	>
80	<div class="w-4 mr-2 text-center">#</div>	1✔
81	<span>general</span>
82	<div v-if="getUnreadCount('general') > 0" class="ml-auto">
83	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">	1✔
84	{{ getUnreadCount('general') }}
85	</span>
86	</div>	1✔
87	</div>
88	<div
89	v-if="currentChannel === 'feedback'"
90	@click="switchChannel('feedback')"
91	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
92	>	1✔
93	<div class="w-4 mr-2 text-center">#</div>
94	<span>feedback</span>
95	<div v-if="getUnreadCount('feedback') > 0" class="ml-auto">
96	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
97	{{ getUnreadCount('feedback') }}
98	</span>	1✔
99	</div>
100	</div>
101	<div	1✔
102	v-if="currentChannel === 'slack-feed'"
103	@click="switchChannel('slack-feed')"
104	class="px-4 py-1 text-white flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
105	>	1✔
106	<div class="w-4 mr-2 text-center">#</div>
107	<span>slack-feed</span>
108	<div v-if="getUnreadCount('slack-feed') > 0" class="ml-auto">	1✔
109	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
110	{{ getUnreadCount('slack-feed') }}
111	</span>
112	</div>	1✔
113	</div>
114	</div>
115	</div>	1✔
116
117	<!-- Direct Messages section -->
118	<div class="mb-8">
119	<div class="px-4 mb-1 text-white flex items-center">	1✔
120	<div @click="toggleDirectMessages" class="cursor-pointer w-4 mr-2 flex justify-center">
121	<svg v-if="showDirectMessages" class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
122	<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>	1✔
123	</svg>
124	<svg v-else class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
125	<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
126	</svg>	1✔
127	</div>
128	<div @click="toggleDirectMessages" class="opacity-75 flex-1 cursor-pointer">Direct Messages</div>
129	<div>	1✔
130	<svg class="fill-current h-4 w-4 opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
131	<path d="M11 9h4v2h-4v4H9v-4H5V9h4V5h2v4zm-1 11a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z" />
132	</svg>
133	</div>	1✔
134	</div>
135	<!-- Show all DMs when expanded -->
136	<div v-if="showDirectMessages">	1✔
137	<div class="px-4 py-1 flex items-center cursor-pointer hover:bg-teal-darker"
138	:class="{ 'bg-teal-dark': currentChannel === 'dm_self' }"
139	@click="switchChannel('dm_self')"
140	data-testid="dm-self">	1✔
141	<div class="w-4 mr-2 flex justify-center">
142	<span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2']"></span>
143	</div>	1✔
144	<span class="text-white opacity-75">{{ username }}
145	<span :class="[currentChannel === 'dm_self' ? 'text-white text-opacity-80' : 'text-gray-500', 'text-sm']">(you)</span>
146	</span>	1✔
147	<div v-if="getUnreadCount('dm_self') > 0" class="ml-auto">
148	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
149	{{ getUnreadCount('dm_self') }}	1✔
150	</span>
151	</div>
152	</div>
153	</div>
154	<!-- Show only selected DM when showDirectMessages is false -->
155	<div v-else>	1✔
156	<div
157	v-if="currentChannel === 'dm_self'"
158	class="px-4 py-1 flex items-center cursor-pointer hover:bg-teal-darker bg-teal-dark"
159	@click="switchChannel('dm_self')"
160	data-testid="dm-self-collapsed">
161	<div class="w-4 mr-2 flex justify-center">	1✔
162	<span :class="[isConnected ? 'bg-green-500' : 'border border-white', 'rounded-full block w-2 h-2']"></span>
163	</div>
164	<span class="text-white opacity-75">{{ username }}	1✔
165	<span class="text-white text-opacity-80 text-sm">(you)</span>
166	</span>
167	<div v-if="getUnreadCount('dm_self') > 0" class="ml-auto">	1✔
168	<span class="bg-red-600 text-white text-xs rounded-full py-1 px-2 font-bold">
169	{{ getUnreadCount('dm_self') }}
170	</span>	1✔
171	</div>
172	</div>
173	</div>
174	</div>	1✔
175	</div>
176	</template>
177		1✔
178	<script>
179	export default {
180	name: 'DirectMessageSidebar',	1✔
181	props: {
182	username: {
183	type: String,	1✔
184	required: true
185	},
186	isConnected: {
187	type: Boolean,	1✔
188	default: false
189	},
190	currentChannel: {
191	type: String,	57✔
192	default: 'general'
193	},
194	channelUnreadCounts: {	57✔
195	type: Object,
196	default: () => ({	1✔
197	general: 0,
198	feedback: 0,	132✔
199	'slack-feed': 0,
200	dm_self: 0	16✔
201	})
202	}
203	},	1✔
204	data() {
205	return {	85✔
206	showChannels: true,
207	showDirectMessages: true
208	}
209	},
210	methods: {
211	toggleChannels() {	57✔
UNCOV 212	this.showChannels = !this.showChannels;	✔
213	},
214	toggleDirectMessages() {
215	this.showDirectMessages = !this.showDirectMessages;
216	},	75✔
217	switchChannel(channel) {
218	if (channel !== this.currentChannel) {	122✔
219	this.$emit('channel-change', channel);	1✔
220	}
221	},
222	getUnreadCount(channel) {
223	const count = this.channelUnreadCounts[channel] \|\| 0;	75✔
224	console.log(`Getting unread count for ${channel}: ${count}`);
225	return count;	122✔
UNCOV 226	}	✔
227	}
228	}
229	</script>

super3 / nilo.chat / 14297441311

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous