Feat/tests

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+name: Chromatic
+on:
+  push:
+    branches:
+      - develop
+  release:
+    types: [created]
+jobs:
+  chromatic:
+    name: Publish Storybook on chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Install dependencies
+        run: yarn && yarn add @mui/material @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/main.yml

@@ -1,5 +1,13 @@
 name: CI
-on: [push]
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
 jobs:
   build:
     name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
@@ -19,14 +27,14 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
+      - name: Install
+        run: yarn install && yarn add reflect-metadata
 
       - name: Lint
         run: yarn lint
 
-      # - name: Test
-      #   run: yarn test --ci --coverage --maxWorkers=2
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
 
       - name: Build
         run: yarn build

.github/workflows/publish.yml

@@ -22,6 +22,9 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Test
+        run: yarn test --ci --coverage --maxWorkers=2
+
       - name: Generate build
         run: npm run build
 

.storybook/main.js

@@ -4,5 +4,12 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-postcss',
+    '@storybook/addon-interactions',
   ],
+  refs: {
+    'chromatic-published-Storybook': {
+      title: 'Componentz',
+      url: 'https://chromatic.com/library?appId=61a3dfbf9c186c003a9e79f1&branch=develop',
+    },
+  },
 };

LICENSE

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

jest.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   moduleDirectories: ['node_modules', 'src'],
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'node'],
-  roots: ['tests'],
+  testPathIgnorePatterns: ['/node_modules/', '/dist/'],
+  setupFilesAfterEnv: ['<rootDir>/src/tests/setupTests.ts'],
   testEnvironment: 'jest-environment-jsdom', // Use browser-like testing environment
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[tj]s?(x)'],
-  testPathIgnorePatterns: ['\\\\node_modules\\\\'],
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest', // That one tells Jest to use ts-jest when dealing with TypeScript files
   },

package.json

@@ -26,7 +26,8 @@
     "lint": "tsc --project ./tsconfig.json && eslint src -c .eslintrc.json --ext tsx,ts",
     "test": "jest",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -44,9 +45,14 @@
     "@rollup/plugin-typescript": "^8.3.0",
     "@storybook/addon-actions": "^6.4.0",
     "@storybook/addon-essentials": "^6.4.0",
+    "@storybook/addon-interactions": "^6.4.0",
     "@storybook/addon-links": "^6.4.0",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/jest": "^0.0.5",
     "@storybook/react": "^6.4.0",
+    "@storybook/testing-library": "^0.0.7",
+    "@testing-library/dom": "^8.11.1",
+    "@testing-library/jest-dom": "^5.15.1",
     "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",
@@ -56,12 +62,14 @@
     "@typescript-eslint/parser": "^5.4.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
+    "chromatic": "^6.0.6",
     "eslint": "^8.3.0",
     "eslint-plugin-react": "^7.27.1",
     "husky": "^7.0.4",
     "inversify": "^6.0.1",
     "inversify-react": "^1.0.0",
     "jest": "^27.3.1",
+    "jest-dom": "^4.0.0",
     "mobx": "^6.3.7",
     "mobx-react-lite": "^3.2.2",
     "postcss": "^8.4.0",

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,75 @@
+import 'reflect-metadata';
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { globalContainer } from 'index';
+import { Provider } from 'inversify-react';
+import { BreadcrumbsContainer } from '../../tests/fixtures/BreadcrumbFixtures';
+
+describe('Breadcrumbs', () => {
+  let onClickSpy: jest.Mock;
+
+  beforeEach(() => {
+    onClickSpy = jest.fn();
+  });
+
+  it('should renders correctly', async () => {
+    const paths = [
+      {
+        label: 'Home',
+      },
+      {
+        label: 'About',
+      },
+    ];
+
+    render(
+      <Provider container={globalContainer}>
+        <BreadcrumbsContainer newPaths={paths} />
+      </Provider>
+    );
+
+    expect(await screen.findByText(/Home/i)).not.toBeNull();
+  });
+
+  it('should call onClick function when the user clicks', async () => {
+    const paths = [
+      {
+        label: 'Home',
+        onClick: onClickSpy,
+      },
+      {
+        label: 'About',
+      },
+    ];
+
+    render(
+      <Provider container={globalContainer}>
+        <BreadcrumbsContainer newPaths={paths} />
+      </Provider>
+    );
+    (await screen.findByText(/Home/i)).click();
+    expect(onClickSpy).toHaveBeenCalled();
+  });
+
+  it('should disable last path', async () => {
+    const paths = [
+      {
+        label: 'Home',
+      },
+      {
+        label: 'About',
+        onClick: onClickSpy,
+      },
+    ];
+
+    render(
+      <Provider container={globalContainer}>
+        <BreadcrumbsContainer newPaths={paths} />
+      </Provider>
+    );
+
+    (await screen.findByText(/About/i)).click();
+    expect(onClickSpy).not.toHaveBeenCalled();
+  });
+});

src/components/Breadcrumbs/index.tsx

@@ -24,7 +24,7 @@ function Breadcrumbs(props: BreadcrumbsProps) {
     <MuiBreadcrumbs {...props}>
       {uiStore.breadcrumb.linkedPaths.map((path) => (
         <Link
-          key={path.link}
+          key={path.label}
           underline="hover"
           color="inherit"
           href={path.link}

src/components/Dialog/Dialog.test.tsx

@@ -0,0 +1,91 @@
+import 'reflect-metadata';
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { globalContainer } from 'index';
+import { Provider } from 'inversify-react';
+import { DialogContainer } from '../../tests/fixtures/DialogFixtures';
+
+describe('Dialog', () => {
+  let onRejectSpy: jest.Mock;
+  let onAcceptSpy: jest.Mock;
+
+  beforeEach(() => {
+    onAcceptSpy = jest.fn();
+    onRejectSpy = jest.fn();
+  });
+
+  it('should renders correctly', async () => {
+    const content = {
+      title: 'Test title',
+      onReject: onRejectSpy,
+      onAccept: onAcceptSpy,
+      content: 'Test content',
+    };
+
+    render(
+      <Provider container={globalContainer}>
+        <DialogContainer newContent={content} />
+      </Provider>
+    );
+
+    expect(await screen.findByText(/Test content/i)).not.toBeNull();
+  });
+
+  it('should call onAccept function when the user clicks', async () => {
+    const content = {
+      title: 'Test title',
+      onReject: onRejectSpy,
+      onAccept: onAcceptSpy,
+      content: 'Test content',
+    };
+
+    render(
+      <Provider container={globalContainer}>
+        <DialogContainer
+          newContent={content}
+          props={{ confirmLabel: 'Confirm', cancelLabel: 'Cancel' }}
+        />
+      </Provider>
+    );
+    (await screen.findByText(/Confirm/i)).click();
+    expect(onAcceptSpy).toHaveBeenCalled();
+  });
+
+  it('should call onReject function when the user clicks', async () => {
+    const content = {
+      title: 'Test title',
+      onReject: onRejectSpy,
+      onAccept: onAcceptSpy,
+      content: 'Test content',
+    };
+
+    render(
+      <Provider container={globalContainer}>
+        <DialogContainer
+          newContent={content}
+          props={{ confirmLabel: 'Confirm', cancelLabel: 'Cancel' }}
+        />
+      </Provider>
+    );
+    (await screen.findByText(/Cancel/i)).click();
+    expect(onRejectSpy).toHaveBeenCalled();
+  });
+
+  it('should render a JSX as content', () => {
+    const content = {
+      title: 'Test title',
+      onReject: onRejectSpy,
+      onAccept: onAcceptSpy,
+      content: <div>Test content</div>,
+    };
+
+    render(
+      <Provider container={globalContainer}>
+        <DialogContainer newContent={content} />
+      </Provider>
+    );
+
+    expect(screen.getByText(/Test content/i)).not.toBeNull();
+  });
+});