feat 1398: Introduction of UI tests into the Configuration UI project

Author: Philipp Duwe

components/inspectit-ocelot-configurationserver-ui/.eslintrc

@@ -2,7 +2,8 @@
     "env": {
         "browser": true,
         "es6": true,
-        "node": true
+        "node": true,
+        "jest": true
     },
     "plugins": [
         "import",

components/inspectit-ocelot-configurationserver-ui/jest.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  collectCoverageFrom: ['**/*.{js,jsx,ts,tsx}', '!**/*.d.ts', '!**/node_modules/**'],
+  moduleNameMapper: {
+    // Handle CSS imports (with CSS modules)
+    // https://jestjs.io/docs/webpack#mocking-css-modules
+    '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+
+    // Handle CSS imports (without CSS modules)
+    '^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
+
+    // Handle image imports
+    // https://jestjs.io/docs/webpack#handling-static-assets
+    '^.+\\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/i': `<rootDir>/__mocks__/fileMock.js`,
+
+    // Handle module aliases
+    '^@/components/(.*)$': '<rootDir>/components/$1',
+  },
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
+  testEnvironment: 'jsdom',
+  transform: {
+    // Use babel-jest to transpile tests with the next/babel preset
+    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
+    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
+  },
+  transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+};

components/inspectit-ocelot-configurationserver-ui/jest.setup.js

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom/extend-expect';
+import { setConfig } from 'next/config';
+import config from './next.config';
+setConfig(config);

components/inspectit-ocelot-configurationserver-ui/next.config.js

@@ -1,42 +1,41 @@
-const withCSS = require('@zeit/next-css')
+const withCSS = require('@zeit/next-css');
 const isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = withCSS({
-    distDir: '../.next',
+  distDir: '../.next',
 
-    // Each page will be exported as a directory
-    exportTrailingSlash: true,
+  // Each page will be exported as a directory
+  exportTrailingSlash: true,
 
-    assetPrefix: isProduction ? '/ui' : '',
+  assetPrefix: isProduction ? '/ui' : '',
 
-    // Will only be available on the server side
-    serverRuntimeConfig: {
-    },
+  // Will only be available on the server side
+  serverRuntimeConfig: {},
 
-    // Will be available on both server and client
-    publicRuntimeConfig: {
-        // used in '/components/basics/Link.js', for more details go to the component itself
-        linkPrefix: isProduction ? '/ui' : ''
-    },
+  // Will be available on both server and client
+  publicRuntimeConfig: {
+    // used in '/components/basics/Link.js', for more details go to the component itself
+    linkPrefix: isProduction ? '/ui' : '',
+  },
 
-    // Required for successfully importing CSS files (e.g. from PrimeReact)
-    // See: https://github.com/zeit/next-plugins/issues/273#issuecomment-430597241
-    webpack: function (config) {
-        config.module.rules.push({
-            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
-            use: {
-                loader: 'url-loader',
-                options: {
-                    limit: 100000,
-                    name: '[name].[ext]'
-                }
-            }
-        })
-        return config
-    },
+  // Required for successfully importing CSS files (e.g. from PrimeReact)
+  // See: https://github.com/zeit/next-plugins/issues/273#issuecomment-430597241
+  webpack: function (config) {
+    config.module.rules.push({
+      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
+      use: {
+        loader: 'url-loader',
+        options: {
+          limit: 100000,
+          name: '[name].[ext]',
+        },
+      },
+    });
+    return config;
+  },
 
-    env: {
-        VERSION: process.env.CIRCLE_TAG || "SNAPSHOT",
-        BUILD_DATE: new Date().toUTCString()
-    }
-})
+  env: {
+    VERSION: process.env.CIRCLE_TAG || 'SNAPSHOT',
+    BUILD_DATE: new Date().toUTCString(),
+  },
+});

components/inspectit-ocelot-configurationserver-ui/package.json

@@ -22,14 +22,23 @@
     "format": "prettier --check \"./src/**/*.+(js|jsx|json|css|md)\"",
     "format:write": "prettier --write \"./src/**/*.+(js|jsx|json|css|md)\"",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.8.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/user-event": "^14.2.0",
     "@zeit/next-css": "^1.0.1",
     "ace-builds": "^1.4.5",
     "axios": "^0.26.1",
+    "babel-jest": "^28.1.0",
     "classnames": "^2.2.6",
     "dateformat": "^3.0.3",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "js-yaml": "^3.13.1",
     "jwt-decode": "^2.2.0",
     "lodash": "^4.17.21",

components/inspectit-ocelot-configurationserver-ui/src/components/views/__tests__/LoginView.test.js

@@ -0,0 +1,80 @@
+import { render, screen, within } from '@testing-library/react';
+import LoginView from '../LoginView';
+import '@testing-library/jest-dom';
+import React from 'react';
+import { storeWrapper } from '../../../lib/reduxTestUtils';
+import { authentication } from '../../../redux/ducks';
+import userEvent from '@testing-library/user-event';
+
+const setup = () => {
+  const reducers = { authentication };
+  return render(storeWrapper(<LoginView />, reducers));
+};
+
+describe('LoginView', () => {
+  //Arrange
+  beforeEach(() => setup());
+
+  it('renders successfully', () => {
+    //Arrange
+    const logo = screen.getByRole('img');
+    const heading1 = screen.getByText('inspectIT Ocelot');
+    const heading2 = screen.getByText('Configuration Server');
+    const username = screen.getByRole('textbox', { placeholder: 'Username' });
+    const password = screen.getByRole('textbox', { placeholder: 'Password' });
+    const loginButton = screen.getByRole('button', { name: 'Login' });
+    const footer = screen.getByText(/inspectit ocelot configuration server/i);
+    const docsLink = within(footer).getByRole('link', { name: 'Docs' });
+    const githubLink = within(footer).getByRole('link', { name: 'Github' });
+
+    //Act - not required
+
+    //Assert
+    expect(logo).toBeInTheDocument();
+    expect(heading1).toBeInTheDocument();
+    expect(heading2).toBeInTheDocument();
+    expect(username).toBeInTheDocument();
+    expect(password).toBeInTheDocument();
+    expect(loginButton).toBeInTheDocument();
+    expect(docsLink).toBeInTheDocument();
+    expect(githubLink).toBeInTheDocument();
+  });
+
+  it('disables the login button when username is missing', async () => {
+    //Arrange
+    const loginButton = screen.getByRole('button', { name: 'Login' });
+    const password = screen.getByPlaceholderText('Password');
+
+    //Act
+    await userEvent.type(password, 'password123');
+
+    //Assert
+    expect(loginButton).toBeDisabled();
+  });
+
+  it('disables the login button when password is missing', async () => {
+    //Arrange
+    const loginButton = screen.getByRole('button', { name: 'Login' });
+    const username = screen.getByPlaceholderText('Username');
+
+    //Act
+    await userEvent.type(username, 'userName');
+
+    //Assert
+    expect(loginButton).toBeDisabled();
+  });
+
+  it('enables the login button when username and password are present', async () => {
+    //Arrange
+    const loginButton = screen.getByRole('button', { name: 'Login' });
+    const username = screen.getByPlaceholderText('Username');
+    const password = screen.getByPlaceholderText('Password');
+
+    //Act
+    await userEvent.type(username, 'userName');
+    await userEvent.type(password, 'password123');
+
+    //Assert
+    expect(loginButton).toBeEnabled();
+  });
+});

components/inspectit-ocelot-configurationserver-ui/src/lib/reduxTestUtils.js

@@ -0,0 +1,21 @@
+import { Provider } from 'react-redux';
+import React from 'react';
+import { configureStore } from '@reduxjs/toolkit';
+
+/**
+ * wrapper function for testing purposes that include a redux store
+ */
+export function storeWrapper(jsx, reducers) {
+  const store = mockStore(reducers);
+  return <Provider store={store}>{jsx}</Provider>;
+}
+
+/**
+ * store configuration function that supplies a store with the provided reducers
+ */
+export function mockStore(reducers) {
+  return configureStore({
+    reducer: reducers,
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: false }),
+  });
+}