Add theforeman github actions for JS tests

.github/workflows/js_tests.yml

@@ -9,20 +9,14 @@ on:
       - 'package.json'
       - 'package-lock.json'
       - '.github/workflows/js_tests.yml'
+
+concurrency:
+  group: ${{ github.ref_name }}-${{ github.workflow }}
+  cancel-in-progress: true
+
 jobs:
-  test_js:
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        node-version: [12, 14]
-    steps:
-      - uses: actions/checkout@v2
-      - name: Setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node-version }}
-      - name: Npm install
-        run: npm install
-      - name: Run plugin linter
-        run: npm run lint
+  test:
+    name: JavaScript
+    uses: theforeman/actions/.github/workflows/foreman_plugin_js.yml@v0
+    with:
+      plugin: foreman_resource_quota

jest.config.js

@@ -1,35 +1,30 @@
-const { foremanLocation, foremanRelativePath } = require('@theforeman/find-foreman')
+const tfmConfig = require('@theforeman/test/src/pluginConfig');
+const {
+  foremanRelativePath,
+  foremanLocation,
+} = require('@theforeman/find-foreman');
+
 const foremanReactRelative = 'webpack/assets/javascripts/react_app';
 const foremanFull = foremanLocation();
 const foremanReactFull = foremanRelativePath(foremanReactRelative);
 
-// Jest configuration
-module.exports = {
-  testURL: 'http://localhost/',
-  setupFiles: [
-    './webpack/test_setup.js',
-  ],
-  setupFilesAfterEnv: [
-    './webpack/global_test_setup.js',
-    '@testing-library/jest-dom'
-  ],
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '<rootDir>/foreman/',
-    '<rootDir>/.+fixtures.+',
-    '<rootDir>/engines',
-  ],
-  moduleDirectories: [
-    `${foremanFull}/node_modules`,
-    `${foremanFull}/node_modules/@theforeman/vendor-core/node_modules`,
-    'node_modules',
-    'webpack/test-utils',
-  ],
-  modulePathIgnorePatterns: [
-    '<rootDir>/foreman/',
-  ],
-  moduleNameMapper: {
-    '^.+\\.(css|scss)$': 'identity-obj-proxy',
-    '^foremanReact(.*)$': `${foremanReactFull}/$1`,
-  },
-};
+// Find correct path to foremanReact so we do not have to mock it in tests
+tfmConfig.moduleNameMapper['^foremanReact(.*)$'] = `${foremanReactFull}/$1`;
+
+tfmConfig.setupFiles = ['./webpack/test_setup.js'];
+tfmConfig.setupFilesAfterEnv = [
+  './webpack/global_test_setup.js',
+  '@testing-library/jest-dom',
+];
+
+// Do not use default resolver
+tfmConfig.resolver = null;
+// Specify module dirs instead
+tfmConfig.moduleDirectories = [
+  `${foremanFull}/node_modules`,
+  `${foremanFull}/node_modules/@theforeman/vendor-core/node_modules`,
+  'node_modules',
+  'webpack/test-utils',
+];
+
+module.exports = tfmConfig;

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "tfm-lint --plugin -d /webpack",
-    "test": "tfm-test --config jest.config.js",
+    "test": "tfm-test --plugin --config jest.config.js",
     "test:watch": "tfm-test --plugin --watchAll",
     "test:current": "tfm-test --plugin --watch",
     "publish-coverage": "tfm-publish-coverage",

webpack/components/ResourceQuotaForm/components/Properties/StatusPropertiesLabel.test.js

@@ -0,0 +1,50 @@
+/* eslint-disable promise/prefer-await-to-then */
+// Configure Enzyme
+import { mount } from '@theforeman/test';
+import React from 'react';
+import { Provider } from 'react-redux';
+import store from 'foremanReact/redux';
+import LabelIcon from 'foremanReact/components/common/LabelIcon';
+import StatusPropertiesLabel from './StatusPropertiesLabel';
+
+const defaultProps = {
+  color: 'blue',
+  iconChild: <LabelIcon text="test" />,
+  statusContent: 'some content',
+  linkUrl: '/test/link',
+  tooltipText: 'Some nice tooltip',
+};
+
+describe('StatusPropertiesLabel', () => {
+  const wrapper = mount(
+    <Provider store={store}>
+      <StatusPropertiesLabel {...defaultProps} />
+    </Provider>
+  );
+
+  it('includes components', () => {
+    expect(wrapper.find('Tooltip').exists()).toBe(true);
+    expect(wrapper.find('Tooltip')).toHaveLength(1);
+    expect(wrapper.find('Label').exists()).toBe(true);
+    expect(wrapper.find('Label')).toHaveLength(1);
+    expect(wrapper.find('Link').exists()).toBe(true);
+    expect(wrapper.find('Link')).toHaveLength(1);
+  });
+
+  it('passes properties', () => {
+    // ToolTip
+    const tooltip = wrapper.find('Tooltip');
+    expect(tooltip.props()).toHaveProperty('content');
+    expect(tooltip.prop('content')).toContain(defaultProps.tooltipText);
+    // Label
+    const label = wrapper.find('Label');
+    expect(label.props()).toHaveProperty('icon');
+    expect(label.prop('icon')).toEqual(defaultProps.iconChild);
+    expect(label.props()).toHaveProperty('color');
+    expect(label.prop('color')).toEqual(defaultProps.color);
+    // Link
+    const link = wrapper.find('Link');
+    expect(link.props()).toHaveProperty('to');
+    expect(link.prop('to')).toEqual(defaultProps.linkUrl);
+  });
+});

webpack/lib/EditableTextInput/EditableTextInput.js

@@ -58,16 +58,14 @@ const EditableTextInput = ({
       setCurrentAttribute(attribute);
   };
 
-  const onSubmit = async event => {
-    if (!event.shiftKey) {
-      setEditing(false);
-      if (isPassword) {
-        if (inputValue?.length > 0) {
-          setPasswordPlaceholder(PASSWORD_MASK);
-        }
+  const onSubmit = async () => {
+    setEditing(false);
+    if (isPassword) {
+      if (inputValue?.length > 0) {
+        setPasswordPlaceholder(PASSWORD_MASK);
       }
-      await onEdit(inputValue, attribute);
     }
+    await onEdit(inputValue, attribute);
   };
 
   const onClear = () => {

webpack/lib/EditableTextInput/__tests__/editableTextInput.test.js

@@ -5,7 +5,7 @@ import {
   render,
   patientlyWaitFor,
   fireEvent,
-} from './react-testing-lib-wrapper';
+} from '../../react-testing-lib-wrapper';
 import EditableTextInput from '../EditableTextInput';
 
 const actualValue = 'burger';
@@ -38,15 +38,14 @@ test('Passed function is called after editing and hitting enter', async () => {
   );
 
   getByLabelText(`edit ${attribute}`).click();
-  const textInputLabel = `${attribute} text input`;
-  fireEvent.change(getByLabelText(textInputLabel), {
+  const textInputLabel = getByLabelText(`${attribute} text input`);
+  fireEvent.change(textInputLabel, {
     target: { value: actualValue },
   });
-  fireEvent.keyUp(getByLabelText(textInputLabel), {
+  fireEvent.keyUp(textInputLabel, {
     key: 'Enter',
     code: 'Enter',
   });
-
   await patientlyWaitFor(() => expect(mockEdit.mock.calls).toHaveLength(1));
   expect(head(mockEdit.mock.calls)).toContain(actualValue); // first arg
 });