New: Introduce Jest component testing to the framework (fixes #3417)

.eslintrc.json

@@ -3,7 +3,8 @@
         "browser": true,
         "commonjs": false,
         "es2022": true,
-        "amd": true
+        "amd": true,
+        "jest": true
     },
     "extends": [
         "standard",

__mocks__/core/js/adapt.js

@@ -0,0 +1,18 @@
+export default {
+  course: {
+    get: jest.fn().mockReturnValue(
+      {
+        _components: {
+          _text: {
+            ariaRegion: 'Text Component Aria Text'
+          }
+        },
+        _extensions: {
+          _glossary: {
+            ariaRegion: 'Glossary Extension Aria Text'
+          }
+        }
+      }
+    )
+  }
+};

__mocks__/core/js/device.js

@@ -0,0 +1,12 @@
+const mockDeviceInstance = {
+  isScreenSizeMin: jest.fn().mockReturnValue(true)
+};
+
+const mockIsScreenSizeMinMock = jest.fn().mockReturnValue(true);
+export default {
+  __esModule: true,
+  default: mockDeviceInstance,
+  get isScreenSizeMin() {
+    return mockIsScreenSizeMinMock;
+  }
+};

__mocks__/core/js/logging.js

@@ -0,0 +1 @@
+export default { removed: jest.fn() };

__mocks__/core/js/reactHelpers.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Header from '../../../src/core/adapt-contrib-core/templates/header';
+import { jest } from '@jest/globals';
+
+export const templates = {
+  header: jest.fn((props) => {
+    return <Header {...props} />;
+  })
+};
+
+export const prefixClasses = jest.fn((classNamePrefixes, classNames) => {
+  return classNames.map(className => `${classNamePrefixes}-${className}`).join(' ');
+});
+
+export const compile = jest.fn((template, props) => {
+  return template;
+});

__tests__/header.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import Header from '../src/core/adapt-contrib-core/templates/header';
+import { act } from 'react-dom/test-utils';
+import { afterEach, beforeEach, describe, expect, it, jest } from '@jest/globals';
+import device from 'core/js/device';
+import { unmountComponentAtNode, render } from 'react-dom';
+
+let container = null;
+beforeEach(() => {
+  jest.clearAllMocks();
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container);
+  container.remove();
+  container = null;
+});
+
+describe('Header Component State', () => {
+  it('should display the header body', () => {
+    const body = 'test body text';
+    const props = {
+      body
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    expect(container.textContent).toBe(body);
+  });
+
+  it('should display the header instructions', () => {
+    const instruction = 'test instructions';
+    const props = {
+      instruction
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    expect(container.textContent).toBe(instruction);
+  });
+
+  it('should be able to set the displayTitle', () => {
+    const displayTitle = 'test body text';
+    const props = {
+      displayTitle
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    expect(container.textContent).toBe('');
+  });
+
+  it('should not display a header when there is no body text, display title or sized instruction set', () => {
+    const _id = 'header';
+    const props = {
+      _id
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    expect(container.textContent).toBe('');
+  });
+
+  it('should display the component description when the title, display title or instruction is not specified ' +
+    'and the _isA11yComponentDescriptionEnabled is enabled and the aria region is set', () => {
+    const props = {
+      _isA11yComponentDescriptionEnabled: true,
+      _component: 'text'
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    const ariaRegion = 'Text Component Aria Text';
+    expect(container.textContent).toBe(ariaRegion);
+  });
+
+  it('should display the extension description when the title, display title or instruction is not specified ' +
+    'and the _isA11yComponentDescriptionEnabled is enabled and the aria region is set', () => {
+    const props = {
+      _isA11yComponentDescriptionEnabled: true,
+      _extension: 'glossary'
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    const ariaRegion = 'Glossary Extension Aria Text';
+    expect(container.textContent).toBe(ariaRegion);
+  });
+
+  it('should not display anything when the title, display title or instruction is not specified' +
+  'and the _isA11yComponentDescriptionEnabled is not enabled', () => {
+    const props = {
+      _isA11yComponentDescriptionEnabled: false,
+      _component: 'text'
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    expect(container.textContent).toBe('');
+  });
+
+  it('should display the aria region the component description when the body along with aria region is specified' +
+    'and the _isA11yComponentDescriptionEnabled is enabled', () => {
+    const props = {
+      body: 'Text title',
+      _isA11yComponentDescriptionEnabled: true,
+      _component: 'text'
+    };
+    act(() => {
+      render(<Header {...props} />, container);
+    });
+    const ariaRegion = 'Text Component Aria Text';
+    const body = 'Text title';
+    expect(container.textContent).toContain(ariaRegion);
+    expect(container.textContent).toContain(body);
+  });
+
+  describe('Device screen size rendering', () => {
+    it('should not display the header mobile instructions when the isScreenSizeMin is medium', () => {
+      jest.spyOn(device, 'isScreenSizeMin').mockReturnValue(true);
+      const mobileInstruction = 'mobileInstruction';
+      const props = {
+        mobileInstruction
+      };
+      act(() => {
+        render(<Header {...props} />, container);
+      });
+      expect(container.textContent).toBe('');
+    });
+
+    it('should display the header instructions when the isScreenSizeMin is medium', () => {
+      jest.spyOn(device, 'isScreenSizeMin').mockReturnValue(true);
+      const mobileInstruction = 'mobileInstruction';
+      const instruction = 'instruction';
+      const props = {
+        mobileInstruction,
+        instruction
+      };
+      act(() => {
+        render(<Header {...props} />, container);
+      });
+      expect(container.textContent).toBe(instruction);
+    });
+
+    it('should display the header mobile instructions on small screen devices', () => {
+      jest.spyOn(device, 'isScreenSizeMin').mockReturnValue(false);
+      const mobileInstruction = 'mobileInstruction';
+      const props = {
+        mobileInstruction
+      };
+      act(() => {
+        render(<Header {...props} />, container);
+      });
+      expect(container.textContent).toBe(mobileInstruction);
+    });
+  });
+});

babel.config.js

@@ -0,0 +1,6 @@
+const presets = [
+  ['@babel/preset-env', { targets: { node: 'current' } }],
+  ['@babel/preset-react', { targets: { node: 'current' } }]
+];
+
+module.exports = { presets };

coverage/clover.xml

@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<coverage generated="1680274786710" clover="3.2.0">
+  <project timestamp="1680274786710" name="All files">
+    <metrics statements="85" coveredstatements="83" conditionals="22" coveredconditionals="18" methods="1" coveredmethods="1" elements="108" coveredelements="102" complexity="0" loc="85" ncloc="85" packages="1" files="1" classes="1"/>
+    <file name="header.jsx" path="/Users/eleanorheath/Desktop/Adapt/adapt_framework/src/core/templates/header.jsx">
+      <metrics statements="85" coveredstatements="83" conditionals="22" coveredconditionals="18" methods="1" coveredmethods="1"/>
+      <line num="1" count="1" type="stmt"/>
+      <line num="2" count="1" type="stmt"/>
+      <line num="3" count="1" type="stmt"/>
+      <line num="4" count="1" type="stmt"/>
+      <line num="5" count="1" type="stmt"/>
+      <line num="6" count="1" type="stmt"/>
+      <line num="7" count="1" type="stmt"/>
+      <line num="8" count="1" type="stmt"/>
+      <line num="9" count="1" type="stmt"/>
+      <line num="10" count="1" type="stmt"/>
+      <line num="11" count="1" type="stmt"/>
+      <line num="12" count="1" type="stmt"/>
+      <line num="13" count="1" type="stmt"/>
+      <line num="14" count="1" type="stmt"/>
+      <line num="15" count="1" type="stmt"/>
+      <line num="16" count="1" type="stmt"/>
+      <line num="17" count="1" type="stmt"/>
+      <line num="18" count="1" type="cond" truecount="1" falsecount="0"/>
+      <line num="19" count="8" type="stmt"/>
+      <line num="20" count="8" type="stmt"/>
+      <line num="21" count="8" type="stmt"/>
+      <line num="22" count="8" type="stmt"/>
+      <line num="23" count="8" type="stmt"/>
+      <line num="24" count="8" type="stmt"/>
+      <line num="25" count="8" type="stmt"/>
+      <line num="26" count="8" type="stmt"/>
+      <line num="27" count="8" type="stmt"/>
+      <line num="28" count="8" type="stmt"/>
+      <line num="29" count="8" type="stmt"/>
+      <line num="30" count="8" type="stmt"/>
+      <line num="31" count="8" type="stmt"/>
+      <line num="32" count="8" type="cond" truecount="0" falsecount="1"/>
+      <line num="33" count="8" type="cond" truecount="1" falsecount="0"/>
+      <line num="34" count="8" type="cond" truecount="0" falsecount="1"/>
+      <line num="35" count="8" type="stmt"/>
+      <line num="36" count="8" type="stmt"/>
+      <line num="37" count="8" type="cond" truecount="2" falsecount="0"/>
+      <line num="38" count="8" type="cond" truecount="1" falsecount="0"/>
+      <line num="39" count="8" type="stmt"/>
+      <line num="40" count="8" type="stmt"/>
+      <line num="41" count="8" type="cond" truecount="2" falsecount="0"/>
+      <line num="42" count="8" type="cond" truecount="0" falsecount="1"/>
+      <line num="43" count="8" type="cond" truecount="1" falsecount="0"/>
+      <line num="44" count="8" type="cond" truecount="3" falsecount="0"/>
+      <line num="45" count="1" type="stmt"/>
+      <line num="46" count="1" type="stmt"/>
+      <line num="47" count="1" type="stmt"/>
+      <line num="48" count="1" type="stmt"/>
+      <line num="49" count="1" type="stmt"/>
+      <line num="50" count="1" type="stmt"/>
+      <line num="51" count="1" type="cond" truecount="1" falsecount="0"/>
+      <line num="52" count="8" type="cond" truecount="2" falsecount="0"/>
+      <line num="53" count="4" type="stmt"/>
+      <line num="54" count="4" type="stmt"/>
+      <line num="55" count="4" type="stmt"/>
+      <line num="56" count="4" type="cond" truecount="0" falsecount="1"/>
+      <line num="57" count="0" type="stmt"/>
+      <line num="58" count="0" type="stmt"/>
+      <line num="59" count="8" type="stmt"/>
+      <line num="60" count="8" type="stmt"/>
+      <line num="61" count="8" type="stmt"/>
+      <line num="62" count="8" type="cond" truecount="2" falsecount="0"/>
+      <line num="63" count="1" type="stmt"/>
+      <line num="64" count="8" type="stmt"/>
+      <line num="65" count="8" type="stmt"/>
+      <line num="66" count="8" type="stmt"/>
+      <line num="67" count="8" type="cond" truecount="1" falsecount="0"/>
+      <line num="68" count="2" type="stmt"/>
+      <line num="69" count="2" type="stmt"/>
+      <line num="70" count="2" type="stmt"/>
+      <line num="71" count="8" type="stmt"/>
+      <line num="72" count="8" type="stmt"/>
+      <line num="73" count="8" type="stmt"/>
+      <line num="74" count="8" type="cond" truecount="1" falsecount="0"/>
+      <line num="75" count="2" type="stmt"/>
+      <line num="76" count="2" type="stmt"/>
+      <line num="77" count="2" type="stmt"/>
+      <line num="78" count="2" type="stmt"/>
+      <line num="79" count="8" type="stmt"/>
+      <line num="80" count="8" type="stmt"/>
+      <line num="81" count="8" type="stmt"/>
+      <line num="82" count="8" type="stmt"/>
+      <line num="83" count="8" type="stmt"/>
+      <line num="84" count="8" type="stmt"/>
+      <line num="85" count="8" type="stmt"/>
+    </file>
+  </project>
+</coverage>