chore: Updated testcases

bhushan-ebi · bhushan-ebi · commit f6ba52d5ae5a · 2025-03-18T05:58:49.000Z
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-env", {
+      "targets": {
+        "node": "current"
+      }
+    }],
+    "@babel/preset-react"
+  ]
+}
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,28 +1,53 @@
-name: Deployment
+name: CI/CD Pipeline
 on:
   push:
     branches:
       - master
+  pull_request:
+    branches:
+      - master
+
 env:
-  CI: false
+  CI: true
+
 jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16.x]
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        run: npm run test:ci
+
   deploy:
+    needs: test
     runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/master'
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [16.x]
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: Install Packages
-      run: npm install
-    - name: Build page
-      run: npm run build
-    - name: Deploy to gh-pages
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-        publish_dir: ./build
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - name: Install Packages
+        run: npm ci
+      - name: Build page
+        run: npm run build
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
+          publish_dir: ./build
diff --git a/__mocks__/@visual-framework/vf-button/vf-button.react.js b/__mocks__/@visual-framework/vf-button/vf-button.react.js
@@ -0,0 +1,5 @@
+const React = require('react');
+
+exports.VfButton = ({ children, ...props }) => {
+  return React.createElement('button', { 'data-testid': 'vf-button' }, 'Mock VF Button');
+};
diff --git a/__mocks__/@visual-framework/vf-card/vf-card.react.js b/__mocks__/@visual-framework/vf-card/vf-card.react.js
@@ -0,0 +1,5 @@
+const React = require('react');
+
+exports.VfCard = ({ card_title, variant, newTheme, card_image, card_text, card_image__alt }) => {
+  return React.createElement('div', { 'data-testid': 'vf-card' }, 'Mock VF Card');
+};
diff --git a/__mocks__/fileMock.js b/__mocks__/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {targets: {node: 'current'}}],
+    '@babel/preset-react'
+  ]
+};
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,14 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!(@visual-framework)/.*)'
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|svg|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less|scss|sass)$': '<rootDir>/__mocks__/styleMock.js'
+  }
+};
diff --git a/jest.setup.js b/jest.setup.js
@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+global.window = {};
diff --git a/package.json b/package.json
@@ -14,11 +14,15 @@
     "predeploy": "gulp build",
     "deploy": "gh-pages -d build",
     "build": "gulp build",
-    "test": "react-scripts test",
+    "test": "jest --config jest.config.js",
+    "test:ci": "jest --config jest.config.js --ci --watchAll=false",
+    "test:watch": "jest --config jest.config.js --watch",
     "eject": "react-scripts eject",
-    "update-components": "yarn upgrade-interactive --latest"
+    "update-components": "npm update"
   },
   "dependencies": {
+    "@testing-library/jest-dom": "^5",
+    "@testing-library/react": "^12",
     "@visual-framework/embl-grid": "2.1.2",
     "@visual-framework/vf-banner": "1.9.0",
     "@visual-framework/vf-body": "1.2.0",
@@ -62,6 +66,7 @@
     "@visual-framework/vf-text": "1.0.2",
     "@visual-framework/vf-u-fullbleed": "1.2.2",
     "@visual-framework/vf-utility-classes": "2.0.0",
+    "babel-jest": "27.5.1",
     "gh-pages": "3.2.3",
     "gulp": "4.0.2",
     "gulp-autoprefixer": "8.0.0",
@@ -76,6 +81,8 @@
     "gulp-stylelint": "13.0.0",
     "gulp-svgmin": "4.0.1",
     "gulp-watch": "5.0.1",
+    "jest": "27.5.1",
+    "jest-environment-jsdom": "27.5.1",
     "list-stream": "2.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -97,5 +104,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3"
   }
 }
diff --git a/src/Home.test.js b/src/Home.test.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Home from './Home';
+
+// Mock the VF components
+jest.mock('@visual-framework/vf-card/vf-card.react.js', () => ({
+  VfCard: () => <div data-testid="mock-vf-card">Mock Card</div>
+}));
+
+jest.mock('@visual-framework/vf-button/vf-button.react.js', () => ({
+  VfButton: () => <div data-testid="mock-vf-button">Mock Button</div>
+}));
+
+// Mock the VfIntro component
+jest.mock('./component-templates/vf-intro', () => ({
+  __esModule: true,
+  default: ({ name }) => <div data-testid="mock-vf-intro">{name}</div>
+}));
+
+describe('Home component', () => {
+  const renderWithRouter = (component) => {
+    return render(
+      <MemoryRouter>
+        {component}
+      </MemoryRouter>
+    );
+  };
+
+  it('renders without crashing', () => {
+    renderWithRouter(<Home />);
+  });
+
+  it('renders VfIntro with correct props', () => {
+    renderWithRouter(<Home />);
+    const intro = screen.getByTestId('mock-vf-intro');
+    expect(intro).toHaveTextContent('React for the VF 2.0');
+  });
+
+  it('renders two VfCard components', () => {
+    renderWithRouter(<Home />);
+    const cards = screen.getAllByTestId('mock-vf-card');
+    expect(cards).toHaveLength(2);
+  });
+
+  it('renders the quickstart section', () => {
+    renderWithRouter(<Home />);
+    expect(screen.getByText('Quickstart')).toBeInTheDocument();
+    expect(screen.getByText(/npm init @visual-framework\/vf-react/)).toBeInTheDocument();
+  });
+
+  it('renders the component installation instructions', () => {
+    renderWithRouter(<Home />);
+    expect(screen.getByText('Component installation')).toBeInTheDocument();
+    expect(screen.getByText(/yarn add @visual-framework\/vf-logo/)).toBeInTheDocument();
+  });
+
+  it('renders the manual installation section', () => {
+    renderWithRouter(<Home />);
+    expect(screen.getByText('Manual installation for customisation')).toBeInTheDocument();
+    expect(screen.getByText('Download a pattern')).toBeInTheDocument();
+  });
+});
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+import '@testing-library/jest-dom/extend-expect';`
	`2`	`+global.window = {};`