Add e2e test cases (#7)

Add e2e cases
piesocket · Jan 27, 2022 · d2d1f4f · d2d1f4f
1 parent 7426178
commit d2d1f4f
Show file tree

Hide file tree

Showing 11 changed files with 2,027 additions and 10 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -8,13 +8,12 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
+      fail-fast: true
+      max-parallel: 1
       matrix:
         node-version: [12.x, 14.x, 15.x]
-
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
@@ -24,4 +23,5 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - run: npm run build --if-present
+      - run: npm start &
       - run: npm test
diff --git a/README.md b/README.md
@@ -71,13 +71,12 @@ channel.listen('*', function(event, data, meta){
 
 4. Listen to lifecycle events
 ```javascript
-channel.on('open', function(event){
-    console.log("PieSocket connected!");
+channel.on('close', function(event){
+    console.log("PieSocket disconnected!");
 });
 ```
 
 Following life-cycle events are available:
-  - `open`: Fired when WebSocket connect is established.
   - `message`: Fired when WebSocket message is received.
   - `error`: Fired when WebSocket connection errors occur.
   - `close`: Fired when WebSocket connection is closed.
@@ -186,9 +185,9 @@ Complete list of allowed configuration options
 - Clone the repo `git clone [email protected]:piesocket/piesocket-js.git`
 - Run `npm install`
 - Run `npm start`
-- Open `http://localhost:8080/examples/`
+- Open `http://localhost:8080` in browser
 
-Now you can interactively test the SDK and find sample codes.
+Now you can interactively test the SDK, add features and fix bugs.
 
 
 Documentation: [PieSocket WebSocket docs](https://piesocket.com/docs)
diff --git a/examples/chatroom.html b/examples/chatroom.html
@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Realtime Chatroom - PieSocket Channels</title>
+	<script src="https://cdn.tailwindcss.com"></script>
+	<script src="/dist/piesocket.js"></script>
+</head>
+
+<body>
+
+	<!-- Background color split screen for large screens -->
+	<div class="fixed top-0 left-0 w-1/2 h-full bg-white" aria-hidden="true"></div>
+	<div class="fixed top-0 right-0 w-1/2 h-full bg-gray-50" aria-hidden="true"></div>
+	<div class="relative min-h-screen flex flex-col">
+		<!-- Navbar -->
+		<nav class="flex-shrink-0 bg-gray-100">
+			<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
+				<div class="relative flex items-center justify-between h-16">
+
+					<div class="flex items-center px-2 lg:px-0 xl:w-64">
+						<div class="flex-shrink-0">
+							<a href="/examples">
+								<img class="h-8 w-auto" src="http://websocket-v3.test/img/piesocket-text.png" alt="PieSocket">
+								<span class="text-sm ml-1 text-slate-400">Realtime Serverless Chatroom</span>
+							</a>
+						</div>
+					</div>
+
+				</div>
+			</div>
+
+
+		</nav>
+
+		<!-- 3 column wrapper -->
+		<div class="flex-grow w-full max-w-7xl mx-auto xl:px-8 lg:flex">
+			<!-- Left sidebar & main wrapper -->
+			<div class="flex-1 min-w-0 bg-white xl:flex">
+
+				<div class="bg-white lg:min-w-0 lg:flex-1">
+					<div class="h-full py-6 px-4 sm:px-6 lg:px-8">
+						<!-- Start main area-->
+						<div class="relative h-full" style="min-height: 36rem;">
+							<div id="chat-room-container"
+								class="absolute overflow-scroll inset-0 border-2 border-gray-200 border-dashed p-12 rounded-lg">
+
+								<div class="flow-root">
+									<ul id="chat-room" role="list" class="-mb-8">
+
+
+									</ul>
+								</div>
+
+							</div>
+						</div>
+						<!-- End main area -->
+					</div>
+				</div>
+			</div>
+
+			<div class="bg-gray-50 pr-4 sm:pr-6 lg:pr-8 lg:flex-shrink-0 lg:border-l lg:border-gray-200 xl:pr-0">
+				<div class="h-full pl-6 py-6 lg:w-80">
+					<!-- Start right column area -->
+					<div class="h-full relative" style="min-height: 16rem;">
+						<div class="absolute inset-0 p-4 border-2 border-gray-200 border-dashed rounded-lg">
+							<!-- Members list -->
+							<h3 class="text-lg leading-6 font-medium text-gray-900">
+								Members
+							</h3>
+							<ul id="members-list" role="list" style="max-height: 70%;"
+								class="overflow-scroll divide-y divide-gray-200">
+
+							</ul>
+
+						</div>
+
+						<!-- Chat poster -->
+						<div class="absolute bottom-0 w-full flex pt-12  items-start space-x-4">
+							<div class="min-w-0 flex-1">
+								<form id="chat-form" action="#" class="relative">
+									<div
+										class="border border-gray-300 rounded-lg shadow-sm overflow-hidden focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
+										<label for="comment" class="sr-only">Add your comment</label>
+										<textarea id="chat-message-input" rows="3" name="comment" id="comment"
+											class="p-4 block w-full py-3 border-0 resize-none focus:ring-0 sm:text-sm"
+											placeholder="Add your comment..."></textarea>
+
+										<!-- Spacer element to match the height of the toolbar -->
+										<div class="py-2" aria-hidden="true">
+											<!-- Matches height of button in toolbar (1px border + 36px content height) -->
+											<div class="py-px">
+												<div class="h-9"></div>
+											</div>
+										</div>
+									</div>
+
+									<div class="absolute bottom-0 inset-x-0 pl-3 pr-2 py-2 flex justify-between">
+										<div class="flex-shrink-0">
+											<button type="submit"
+												class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+												Post
+											</button>
+										</div>
+									</div>
+								</form>
+							</div>
+						</div>
+
+					</div>
+					<!-- End right column area -->
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div style="display: none;">
+		<div id="chat-message-component">
+			<li>
+				<div class="relative pb-8">
+					<div class="relative flex items-start space-x-3">
+						<div class="relative">
+							<img id="chat-sender-avatar"
+								class="h-10 w-10 rounded-full bg-gray-400 flex items-center justify-center ring-8 ring-white"
+								src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
+								alt="">
+
+							<span class="absolute -bottom-0.5 -right-1 bg-white rounded-tl px-0.5 py-px">
+								<!-- Heroicon name: solid/chat-alt -->
+								<svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
+									fill="currentColor" aria-hidden="true">
+									<path fill-rule="evenodd"
+										d="M18 5v8a2 2 0 01-2 2h-5l-5 4v-4H4a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2zM7 8H5v2h2V8zm2 0h2v2H9V8zm6 0h-2v2h2V8z"
+										clip-rule="evenodd" />
+								</svg>
+							</span>
+						</div>
+						<div class="min-w-0 flex-1">
+							<div>
+								<div class="text-sm">
+									<a href="#" id="chat-sender" class="font-medium text-gray-900"></a>
+								</div>
+								<p id="chat-action" class="mt-0.5 text-sm text-gray-500">
+									Wrote
+								</p>
+							</div>
+							<div class="mt-2 text-sm text-gray-700">
+								<p id="chat-text">
+									Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+									Tincidunt nunc ipsum tempor purus vitae id. Morbi in
+									vestibulum nec varius. Et diam cursus quis sed purus
+									nam. Scelerisque amet elit non sit ut tincidunt
+									condimentum. Nisl ultrices eu venenatis diam.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</li>
+		</div>
+		<div id="member-list-component">
+			<li class="py-4 flex">
+				<img id="member-avatar" class="h-10 w-10 rounded-full"
+					src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+					alt="">
+				<div class="ml-3">
+					<p id="member-name" class="text-sm font-medium text-gray-900">Calvin Hawkins</p>
+					<p class="text-sm text-gray-500">Online</p>
+				</div>
+			</li>
+		</div>
+	</div>
+
+	<script>
+		username = window.location.hash.replace("#", "");
+		console.log(username);
+		if (!username) {
+			username = prompt("Enter username");
+			if (!username) {
+				//Do not allow without an username
+				window.location.reload();
+			}
+		}
+
+		/* Functions Start */
+		function addMessage(from, message, action = "Wrote") {
+			var chatMessageComponent = document.getElementById("chat-message-component");
+
+			chatMessageComponent.querySelector("#chat-sender").innerText = from;
+			chatMessageComponent.querySelector("#chat-sender-avatar").src = "https://ui-avatars.com/api/?name=" + (from.charAt(0));
+			chatMessageComponent.querySelector("#chat-action").innerText = action;
+			chatMessageComponent.querySelector("#chat-text").innerText = message;
+			document.getElementById("chat-room").innerHTML += chatMessageComponent.innerHTML;
+			document.getElementById("chat-room-container").scrollTop = document.getElementById("chat-room").scrollHeight;
+		}
+
+		function sendMessage() {
+			var message = document.getElementById("chat-message-input").value;
+
+			//Publish message, this can be done from backend as well
+			channel.publish("new-message", {
+				message: message
+			}, {
+				from: username
+			});
+
+			document.getElementById("chat-message-input").value = "";
+		}
+
+		function refreshMembersList() {
+			var membersListMarkup = "";
+
+			channel.members.forEach((member) => {
+				var memberListComponent = document.getElementById("member-list-component");
+				memberListComponent.querySelector("#member-avatar").src = "https://ui-avatars.com/api/?name=" + (member.user.charAt(0));
+				memberListComponent.querySelector("#member-name").innerText = member.user;
+				membersListMarkup += memberListComponent.innerHTML;
+			});
+
+			document.getElementById("members-list").innerHTML = membersListMarkup;
+		}
+
+		/* Functions End */
+
+		//Initialize PieSocket
+		var piesocket = new PieSocket({
+			clusterId: 'demo',
+			apiKey: 'oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm',
+			consoleLogs: true,
+			notifySelf: true,
+			presence: true,
+			userId: username
+		});
+
+		piesocket.subscribe("chat-channel").then(ch => {
+			window.channel = ch;
+
+			channel.listen("new-message", function (data, meta) {
+				addMessage(meta.from, data.message);
+			});
+
+			channel.listen("system:member_joined", function (data, meta) {
+				addMessage(data.member.user, "", "Joined the chat");
+				refreshMembersList();
+			});
+
+			channel.listen("system:member_left", function (data, meta) {
+				addMessage(data.member.user, "", "Left the chat");
+				refreshMembersList();
+			});
+		})
+
+
+		//Handle form submit
+		var chatForm = document.getElementById("chat-form");
+		chatForm.onsubmit = function (e) {
+			e.preventDefault();
+			sendMessage();
+		}
+
+		//Handle enter key press
+		document.getElementById("chat-message-input").onkeyup = function (e) {
+			if (e.keyCode == 13) {
+				e.preventDefault();
+				sendMessage();
+			}
+		}
+
+	</script>
+</body>
+
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        window.location.href = "/";
+    </script>
+</head>
+<body>
+
+</body>
+</html>