@jscutlery/playwright-ct-angular 0.1.2 → 0.1.4

package/index.cjs.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/index.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./index.cjs.js').default;

package/index.cjs.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var playwright = require('@playwright/test');
+var mount = require('@playwright/test/lib/mount');
+var jestMock = require('jest-mock');
+var path = require('path');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var playwright__namespace = /*#__PURE__*/_interopNamespace(playwright);
+var path__namespace = /*#__PURE__*/_interopNamespace(path);
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {
+};
+playwright__namespace['_addRunnerPlugin'](() => {
+    /* Only fetch upon request to avoid resolution in workers. */
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+    return createPlugin(path__namespace.join(__dirname, 'register-source.mjs'), noop);
+});
+const mountTest = playwright__namespace.test.extend(mount.fixtures);
+const test = mountTest.extend({
+    /**
+     * Override mount to return output spies and enjoy type inference.
+     * This allows this:
+     *
+     * const { spies } = mount(..., {outputs: {citySelect: jest.fn()}})
+     *
+     * instead of this:
+     *
+     * const citySelectSpy: jest.MockedFunction<(city: string) => void> = jest.fn();
+     * mount(..., {outputs: {citySelect: citySelectSpy}});
+     *
+     * @hack we are willingly not using `async mount(...)` syntax here
+     * because it would be transpiled to `_async(function mount() { ... }`
+     * by Nx's default rollout config.
+     * Playwright dynamically parses the given function so converting
+     * async / await to a wrapped function would simply break the library causing
+     * a `TypeError: mount is not a function` error.
+     */
+    mount({ mount, page }, use) {
+        return use(async (component, options = {}) => {
+            /* 1. Create a spy for each output in `spyOutputs`... */
+            const spies = options.spyOutputs?.reduce((acc, key) => {
+                return {
+                    ...acc,
+                    [key]: jestMock.fn()
+                };
+            }, {}) ?? {};
+            /* 2. ...then use it as an output... */
+            await mount(component, {
+                ...options,
+                outputs: {
+                    ...options.outputs,
+                    ...spies
+                }
+            });
+            /* Grab a locator to the TestBed's root element.
+             * We are loading a fresh new page for each test
+             * so the id should always be "root0".
+             * Otherwise, we'd have to hack our way and somehow grab all
+             * the `#root*`, sort them and grab the last one.
+             * As a matter of fact, we can't grab a reference to the fixture. */
+            const locator = page.locator('#root0');
+            /* Add spies to the returned locator. */
+            return Object.assign(locator, { spies });
+        });
+    }
+});
+const expect = playwright__namespace.expect;
+const devices = playwright__namespace.devices;
+
+exports.devices = devices;
+exports.expect = expect;
+exports.test = test;

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.esm.js

@@ -0,0 +1,67 @@
+import * as playwright from '@playwright/test';
+import { fixtures } from '@playwright/test/lib/mount';
+import { fn } from 'jest-mock';
+import * as path from 'path';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {
+};
+playwright['_addRunnerPlugin'](() => {
+    /* Only fetch upon request to avoid resolution in workers. */
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { createPlugin } = require('@playwright/test/lib/plugins/vitePlugin');
+    return createPlugin(path.join(__dirname, 'register-source.mjs'), noop);
+});
+const mountTest = playwright.test.extend(fixtures);
+const test = mountTest.extend({
+    /**
+     * Override mount to return output spies and enjoy type inference.
+     * This allows this:
+     *
+     * const { spies } = mount(..., {outputs: {citySelect: jest.fn()}})
+     *
+     * instead of this:
+     *
+     * const citySelectSpy: jest.MockedFunction<(city: string) => void> = jest.fn();
+     * mount(..., {outputs: {citySelect: citySelectSpy}});
+     *
+     * @hack we are willingly not using `async mount(...)` syntax here
+     * because it would be transpiled to `_async(function mount() { ... }`
+     * by Nx's default rollout config.
+     * Playwright dynamically parses the given function so converting
+     * async / await to a wrapped function would simply break the library causing
+     * a `TypeError: mount is not a function` error.
+     */
+    mount({ mount, page }, use) {
+        return use(async (component, options = {}) => {
+            /* 1. Create a spy for each output in `spyOutputs`... */
+            const spies = options.spyOutputs?.reduce((acc, key) => {
+                return {
+                    ...acc,
+                    [key]: fn()
+                };
+            }, {}) ?? {};
+            /* 2. ...then use it as an output... */
+            await mount(component, {
+                ...options,
+                outputs: {
+                    ...options.outputs,
+                    ...spies
+                }
+            });
+            /* Grab a locator to the TestBed's root element.
+             * We are loading a fresh new page for each test
+             * so the id should always be "root0".
+             * Otherwise, we'd have to hack our way and somehow grab all
+             * the `#root*`, sort them and grab the last one.
+             * As a matter of fact, we can't grab a reference to the fixture. */
+            const locator = page.locator('#root0');
+            /* Add spies to the returned locator. */
+            return Object.assign(locator, { spies });
+        });
+    }
+});
+const expect = playwright.expect;
+const devices = playwright.devices;
+
+export { devices, expect, test };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscutlery/playwright-ct-angular",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "dependencies": {
     "jest-mock": "^28.1.3",
     "rxjs": "^7.5.7",
@@ -13,15 +13,14 @@
     "@playwright/test": "^1.28.0",
     "tslib": "*"
   },
-  "module": "./index.js",
-  "main": "./index.cjs",
-  "type": "module",
-  "types": "./src/index.d.ts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "types": "./src/index.d.ts",
-      "import": "./index.js",
-      "require": "./index.cjs"
+      "module": "./index.esm.js",
+      "import": "./index.cjs.mjs",
+      "default": "./index.cjs.js"
     }
-  }
+  },
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js"
 }

package/src/index.d.ts

@@ -1,2 +1,2 @@
-export { devices, expect, test } from './lib/playwright-ct-angular';
-export type { ComponentFixtures, PlaywrightTestConfig } from './lib/playwright-ct-angular';
+export { devices, expect, test } from './lib/playwright-ct-angular';
+export type { ComponentFixtures, PlaywrightTestConfig } from './lib/playwright-ct-angular';