@shopgate/webpack 7.32.2-alpha.9 → 7.33.0-beta.2

package/lib/createTypeCheckParser.js

@@ -0,0 +1,67 @@
+const ERROR_IN_FILE = /^(.+?)\((\d+),(\d+)\): error (TS\d+): (.*)$/;
+const ERROR_WITHOUT_FILE = /^error (TS\d+): (.*)$/;
+const CHECK_STARTED = /Starting (incremental )?compilation/;
+const CHECK_FINISHED = /Found \d+ errors?\. Watching for file changes/;
+
+/**
+ * @typedef {Object} TypeCheckError
+ * @property {string|null} file The file as the compiler printed it, relative to the project.
+ * @property {number|null} line The line of the error.
+ * @property {number|null} column The column of the error.
+ * @property {string} code The error code, e.g. "TS2322".
+ * @property {string} message The error message.
+ */
+
+/**
+ * @typedef {Object} TypeCheckEvent
+ * @property {'started'|'finished'} type Whether a check started or finished.
+ * @property {TypeCheckError[]} [errors] The errors of a finished check.
+ */
+
+/**
+ * Creates a parser for the output of "tsc --watch --pretty false". It takes the output line by
+ * line and returns an event when a check starts or finishes.
+ * @return {function(string): TypeCheckEvent|null}
+ */
+module.exports = function createTypeCheckParser() {
+  let errors = [];
+
+  return (line) => {
+    if (CHECK_STARTED.test(line)) {
+      errors = [];
+      return { type: 'started' };
+    }
+
+    if (CHECK_FINISHED.test(line)) {
+      return {
+        type: 'finished',
+        errors,
+      };
+    }
+
+    const inFile = line.match(ERROR_IN_FILE);
+    const withoutFile = line.match(ERROR_WITHOUT_FILE);
+
+    if (inFile) {
+      errors.push({
+        file: inFile[1],
+        line: Number(inFile[2]),
+        column: Number(inFile[3]),
+        code: inFile[4],
+        message: inFile[5],
+      });
+    } else if (withoutFile) {
+      errors.push({
+        file: null,
+        line: null,
+        column: null,
+        code: withoutFile[1],
+        message: withoutFile[2],
+      });
+    } else if (/^\s+\S/.test(line) && errors.length > 0) {
+      errors[errors.length - 1].message += `\n${line}`;
+    }
+
+    return null;
+  };
+};

package/lib/createTypeCheckParser.spec.js

@@ -0,0 +1,76 @@
+const createTypeCheckParser = require('./createTypeCheckParser');
+
+/**
+ * Feeds lines to a new parser and returns the events it emits.
+ * @param {string[]} lines The compiler output.
+ * @return {Object[]}
+ */
+const parseLines = (lines) => {
+  const parse = createTypeCheckParser();
+
+  return lines.map(line => parse(line)).filter(Boolean);
+};
+
+describe('createTypeCheckParser', () => {
+  it('reports the start and the errors of a check', () => {
+    expect(parseLines([
+      '2:36:55 PM - Starting compilation in watch mode...',
+      '',
+      "portals/Banner/index.tsx(33,68): error TS2322: Type 'false' is not assignable to type 'true'.",
+      'error TS6053: File not found.',
+      '',
+      '2:36:58 PM - Found 2 errors. Watching for file changes.',
+    ])).toEqual([
+      { type: 'started' },
+      {
+        type: 'finished',
+        errors: [
+          {
+            file: 'portals/Banner/index.tsx',
+            line: 33,
+            column: 68,
+            code: 'TS2322',
+            message: "Type 'false' is not assignable to type 'true'.",
+          },
+          {
+            file: null,
+            line: null,
+            column: null,
+            code: 'TS6053',
+            message: 'File not found.',
+          },
+        ],
+      },
+    ]);
+  });
+
+  it('adds indented lines to the message of the error before', () => {
+    const [, finished] = parseLines([
+      '02:36:48 PM - Starting compilation in watch mode...',
+      "a.ts(1,14): error TS2345: Argument of type 'A' is not assignable to parameter of type 'B'.",
+      "  Property 'id' is missing in type 'A'.",
+      '02:36:49 PM - Found 1 error. Watching for file changes.',
+    ]);
+
+    expect(finished.errors).toHaveLength(1);
+    expect(finished.errors[0].message).toBe([
+      "Argument of type 'A' is not assignable to parameter of type 'B'.",
+      "  Property 'id' is missing in type 'A'.",
+    ].join('\n'));
+  });
+
+  it('forgets the errors of the check before when a new one starts', () => {
+    const events = parseLines([
+      '2:36:55 PM - Starting compilation in watch mode...',
+      "a.ts(1,14): error TS2322: Type 'string' is not assignable to type 'number'.",
+      '2:36:58 PM - Found 1 error. Watching for file changes.',
+      '2:37:10 PM - File change detected. Starting incremental compilation...',
+      '2:37:11 PM - Found 0 errors. Watching for file changes.',
+    ]);
+
+    expect(events[3]).toEqual({
+      type: 'finished',
+      errors: [],
+    });
+  });
+});

package/lib/getTypeCheckProjects.js

@@ -0,0 +1,55 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * @typedef {Object} TypeCheckProject
+ * @property {string} name The name that is shown in front of the output of the project.
+ * @property {string} path The folder that contains the tsconfig.json of the project.
+ * @property {boolean} isTheme Whether the project is the theme.
+ * @property {string|null} tsc The TypeScript compiler of the project, when it has one installed.
+ */
+
+/**
+ * Resolves the TypeScript compiler that a project has installed.
+ * @param {string} projectPath The folder of the project.
+ * @return {string|null}
+ */
+function resolveCompiler(projectPath) {
+  try {
+    const packagePath = require.resolve('typescript/package.json', { paths: [projectPath] });
+    // eslint-disable-next-line global-require, import/no-dynamic-require
+    const { bin } = require(packagePath);
+
+    return path.resolve(path.dirname(packagePath), bin.tsc);
+  } catch (error) {
+    return null;
+  }
+}
+
+/**
+ * Returns the theme and the frontends of the attached extensions that have a tsconfig.json.
+ * @param {string} themePath The folder of the theme.
+ * @param {Object} [extensions={}] The attached extensions.
+ * @return {TypeCheckProject[]}
+ */
+module.exports = function getTypeCheckProjects(themePath, extensions = {}) {
+  const extensionsPath = path.resolve(themePath, '..', '..', 'extensions');
+
+  return [
+    {
+      name: path.basename(themePath),
+      path: themePath,
+      isTheme: true,
+    },
+    ...Object.keys(extensions).map(id => ({
+      name: id,
+      path: path.resolve(extensionsPath, extensions[id].path, 'frontend'),
+      isTheme: false,
+    })),
+  ]
+    .filter(project => fs.existsSync(path.join(project.path, 'tsconfig.json')))
+    .map(project => ({
+      ...project,
+      tsc: resolveCompiler(project.path),
+    }));
+};

package/lib/getTypeCheckProjects.spec.js

@@ -0,0 +1,83 @@
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const getTypeCheckProjects = require('./getTypeCheckProjects');
+
+describe('getTypeCheckProjects', () => {
+  let root;
+  let themePath;
+
+  const write = (file, content = '{}') => {
+    const target = path.join(root, file);
+    fs.mkdirSync(path.dirname(target), { recursive: true });
+    fs.writeFileSync(target, content);
+  };
+
+  beforeEach(() => {
+    root = fs.realpathSync(fs.mkdtempSync(path.join(os.tmpdir(), 'type-check-')));
+    themePath = path.join(root, 'themes', 'theme-test');
+    fs.mkdirSync(themePath, { recursive: true });
+  });
+
+  afterEach(() => {
+    fs.rmSync(root, {
+      recursive: true,
+      force: true,
+    });
+  });
+
+  it('returns the theme and the attached extensions that have a tsconfig', () => {
+    write('themes/theme-test/tsconfig.json');
+    write('extensions/typed/frontend/tsconfig.json');
+    write('extensions/untyped/frontend/index.js', '');
+    write('extensions/detached/frontend/tsconfig.json');
+
+    const projects = getTypeCheckProjects(themePath, {
+      '@acme/typed': { path: 'typed' },
+      '@acme/untyped': { path: 'untyped' },
+    });
+
+    expect(projects.map(({ name, path: projectPath, isTheme }) => ({
+      name,
+      path: projectPath,
+      isTheme,
+    }))).toEqual([
+      {
+        name: 'theme-test',
+        path: themePath,
+        isTheme: true,
+      },
+      {
+        name: '@acme/typed',
+        path: path.join(root, 'extensions', 'typed', 'frontend'),
+        isTheme: false,
+      },
+    ]);
+  });
+
+  it('leaves out a theme without a tsconfig', () => {
+    expect(getTypeCheckProjects(themePath)).toEqual([]);
+  });
+
+  it('resolves the compiler that the project has installed', () => {
+    write('extensions/typed/frontend/tsconfig.json');
+    write(
+      'extensions/typed/frontend/node_modules/typescript/package.json',
+      JSON.stringify({ bin: { tsc: './bin/tsc' } })
+    );
+
+    const [project] = getTypeCheckProjects(themePath, { '@acme/typed': { path: 'typed' } });
+
+    expect(project.tsc).toBe(path.join(
+      root, 'extensions', 'typed', 'frontend', 'node_modules', 'typescript', 'bin', 'tsc'
+    ));
+  });
+
+  it('reports no compiler when the project has none installed', () => {
+    write('extensions/typed/frontend/tsconfig.json');
+
+    const [project] = getTypeCheckProjects(themePath, { '@acme/typed': { path: 'typed' } });
+
+    expect(project.tsc).toBeNull();
+  });
+});

package/lib/typeCheckWatcher.js

@@ -0,0 +1,48 @@
+const { spawn, spawnSync } = require('child_process');
+
+const isWindows = process.platform === 'win32';
+const STOP_SIGNALS = ['SIGINT', 'SIGTERM', 'SIGHUP'];
+
+const child = spawn(process.execPath, process.argv.slice(2), {
+  stdio: ['ignore', 'inherit', 'inherit'],
+  detached: !isWindows,
+  windowsHide: true,
+});
+
+/**
+ * Stops the compiler together with every process it started, then exits without an error.
+ */
+function stop() {
+  try {
+    if (isWindows) {
+      const { error, status } = spawnSync('taskkill', ['/pid', String(child.pid), '/T', '/F'], {
+        windowsHide: true,
+      });
+
+      if (error || status !== 0) {
+        child.kill();
+      }
+    } else {
+      process.kill(-child.pid, 'SIGTERM');
+    }
+  } catch (error) {
+    child.kill();
+  }
+
+  process.exit(0);
+}
+
+process.stdin.on('end', stop);
+process.stdin.on('error', stop);
+process.stdin.resume();
+STOP_SIGNALS.forEach(signal => process.on(signal, stop));
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.removeAllListeners(signal);
+    process.kill(process.pid, signal);
+    return;
+  }
+
+  process.exit(code || 1);
+});

package/local-packages/pwa-extension-kit/src/components/ProductCharacteristics/spec.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 import Conditioner from '@shopgate/pwa-core/classes/Conditioner';
 import ProductCharacteristics from './index';
 
 const mockedConditioner = new Conditioner();
+const mockedSetCharacteristics = jest.fn();
 const mockedMapStateToPropsResult = {
   variants: {
     products: [{
@@ -59,7 +59,7 @@ jest.mock('@shopgate/pwa-common/context', () => ({
               productId="123"
               variantId="123-45"
               conditioner={mockedConditioner}
-              setCharacteristics={jest.fn()}
+              setCharacteristics={mockedSetCharacteristics}
               {...contextProps}
             />
           ),
@@ -75,18 +75,26 @@ jest.mock('@shopgate/pwa-common/context', () => ({
 }));
 
 describe('components/ProductCharacteristics', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should render', () => {
-    const component = mount((
-      <ProductCharacteristics render={jest.fn()} />
+    const renderer = jest.fn(({ id, label }) => <div key={id}>{label}</div>);
+
+    const { container } = render((
+      <ProductCharacteristics render={renderer} />
     ));
 
-    expect(component).toMatchSnapshot();
+    expect(container).toHaveTextContent('ColorSize');
+    expect(mockedSetCharacteristics).toHaveBeenCalledTimes(1);
+    expect(mockedSetCharacteristics).toHaveBeenCalledWith({});
   });
 
   it('should call render prop', () => {
     const renderer = jest.fn();
 
-    mount((
+    render((
       <ProductCharacteristics render={renderer} />
     ));
 

package/local-packages/pwa-extension-kit/src/connectors/withHistoryActions.spec.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import withHistoryActions from './withHistoryActions';
 
 const mockedAction = jest.fn();
@@ -16,19 +15,23 @@ jest.mock('react-redux', () => ({
 
 describe('connectors/withHistoryActions', () => {
   // eslint-disable-next-line react/prop-types, require-jsdoc
-  const TestedComponent = props => <div>Other prop: {props.foo}</div>;
+  const TestedComponent = jest.fn(props => <div>Other prop: {props.foo}</div>);
   const ConnectedComponent = withHistoryActions(TestedComponent);
-  let component;
-  let props;
+
+  const renderConnected = () => {
+    render(<ConnectedComponent foo="bar" />);
+    return TestedComponent.mock.calls[0][0];
+  };
 
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('should render component with specified props', () => {
-    component = mount(<ConnectedComponent foo="bar" />);
-    props = component.find('TestedComponent').props();
+    const props = renderConnected();
 
+    expect(screen.getByText('Other prop: bar')).toBeInTheDocument();
+    expect(Object.keys(props).sort()).toEqual(['foo', 'historyPop', 'historyPush', 'historyReplace']);
     expect(typeof props.historyPop).toBe('function');
     expect(typeof props.historyPush).toBe('function');
     expect(typeof props.historyReplace).toBe('function');
@@ -41,6 +44,7 @@ describe('connectors/withHistoryActions', () => {
     actions.forEach((action) => {
       it(`should call ${action}`, () => {
         const pathname = 'PATHNAME';
+        const props = renderConnected();
         if (action === 'historyPop') {
           props[action]();
           expect(mockedAction).toHaveBeenCalledWith(action);
@@ -56,6 +60,7 @@ describe('connectors/withHistoryActions', () => {
         const options = {
           state: {},
         };
+        const props = renderConnected();
         if (action === 'historyPop') {
           props[action]();
           expect(mockedAction).toHaveBeenCalledWith(action);

package/local-packages/pwa-extension-kit/src/connectors/withPageProductId.spec.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import withPageProductId from './withPageProductId';
 
 let mockedProductId;
@@ -34,14 +33,15 @@ describe('connectors/withPageProductId', () => {
   });
 
   // eslint-disable-next-line react/prop-types, require-jsdoc
-  const MockedComponent = props => <div>{props.productId}</div>;
+  const MockedComponent = jest.fn(props => <div>Product: {String(props.productId)}</div>);
 
   it('should render with productId', () => {
     mockedProductId = '31323334';
     const Component = withPageProductId(MockedComponent);
 
-    const component = mount(<Component otherProp={1} />);
-    expect(component.find('MockedComponent').props()).toEqual({
+    render(<Component otherProp={1} />);
+    expect(screen.getByText('Product: 1234')).toBeInTheDocument();
+    expect(MockedComponent.mock.lastCall[0]).toEqual({
       productId: '1234',
       otherProp: 1,
     });
@@ -51,8 +51,9 @@ describe('connectors/withPageProductId', () => {
     mockedProductId = undefined;
     const Component = withPageProductId(MockedComponent);
 
-    const component = mount(<Component otherProp={1} />);
-    expect(component.find('MockedComponent').props()).toEqual({
+    render(<Component otherProp={1} />);
+    expect(screen.getByText('Product: null')).toBeInTheDocument();
+    expect(MockedComponent.mock.lastCall[0]).toEqual({
       productId: null,
       otherProp: 1,
     });
@@ -63,8 +64,9 @@ describe('connectors/withPageProductId', () => {
     mockedProductId = '123';
     const Component = withPageProductId(MockedComponent);
 
-    const component = mount(<Component otherProp={1} />);
-    expect(component.find('MockedComponent').props()).toEqual({
+    render(<Component otherProp={1} />);
+    expect(screen.getByText('Product: false')).toBeInTheDocument();
+    expect(MockedComponent.mock.lastCall[0]).toEqual({
       productId: false,
       otherProp: 1,
     });

package/local-packages/pwa-extension-kit/src/connectors/withPageState.spec.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import withPageState from './withPageState';
 
 const isLoadingSpy = jest.fn();
@@ -10,7 +9,7 @@ const mockedIsLoading = (...args) => {
 };
 
 // eslint-disable-next-line react/prop-types, require-jsdoc
-const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+const TestingComponent = jest.fn(props => <div>Other prop: {props.foo}</div>);
 
 jest.mock('@shopgate/pwa-common/providers/', () => ({
   LoadingContext: {
@@ -44,9 +43,10 @@ jest.mock('@shopgate/pwa-common/context', () => ({
 describe('connectors/withPageState', () => {
   it('should render with specified props', () => {
     const ConnectedComponent = withPageState(TestingComponent);
-    const component = mount(<ConnectedComponent foo="bar" />);
+    render(<ConnectedComponent foo="bar" />);
     expect(isLoadingSpy).toHaveBeenCalledWith('/foo/bar');
-    expect(component.find('TestingComponent').props()).toEqual({
+    expect(screen.getByText('Other prop: bar')).toBeInTheDocument();
+    expect(TestingComponent.mock.lastCall[0]).toEqual({
       isVisible: true,
       isLoading: true,
       foo: 'bar',

package/local-packages/pwa-extension-kit/src/connectors/withProductContext.spec.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import WithProductContext from './withProductContext';
 
 // eslint-disable-next-line react/prop-types, require-jsdoc
-const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+const TestingComponent = jest.fn(props => <div>Other prop: {props.foo}</div>);
 
 jest.mock('@shopgate/pwa-common/context', () => ({
   // eslint-disable-next-line react/prop-types
@@ -40,9 +39,10 @@ jest.mock('@shopgate/pwa-common/context', () => ({
 describe('connectors/withProductContext', () => {
   it('should render with specified props', () => {
     const ConnectedComponent = WithProductContext(TestingComponent);
-    const component = mount(<ConnectedComponent foo="bar" />);
+    render(<ConnectedComponent foo="bar" />);
 
-    expect(component.find('TestingComponent').props()).toEqual({
+    expect(screen.getByText('Other prop: bar')).toBeInTheDocument();
+    expect(TestingComponent.mock.lastCall[0]).toEqual({
       foo: 'bar',
       productContext: {
         options: {},

package/local-packages/pwa-extension-kit/src/connectors/withThemeComponents.spec.jsx

@@ -1,9 +1,8 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import withThemeComponents from './withThemeComponents';
 
 // eslint-disable-next-line react/prop-types, require-jsdoc
-const TestingComponent = props => <div>Other prop: {props.foo}</div>;
+const TestingComponent = jest.fn(props => <div>Other prop: {props.foo}</div>);
 
 jest.mock('@shopgate/pwa-common/context', () => ({
   // eslint-disable-next-line react/prop-types
@@ -29,11 +28,16 @@ jest.mock('@shopgate/pwa-common/context', () => ({
 describe('connectors/withThemeComponents', () => {
   it('should render with specified props', () => {
     const ConnectedComponent = withThemeComponents(TestingComponent);
-    const component = mount(<ConnectedComponent foo="bar" />);
+    render(<ConnectedComponent foo="bar" />);
 
-    expect(component.find('TestingComponent').prop('contexts')).toBeUndefined();
+    expect(screen.getByText('Other prop: bar')).toBeInTheDocument();
 
-    expect(Object.keys(component.find('TestingComponent').props())).toMatchObject([
+    const [[props]] = TestingComponent.mock.calls;
+
+    expect(props.contexts).toBeUndefined();
+    expect(props.foo).toBe('bar');
+
+    expect(Object.keys(props)).toMatchObject([
       'AppBar',
       'Drawer',
       'View',

package/local-packages/pwa-extension-kit/src/connectors/withUser.spec.jsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import withUser from './withUser';
 
 let mockedMapStateToPropsSpy = jest.fn();
@@ -25,12 +24,22 @@ jest.mock('react-redux', () => ({
   }
 }));
 describe('/connectors/withUser', () => {
-  const TestedComponent = props => <div>Test</div>;
+  const TestedComponent = jest.fn(() => <div>Test</div>);
+  let mapStateToProps;
+
+  beforeAll(() => {
+    const ConnectedComponent = withUser(TestedComponent);
+    render(<ConnectedComponent />).unmount();
+    [[mapStateToProps]] = mockedMapStateToPropsSpy.mock.calls;
+    TestedComponent.mockClear();
+  });
+
   it('should create component and pass external props', () => {
     const ConnectedComponent = withUser(TestedComponent);
-    const component = mount(<ConnectedComponent foo="bar" />);
+    render(<ConnectedComponent foo="bar" />);
 
-    expect(component.find('TestedComponent').props()).toEqual({
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(TestedComponent.mock.lastCall[0]).toEqual({
       user: {
         ...mockedMapStateToPropsResult.user,
       },
@@ -53,7 +62,6 @@ describe('/connectors/withUser', () => {
       },
     };
 
-    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
     expect(mapStateToProps(state).user).toEqual({
       isLoggedIn: true,
       id: 'foo',
@@ -72,7 +80,6 @@ describe('/connectors/withUser', () => {
       },
     };
 
-    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
     expect(mapStateToProps(state).user).toEqual({
       isLoggedIn: false,
       id: null,
@@ -88,7 +95,6 @@ describe('/connectors/withUser', () => {
       user: {},
     };
 
-    const mapStateToProps = mockedMapStateToPropsSpy.mock.calls[0][0];
     expect(mapStateToProps(state).user).toEqual({
       isLoggedIn: false,
       id: null,

package/locales/en.json

@@ -25,6 +25,14 @@
     "INVALID": "... invalid:",
     "VALID": "... theme configuration is valid"
   },
+  "plugins/ShopgateTypeCheckPlugin": {
+    "CHECKING": "Type checking {name} ...",
+    "ERRORS": "Type errors: {count}",
+    "NO_ERRORS": "No type errors",
+    "NO_TYPESCRIPT": "Type check skipped for {name}: TypeScript is not installed there",
+    "FAILED": "Type check of {name} could not be started: {message}",
+    "STOPPED": "Type check of {name} stopped unexpectedly ({reason}). Restart the frontend to check it again. Its last output:"
+  },
   "webpack.config": {
     "WEBPACK_PROGRESS": "building [{bar}] [{message}] {percent} ({elapsed} seconds)"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/webpack",
-  "version": "7.32.2-alpha.9",
+  "version": "7.33.0-beta.2",
   "description": "The webpack configuration for Shopgate's Engage.",
   "main": "webpack.config.js",
   "license": "Apache-2.0",