Test files and github actions

.github/workflows/deploy.yml

@@ -0,0 +1,106 @@
+name: Deploy
+
+on:
+  workflow_dispatch:
+    inputs:
+      ReleaseType:
+        description: 'Release Type'
+        required: true
+        default: 'warning'
+        type: choice
+        options:
+        - Major
+        - Feature
+        - Bug
+
+jobs:
+  update-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+          scope: '@keyvaluesystems'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm run test
+
+      - name: 'Set release type : ${{ inputs.ReleaseType }}'
+        id: release_type
+        uses: ASzc/change-string-case-action@v5
+        with:
+          string: ${{ inputs.ReleaseType }}
+
+      - name: Extract Current Branch and Validate
+        id: get_current_branch
+        shell: bash
+        run: |
+          BRANCH="${GITHUB_REF#refs/heads/}"
+          if [ "$BRANCH" == 'main' ]
+            then
+              echo "Branch validation Successful"
+            else
+              echo "Releases only taken from main branch"
+              exit 1
+          fi
+
+      - name: Get Latest version from package.json
+        run: |
+          # Get the latest version from package.json
+          LATEST_VERSION=$(node -p "require('./package.json').version")
+
+          # Output the latest version as a workflow env
+          echo "latest_version=$LATEST_VERSION" >> $GITHUB_ENV
+
+      - name: Get new version
+        id: get_next_version
+        uses: christian-draeger/[email protected]
+        with:
+          current-version: ${{ env.latest_version }}
+          version-fragment: ${{ steps.release_type.outputs.lowercase }}
+
+      - name: Update version in package.json and package-lock.json
+        run: |
+          OLD_VERSION=${{ env.latest_version }}
+          NEW_VERSION=${{ steps.get_next_version.outputs.next-version }}
+
+          npm version $NEW_VERSION --no-git-tag-version
+          git config user.name github-actions
+          git config user.email [email protected]
+          git add package.json package-lock.json
+          git commit -m "Bump version from $OLD_VERSION to $NEW_VERSION"
+          git push origin HEAD:main
+
+      - name: Build Package
+        run: npm run build
+
+      - name: Publish package
+        run: npm publish --access public --//registry.npmjs.org/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}
+        if: success()
+
+      - name: Revert package.json and package-lock.json
+        run: |
+          # Revert package.json and package-lock.json to the previous version
+          npm version ${{ env.latest_version }} --no-git-tag-version
+          git commit -am "Revert to version ${{ env.latest_version }}"
+          git push origin HEAD:main
+        if: failure()
+
+      - name: Create GitHub release
+        if: success()
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: v${{ steps.get_next_version.outputs.next-version }}
+          release_name: Release v${{ steps.get_next_version.outputs.next-version }}
+          # body: Release ${{ env.NEW_VERSION }}
+          draft: false
+          prerelease: false

.github/workflows/test-and-build.yml

@@ -0,0 +1,36 @@
+name: Test Suite
+
+on:
+    pull_request:
+      # The branches below must be a subset of the branches above
+      branches: [main]
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Linting
+        run: npm run eslint
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Build
+        run: npm run build

src/lib/inline-images/Avatar.tsx

@@ -12,7 +12,8 @@ const Avatar = (props: AvatarPropType): JSX.Element => {
     nameOnHover,
     onUserClick,
     name,
-    styles = {}
+    styles = {},
+    id
   } = props;
   return (
     <div
@@ -21,6 +22,7 @@ const Avatar = (props: AvatarPropType): JSX.Element => {
       style={{
         cursor: onUserClick && 'pointer'
       }}
+      id={id}
     >
       <img
         src={avatarUrl}

src/lib/inline-images/InlineImages.tsx

@@ -26,15 +26,17 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
             style={{
               left: `${index * (spaceBetweenPics ?? DEFAULT_SPACE_BETWEEN_PICS)}px`
             }}
+            id="inline-images"
           >
             <Avatar
               avatarUrl={user.avatarUrl}
               name={user.name}
               elivateOnHover={elivateOnHover}
               nameOnHover={nameOnHover}
-              onUserClick={onUserClick && ((): void => {
-                onUserClick(user);
-              })}
+              onUserClick={(): void => {
+                if (onUserClick) onUserClick(user);
+              }}
+              id={`inline-image-${index}`}
               styles={styles}
             />
           </div>
@@ -47,6 +49,7 @@ const InlineImages = (props: InlineImagesPropType): JSX.Element => {
               cursor: onUserClick && 'pointer',
               ...getStyles(Elements.ExtraValue, styles)
             }}
+            id="inline-images-extra-value"
           >
             {totalUserCount - data?.length} +
           </div>

src/lib/inline-images/types.d.ts

@@ -3,12 +3,13 @@ export interface AvatarPropType {
   name?: string,
   elivateOnHover?: boolean,
   nameOnHover?: boolean,
-  onUserClick: function,
-  styles?: StyleProp
+  onUserClick?: function,
+  styles?: StyleProp,
+  id?: string
 }
 
 export interface InlineImagesPropType {
-  data: [AvatarPropType],
+  data: AvatarPropType[],
   totalUserCount?: number,
   elivateOnHover?: boolean,
   nameOnHover?: boolean,

src/lib/tests/inlineImages.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+    render,
+    fireEvent,
+    queryByAttribute,
+    queryAllByAttribute
+} from "@testing-library/react";
+import { InlineImagesPropType } from '../inline-images/types';
+import InlineImages from '../inline-images';
+
+const getById = queryByAttribute.bind(null, 'id');
+const getAllById = queryAllByAttribute.bind(null, 'id');
+
+test("If all the users in data is rendered", async () => {
+  const inlineImagesProp: InlineImagesPropType = {
+    data: [{}, {}]
+  };
+  const dom = render(<InlineImages {...inlineImagesProp} />);
+  if (dom) {
+    const images = await getAllById(dom.container, "inline-images");
+    if (images?.length === 0) throw Error("Images Absent");
+    expect(images.length).toBe(2)
+  }
+});
+
+test("If the Onclick is triggered on images",async () => {
+  const inlineImagesProp: InlineImagesPropType = {
+    data: [{}]
+  };
+  const onClick = jest.fn();
+  const dom = render(
+    <InlineImages
+      {...inlineImagesProp}
+      onUserClick={onClick}
+    />
+  );
+
+  if (dom) {
+    const image = await getById(dom.container, "inline-image-0");
+    fireEvent.click(image);
+    expect(onClick).toBeCalled();
+  }
+});
+
+test("If additional count displayed on image stack",async () => {
+  const inlineImagesProp: InlineImagesPropType = {
+    data: [{}, {}],
+    totalUserCount: 10
+  };
+
+  const dom = render(<InlineImages {...inlineImagesProp} />);
+
+  if (dom) {
+    const extraValue = await getById(dom.container, "inline-images-extra-value");
+    expect(extraValue.innerHTML).toBe("8 +");
+  }
+})