PR-722301: Adding Input and List Components testing.

.github/workflows/npm-publish.yml

@@ -38,6 +38,12 @@ jobs:
           node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: npm ci --legacy-peer-deps
+      - run: npm run build
+        env:
+          LIBRARY_NAME: "@aleleba/ro-ut-ui"
+          EXTERNAL_CSS: "true"
       - run: npm publish --access=public
         env:
+          LIBRARY_NAME: "@aleleba/ro-ut-ui"
+          EXTERNAL_CSS: "true"
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/npm-test.yml

@@ -44,4 +44,7 @@ jobs:
           node-version: 16
           registry-url: https://registry.npmjs.org/
       - run: npm ci --legacy-peer-deps
-      - run: npm run build
+      - run: npm run build
+        env:
+          LIBRARY_NAME: "@aleleba/ro-ut-ui"
+          EXTERNAL_CSS: "true"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-list-ui-library",
   "version": "1.0.0",
-  "description": "A starter kit for create a React component Library with storybook",
+  "description": "A Library with storybook for a list app",
   "main": "dist/index.js",
   "scripts": {
     "start": "npm run storybook",
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/aleleba/create-react-component-library.git"
+    "url": "git+https://github.com/aleleba/react-list-ui-library.git"
   },
   "keywords": [
     "create",

src/components/Input/__tests__/Input.test.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Input } from '@components';
+
+describe('Testing Input Component', () => {
+  beforeEach(() => {
+    cy.mount(<Input placeholder='Test Placeholder' />);
+  });
+  it('Show right text on placeholder', () => {
+    cy.get('input').should('have.attr', 'placeholder', 'Test Placeholder');
+  });
+})

src/components/Input/__tests__/Input.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Input } from '@components';
+
+describe('Testing Input Component', () => {
+    beforeEach(() => {
+        // fetchMock.resetMocks();
+        render(<Input placeholder='Test Placeholder'/>)
+    });
+    it('Show right text on placeholder', async () => {
+        /* fetchMock.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        })); */
+        const input = screen.getByPlaceholderText('Test Placeholder');
+        expect(input).toBeInTheDocument();
+    })
+})

src/components/List/__tests__/List.test.cy.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { List, Status } from '@components';
+
+describe('Testing List Component', () => {
+  beforeEach(() => {
+    cy.mount(<List list={[
+      {
+        name: 'First Item',
+        status: Status.DONE
+      },
+      {
+        name: 'Second Item',
+        status: Status.TODO
+      },
+      {
+        name: 'Third Item',
+        status: Status.DONE
+      }
+    ]} />);
+  })
+  it('Show All Items in a list', () => {
+    cy.get('input').should('have.length', 3);
+  })
+})

src/components/List/__tests__/List.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { List, Status } from '@components';
+
+describe('Testing List Component', () => {
+    beforeEach(() => {
+        // fetchMock.resetMocks();
+        render(<List list={[
+            {
+              name: 'First Item',
+              status: Status.DONE
+            },
+            {
+              name: 'Second Item',
+              status: Status.TODO
+            },
+            {
+              name: 'Third Item',
+              status: Status.DONE
+            }
+        ]} />)
+    });
+    it('Show All Items in a list', async () => {
+        /* fetchMock.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        })); */
+        const items = screen.getAllByRole('checkbox');
+        expect(items).toHaveLength(3);
+    })
+})