Fix modular add from custom template (#2190)

* Enhanced `modular add` from template logging

* Add to Templates documentation

* Fix adding from template not adding all files when "files" filter in package.json is not specified

* Added template tests

* Force addPackage to require.resolve from the modular root

* Refactor addPackage tests to not run yarn and use a separate temp testing space

* Refactor createModularTestContext to make it more  generic

* Reduce test template app to skeleton

* Use npm-packlist instead of globby for addPackage

* Prevent infinite loop in verifyPackageTree

Author: AlbertoBrusa

.changeset/clean-jeans-retire.md

@@ -0,0 +1,11 @@
+---
+'modular-scripts': patch
+---
+
+Fixed `modular add` from template not copying all template files when no "files"
+field is specified in the package.json - now using npm-packlist for this
+Added tests for adding from templates
+Refactored addPackage tests to use a temp directory outside the repository and
+improve performance by avoiding yarn commands in favour of mocking the behaviour
+Added more descriptive log messages when running `modular add` with a local
+template

__fixtures__/templates/modular-template-app/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File

__fixtures__/templates/modular-template-app/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "modular-template-app",
+  "version": "1.1.0",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "modular": {
+    "type": "template",
+    "templateType": "app"
+  },
+  "license": "Apache-2.0",
+  "files": [
+    "src"
+  ]
+}

__fixtures__/templates/modular-template-app/src/App.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import logo from './logo.svg';
+import './App.css';
+
+function App(): JSX.Element {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+  );
+}
+
+export default App;

__fixtures__/templates/modular-template-app/src/__tests__/App.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from '../App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

__fixtures__/templates/modular-template-filter/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File

__fixtures__/templates/modular-template-filter/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "modular-template-filter",
+  "version": "0.0.1",
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "modular": {
+    "type": "template",
+    "templateType": "app"
+  },
+  "files": [
+    "src"
+  ],
+  "license": "Apache-2.0"
+}

__fixtures__/templates/modular-template-filter/src/__tests__/filter.test.ts

@@ -0,0 +1,5 @@
+import add from '../index';
+
+test('it should add two numbers', () => {
+  expect(add(1, 2)).toEqual(3);
+});

__fixtures__/templates/modular-template-filter/src/index.tsx

@@ -0,0 +1,3 @@
+export default function add(a: number, b: number): number {
+  return a + b;
+}

__fixtures__/templates/modular-template-no-filter/CHANGELOG.md

@@ -0,0 +1 @@
+# Test File