-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat 1398: Introduction of UI tests into the Configuration UI project
- Loading branch information
Philipp Duwe
committed
May 31, 2022
1 parent
ae14c5e
commit 0e064c0
Showing
13 changed files
with
6,060 additions
and
6,286 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
components/inspectit-ocelot-configurationserver-ui/jest.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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'], | ||
| }; |
4 changes: 4 additions & 0 deletions
4
components/inspectit-ocelot-configurationserver-ui/jest.setup.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
| import { setConfig } from 'next/config'; | ||
| import config from './next.config'; | ||
| setConfig(config); |
65 changes: 32 additions & 33 deletions
65
components/inspectit-ocelot-configurationserver-ui/next.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(), | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
80 changes: 80 additions & 0 deletions
80
.../inspectit-ocelot-configurationserver-ui/src/components/views/__tests__/LoginView.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
components/inspectit-ocelot-configurationserver-ui/src/lib/reduxTestUtils.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 }), | ||
| }); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 6 additions & 4 deletions
10
components/inspectit-ocelot-configurationserver-ui/src/redux/utils/createReducer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,7 @@ | ||
| /* eslint default-param-last: 0 */ | ||
| export default (initialState) => (reducerMap) => (state = initialState, action) => { | ||
| const reducer = reducerMap[action.type]; | ||
| return reducer ? reducer(state, action) : state; | ||
| }; | ||
| export default (initialState) => | ||
| (reducerMap) => | ||
| (state = initialState, action) => { | ||
| const reducer = reducerMap[action.type]; | ||
| return reducer ? reducer(state, action) : state; | ||
| }; |
Oops, something went wrong.