Initial commit

Created from https://vercel.com/new

.circleci/config.yml

@@ -0,0 +1,21 @@
+version: 2.1
+orbs:
+  continuation: circleci/continuation@volatile
+  node: circleci/[email protected]
+setup: true
+jobs:
+  generate-config:
+    executor: node/default
+    steps:
+      - checkout
+      - run:
+          name: Generate config
+          command: |
+            yarn
+            yarn generateCircleConfig
+      - continuation/continue:
+          configuration_path: ./dynamicConfig.yml
+workflows:
+  dynamic-workflow:
+    jobs:
+      - generate-config

.devcontainer/devcontainer.json

@@ -0,0 +1,24 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
+{
+	"name": "Try Conversations",
+	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+	"secrets": {
+        "REACT_APP_ACCESS_TOKEN_SERVICE_URL": {
+          "description": "token service url, expected to provide a valid token for valid credentials",
+          "documentationUrl": "https://github.com/twilio/twilio-conversations-demo-react#set-the-token-service-url"
+        }
+	},
+	// Use 'onCreateCommand' to run commands after the container is created. Cached in prebuilds.
+	"onCreateCommand": "yarn",
+	// Use 'postCreateCommand' to run commands after the container is created. No caching.
+	"postCreateCommand": "sudo cp .devcontainer/first-run-notice.txt /workspaces/.codespaces/shared/first-run-notice.txt && yarn start",
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [3000],
+	// Use 'hostRequirements' to set minimum machine specs
+	"hostRequirements": {
+		"cpus": 2,
+		"memory": "4gb",
+		"storage": "32gb"
+	}
+}

.devcontainer/first-run-notice.txt

@@ -0,0 +1,3 @@
+👋 Welcome to the Conversations Demo Web application! This application demonstrates a basic Conversations client application with the ability to create and join conversations, add other participants into the conversations and exchange messages.
+
+📝 Please wait for the pop-up message to let you know that the port forwarding is done. Then, click "Open in Browser". If the pop-up isn't displayed, you can always open "PORTS" tab and click on "Open in Browser" button manually.

.dockerignore

@@ -0,0 +1,10 @@
+*
+
+!.eslintrc.json
+!tsconfig.json
+!webpack.config.js
+!.env
+!public/
+!yarn.lock
+!package.json
+!src/

.env.example

@@ -0,0 +1 @@
+REACT_APP_ACCESS_TOKEN_SERVICE_URL=

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ]
+}

.gitignore

@@ -0,0 +1,35 @@
+# dependencies
+/AutomationTests/node_modules
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+.build
+
+# misc
+/.idea
+.config
+.replit
+replit.nix
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+react-app-env.d.ts
+public/firebase-config.js
+public/firebase-messaging-sw.js
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+AutomationTests/environments/env_data
+
+dynamicConfig.yml

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "${1}"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "endOfLine": "auto"
+}

AutomationTests/encrypted/env_data.tar.enc

@@ -0,0 +1,15 @@
+U2FsdGVkX1/cwdgzMi7AojX21SIxqulEo/p8OSQtv2ljROu13vuVm/zZ95z3HW7I
+uPU8lt/wpHE42NaFfgfyiYEIoR8Uw6koxv7w5MxOdAFHY0imTxy+y4fN5UBroHMe
+O7+lJIJDwknX/lxCTt+wkuldzkpaKQjcNYZaMx9GyrFmh0HO0M5vTvPDkQBIxYAf
+/Gq/n/3kF4UWpKmAzVtdIDBRpB6S67AJSo6fZcW00uJ/GSSA2keCKq7/9+Cj7fCL
+UQT/6yaJviwO/GTXWOiM0rfyq5KX0JWp3DfIu4wVZesfiqAbpN4no2sL+bvboiVf
+f1T4AAumg/Ww2hwEtwrNzsl34mAGulYhSZiv9XqZVQ0SF2lCREQhFlinzarmxfkm
+23L74izg1zoWRujlAdVwaN3ES/Kqiky2d107B0junhY1RWX2X2Qo2jo2zE6xRPtS
+UA5PaKZCwmAXsOqmE5f8hvw8wt6wTKw5dogi1frITjaxkgRrE+UoaibW5vy+fFge
+hwgNznZITT1Rb2xQpEMTaame+YE/qVAJZJpNvJ5J4/3JY5aSqGQBWbczrop3W+nh
+3gj8/ZOeifQoWLtd9p+XoAM0wt9ESMTK9XBPxjI/W4iK7ssrnIp12vnmml5oXTRm
+BtXu1tq+CzefsWn5XytxGqicZacxNZ79P3OK7z0Tcbgc8bK0tM5vm2rDOaimph4B
+9n2KCGuNaLn15prj14gdRrF/jid76szqkpcOIKylpPz+G6BvnRHir7ZoC1vLey5f
+Ftm/1l0lNaDIhCQTETBU1QIlQ8cAMBih+dTnJTKQYgRiHK3D3Jys0X2IhBSwRRPX
+rquJXPIfLPmXsL1pecntXBmtvNj/UEIUpXvywvXYsLDBgDa7hIhBKYNmLuwjgfrW
+1E25StZV3Yjrh4sGo1D9WQ==

AutomationTests/features/login.feature

@@ -0,0 +1,7 @@
+Feature: Twilio Conversations Demo App
+
+  Scenario Outline: As a user, I can log into the Twilio Conversations Demo App using my credentials
+
+    Given I am on the login page
+    When I login with username and password
+    Then I should see available conversations

AutomationTests/features/pageobjects/login.page.js

@@ -0,0 +1,39 @@
+
+
+const Page = require('./page');
+
+class LoginPage extends Page {
+    /**
+     * define selectors using getter methods
+     */
+    get inputUsername () {
+        return $('#username');
+    }
+
+    get inputPassword () {
+        return $('#password');
+    }
+
+    get btnSubmit () {
+        return $('#login');
+    }
+
+    /**
+     * a method to encapsule automation code to interact with the page
+     * e.g. to login using username and password
+     */
+    async login (username, password) {
+        await this.inputUsername.setValue(username);
+        await this.inputPassword.setValue(password);
+        await this.btnSubmit.click();
+    }
+
+    /**
+     * overwrite specific options to adapt it to page object
+     */
+    open () {
+        return super.open('login');
+    }
+}
+
+module.exports = new LoginPage();

AutomationTests/features/pageobjects/page.js

@@ -0,0 +1,12 @@
+/**
+* main page object containing all methods, selectors and functionality
+* that is shared across all page objects
+*/
+module.exports = class Page {
+    /**
+    * Opens a sub page of the page
+    */
+    open () {
+        return browser.url(`http://localhost:3000/`)
+    }
+}

AutomationTests/features/step-definitions/steps.js

@@ -0,0 +1,22 @@
+const { Given, When, Then } = require('@wdio/cucumber-framework');
+
+const LoginPage = require('../pageobjects/login.page');
+const { Login_variables } = require('../../environments/env_data/test-variables.json');
+
+const pages = {
+    login: LoginPage
+}
+
+Given(/^I am on the (\w+) page$/, async (page) => {
+    await pages[page].open();
+});
+
+When(/^I login with username and password$/, async () => {
+    await browser.pause(3000);
+    await LoginPage.login(Login_variables.username, Login_variables.password);
+});
+
+Then(/^I should see available conversations$/, async () => {
+    await browser.pause(10000);
+});
+