feat: fix migrations (#30)

.prettierignore

@@ -3,4 +3,5 @@
 /dist
 /coverage
 
-/.nx/cache
+/.nx/cache
+examples

.verdaccio/.htpasswd

@@ -0,0 +1 @@
+test:$6FrCaT/v0dwE:autocreated 2020-03-25T19:10:50.254Z

.verdaccio/config.yml

@@ -0,0 +1,48 @@
+# path to a directory with all packages
+storage: ../dist/local-registry/storage
+
+auth:
+  htpasswd:
+    file: ./htpasswd
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+    maxage: 60m
+    max_fails: 20
+    fail_timeout: 2m
+  yarn:
+    url: https://registry.yarnpkg.com
+    maxage: 60m
+    max_fails: 20
+    fail_timeout: 2m
+
+packages:
+  '@*/*':
+    # scoped packages
+    access: $all
+    publish: $all
+    unpublish: $all
+    proxy: npmjs
+
+  '**':
+    # allow all users (including non-authenticated users) to read and
+    # publish all packages
+    access: $all
+
+    # allow all users (including non-authenticated users) to publish/publish packages
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to 'yarn' registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

README.md

@@ -104,11 +104,11 @@ Each lab will contain a link to the next one. Start from **"Lab 1"** and move th
 - 🔍  [Lab 17 - NxCloud GitHub bot](docs/lab17/LAB.md)
 - 📎  [Lab 18 - Run-Commands and deploying the frontend](docs/lab18/LAB.md)
 
-| Option 1 - NextJS frontends and more custom generators practice                        | Option 2 - Heroku API deployments with Docker                                      |
-| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| 🧭  [Lab 19 - Creating and deploying a 2nd frontend](docs/lab19-alt/LAB.md)  | 🧲  [Lab 19 - Deploying the API](docs/lab19/LAB.md)                      |
-| ⛱️  [Lab 20 - Mock Store](docs/lab20-alt/LAB.md)                             | 🎸  [Lab 20 - Connecting the frontend and backend](docs/lab20/LAB.md)    |
-| 🪁  [Lab 21 - Setting up CD for automatic deployment](docs/lab21-alt/LAB.md) | 🎈  [Lab 21 - Setting up CD for automatic deployment](docs/lab21/LAB.md) |
-| 💈  [Lab 22 - Deploying only what changed](docs/lab22/LAB.md)                | 💈  [Lab 22 - Deploying only what changed](docs/lab22/LAB.md)            |
+| Option 1 - NextJS frontends and more custom generators practice             | Option 2 - Fly.io API deployments                                       |
+| --------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| 🧭 [Lab 19 - Creating and deploying a 2nd frontend](docs/lab19-alt/LAB.md)  | 🚀 [Lab 19 - Deploying the API with custom executor](docs/lab19/LAB.md) |
+| ⛱️ [Lab 20 - Mock Store](docs/lab20-alt/LAB.md)                             | 🪢 [Lab 20 - Connecting the frontend and backend](docs/lab20/LAB.md)    |
+| 🪁 [Lab 21 - Setting up CD for automatic deployment](docs/lab21-alt/LAB.md) | 🎈 [Lab 21 - Setting up CD for automatic deployment](docs/lab21/LAB.md) |
+| 💈 [Lab 22 - Deploying only what changed](docs/lab22/LAB.md)                | 💈 [Lab 22 - Deploying only what changed](docs/lab22/LAB.md)            |
 
 ## Have fun learning! 🎉

apps/nx-workshop-e2e/jest.config.js

@@ -11,5 +11,4 @@ module.exports = {
     ],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/apps/nx-workshop-e2e',
 };

apps/nx-workshop-e2e/tests/nx-workshop.spec.ts

@@ -1,24 +1,116 @@
-import {
-  checkFilesExist,
-  ensureNxProject,
-  runNxCommand,
-} from '@nx/plugin/testing';
-import { execSync } from 'child_process';
+import { readJsonFile, workspaceRoot, writeJsonFile } from '@nx/devkit';
+import { ExecSyncOptionsWithStringEncoding, execSync } from 'child_process';
+import { ensureDirSync, removeSync, existsSync } from 'fs-extra';
+import { dirname, join } from 'path';
+
 describe('nx-react-workshop e2e', () => {
-  describe('migrations', () => {
+  describe('migrations for alternative option', () => {
     it('should run the migrations', () => {
-      ensureNxProject('@nrwl/nx-react-workshop', 'dist/libs/nx-react-workshop');
-      expect(() => checkFilesExist(`libs`)).not.toThrow();
+      createNewWorkspace();
+
       expect(() => checkFilesExist(`node_modules/.bin/nx`)).not.toThrow();
     }, 120000);
-    for (let i = 1; i < 22; i++) {
+
+    for (let i = 1; i < 23; i++) {
       it(`should complete lab ${i}`, () => {
         runNxCommand(
-          `generate @nrwl/nx-react-workshop:complete-labs --lab=${i}`
+          `generate @nrwl/nx-react-workshop:complete-labs --lab=${i} --option=option1`
+        );
+        runNxCommand('migrate --run-migrations=migrations.json --verbose');
+        runNxCommand(
+          'run-many --target=e2e --parallel=false --exclude=internal-plugin-e2e'
+        );
+        runNxCommand('run-many --target=lint --parallel=false');
+      });
+    }
+  });
+
+  describe('migrations for deployment path', () => {
+    it('should run the migrations', () => {
+      createNewWorkspace();
+
+      expect(() => checkFilesExist(`node_modules/.bin/nx`)).not.toThrow();
+    }, 120000);
+
+    for (let i = 1; i < 23; i++) {
+      it(`should complete lab ${i}`, () => {
+        runNxCommand(
+          `generate @nrwl/nx-react-workshop:complete-labs --lab=${i} --option=option2`
         );
         runNxCommand('migrate --run-migrations=migrations.json');
-        runNxCommand('run-many --target=e2e --parallel=false');
+        runNxCommand(
+          'run-many --target=e2e --parallel=false --exclude=internal-plugin-e2e'
+        );
+        runNxCommand('run-many --target=lint --parallel=false');
       });
     }
   });
 });
+
+const scope = `bg-hoard`;
+
+function tmpProjPath() {
+  return join(process.cwd(), 'tmp', 'nx-e2e', scope);
+}
+
+function createNewWorkspace() {
+  const localTmpDir = dirname(tmpProjPath());
+  ensureDirSync(localTmpDir);
+  removeSync(tmpProjPath());
+  // create new workspace
+  execSync(
+    `node ${require.resolve(
+      'nx'
+    )} new ${scope} --nx-workspace-root=${localTmpDir} --no-interactive --skip-install --collection=@nx/workspace --npmScope=${scope} --preset=apps --packageManager=npm`,
+    {
+      cwd: localTmpDir,
+    }
+  );
+  // patch package.json
+  const path = join(tmpProjPath(), 'package.json');
+  const json = readJsonFile(path);
+  json.devDependencies[
+    '@nrwl/nx-react-workshop'
+  ] = `file:${workspaceRoot}/dist/libs/nx-react-workshop`;
+  writeJsonFile(path, json);
+  // install dependencies
+  execSync('npm install', {
+    cwd: tmpProjPath(),
+    stdio: ['ignore', 'ignore', 'ignore'],
+  });
+}
+
+function checkFilesExist(...expectedPaths) {
+  expectedPaths.forEach((path) => {
+    const filePath = join(tmpProjPath(), path);
+    if (!execSync(filePath)) {
+      throw new Error(`'${filePath}' does not exist`);
+    }
+  });
+}
+
+function runNxCommand(command): string {
+  function _runNxCommand(c) {
+    const execSyncOptions: ExecSyncOptionsWithStringEncoding = {
+      cwd: tmpProjPath(),
+      env: process.env,
+      encoding: 'utf-8',
+    };
+    if (existsSync(join(tmpProjPath(), 'package.json'))) {
+      return execSync(`npx nx ${c}`, execSyncOptions);
+    } else {
+      return execSync(`./nx %${c}`, execSyncOptions);
+    }
+  }
+  try {
+    return _runNxCommand(command)
+      .toString()
+      .replace(
+        /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+        ''
+      );
+  } catch (e) {
+    console.log(e.stdout.toString(), e.stderr.toString());
+    throw e;
+  }
+}

docs/lab1/LAB.md

@@ -16,13 +16,13 @@
 ## 🏋️‍♀️ Steps:
 
 1. Generate an empty Nx workspace for a fictional company called "The Board Game Hoard"
-<br />
+   <br />
 
 2. The workspace name should be `bg-hoard`
-<br />
+   <br />
 
 3. Make sure you select `None` as Stack (we will create apps manually), an `Integrated` workspace layout and `No to NxCloud` when asked
-<br />
+   <br />
 
 ---
 

docs/lab11/LAB.md

@@ -2,42 +2,49 @@
 
 ###### ⏰  Estimated time: 5 minutes
 
-The storybook generator we invoked earlier also generated some e2e tests. Let's try them out!
+The storybook generator we invoked earlier also generated some tests. Let's try them out!
 
 ## 📚 Learning outcomes:
 
 - **Take advantage of the e2e tests Nx generated earlier to test your app**
-<br />
+  <br />
 
 ## 🏋️‍♀️ Steps:
 
-1. Our previous command generated a new `apps/store-ui-shared-e2e` folder. Let's run them: `nx e2e store-ui-shared-e2e`
+1. Our previous command generated tests with stories as well. Let's run them: `nx storybook store-ui-shared` and in another terminal `nx test-storybook store-ui-shared`
+
    - The tests should fail
-<br/>
+     <br/>
 
-2. Open `apps/store-ui-shared-e2e/src/integration/header/header.spec.ts` and **give the title a value**:
+2. Open `libs/store/ui-shared/src/lib/header/header.stories.tsx` and **give the title a value**.
 
+    <details>
+    <summary>🐳 Hint</summary>
    ```ts
-   cy.visit(
-     '/iframe.html?id=header--primary&args=title:BoardGameHoard'
-   )
+   args: {
+     title: 'Welcome to Board Game Hoard';
+   }
    ```
-<br />
+   </details>
+
+   <br />
 
-3. Now **add a test** to check if it contains that value
+3. Now **fix the test** to check if it contains that value
 
+    <details>
+    <summary>🐳 Hint</summary>
    ```ts
-   it('should show the title', () => {
-     cy.get('header').contains('BoardGameHoard');
-   });
+   expect(canvas.getByText(/Welcome to Board Game Hoard/gi)).toBeTruthy();
    ```
-<br />
+   </details>
+
+   <br />
 
 4. **Re-run the tests**
-<br/>
+   <br/>
 
 5. **Inspect what changed** from the last time you committed, then **commit your changes**
-<br/>
+   <br/>
 
 ---