chore: add feature e2e tests and improve overall testing

.circleci/config.yml

@@ -1,43 +1,84 @@
-# Javascript Node CircleCI 2.0 configuration file
-#
-# Check https://circleci.com/docs/2.0/language-javascript/ for more details
-#
-version: 2
-jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:latest
+version: 2.1
 
-      # Specify service dependencies here if necessary
-      # CircleCI maintains a library of pre-built images
-      # documented at https://circleci.com/docs/2.0/circleci-images/
-      # - image: circleci/mongo:3.4.4
-
-    working_directory: ~/repo
+defaults: &defaults
+  working_directory: ~/repo
+  docker:
+    - image: circleci/node:latest
 
+jobs:
+  install:
+    <<: *defaults
     steps:
       - checkout
-
-      # Download and cache dependencies
       - restore_cache:
           keys:
-            - v1-dependencies-{{ checksum "package.json" }}
-            # fallback to using the latest cache if no exact match is found
-            - v1-dependencies-
-
-      - run: yarn install
-
+            - v1-averjs-{{ checksum "package.json" }}
+      - run: yarn install --frozen-lockfile
       - save_cache:
           paths:
             - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
-
-      - run: yarn lint
-
+          key: v1-averjs-{{ checksum "package.json" }}
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - repo
+
+  build:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
       - run: yarn build-scripts
-
       - run: yarn build
+
+  lint: 
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: yarn lint
+
+  test: 
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Install Headless Chrome dependencies
+          command: |
+            sudo apt-get install -yq \
+            gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 \
+            libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 \
+            libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 \
+            libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates \
+            fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget
+      - run:
+          name: Run tests with JUnit as reporter
+          command: yarn jest --ci --runInBand --reporters=default --reporters=jest-junit
+          environment:
+            JEST_JUNIT_OUTPUT_DIR: ./reports/junit/
+            NODE_OPTIONS: --max_old_space_size=4096
+            NODE_ENV: test
+            CIRCLE_CI: true
+      - run:
+          name: Run code coverage
+          command: yarn codecov
+      - store_test_results:
+          path: ./reports/junit/
+      - store_artifacts:
+          path: ./reports/junit
 
-      # run tests!
-      - run: yarn test
+workflows:
+  version: 2.1
+  test:
+    jobs:
+      - install
+      - build:
+          requires:
+            - install
+      - lint:
+          requires:
+            - install
+      - test:
+          requires:
+            - install

.eslintrc.js

@@ -6,6 +6,9 @@ module.exports = {
   env: {
     jest: true
   },
+  globals: {
+    jestPuppeteer: true
+  },
   extends: [
     'standard',
     'eslint:recommended',
@@ -85,18 +88,23 @@ module.exports = {
     },
     {
       files: ['**/*.js', '**/*.vue'],
-      extends: ['@averjs', 'plugin:prettier/recommended'],
+      env: {
+        jest: true
+      },
+      extends: ['@averjs'],
       rules: {
-        'space-before-function-paren': 'off'
+        indent: 'off',
+        'space-before-function-paren': 'off',
+        'vue/script-indent': 'off'
       }
+    },
+    {
+      files: ['packages/@averjs/vue-app/templates/**/*.js'],
+      parserOptions: {
+        parser: 'babel-eslint',
+        ecmaVersion: 2015
+      },
+      extends: ['plugin:lodash-template/recommended-with-script']
     }
-    // {
-    //   files: ['packages/@averjs/vue-app/templates/**/*.js'],
-    //   parserOptions: {
-    //     parser: 'babel-eslint',
-    //     ecmaVersion: 2015
-    //   },
-    //   extends: ['plugin:lodash-template/recommended-with-script']
-    // }
   ]
 };

.gitignore

@@ -11,4 +11,5 @@ verdaccio
 packages/test
 .changelog
 temp
-scripts-build
+scripts-build
+__tests__/**/storage

__tests__/features/additional-extensions.spec.ts

@@ -0,0 +1,43 @@
+import { testFeature } from '../utils/feature';
+import fs from 'fs';
+import path from 'path';
+
+testFeature('additional-extensions', currentDir => {
+  test('should add the additional extensions to entries regex', async () => {
+    const response = await page.goto('http://localhost:3000');
+    const content = await page.content();
+    expect(await response?.text()).toContain(
+      '<span>server entry works</span><span>i18n entry works</span><span>app entry works</span>'
+    );
+    expect(content).toContain(
+      '<span>client entry works</span><span>i18n entry works</span><span>app entry works</span>'
+    );
+
+    const appContent = fs.readFileSync(
+      path.resolve(currentDir, './node_modules/.cache/averjs/app.js'),
+      'utf-8'
+    );
+    const clientContent = fs.readFileSync(
+      path.resolve(currentDir, './node_modules/.cache/averjs/entry-client.js'),
+      'utf-8'
+    );
+    const entryServerContent = fs.readFileSync(
+      path.resolve(currentDir, './node_modules/.cache/averjs/entry-server.js'),
+      'utf-8'
+    );
+    const i18nContent = fs.readFileSync(
+      path.resolve(currentDir, './node_modules/.cache/averjs/i18n.js'),
+      'utf-8'
+    );
+    const storeContent = fs.readFileSync(
+      path.resolve(currentDir, './node_modules/.cache/averjs/store/index.js'),
+      'utf-8'
+    );
+
+    expect(appContent).toContain('(js|ts)');
+    expect(clientContent).toContain('(js|ts)');
+    expect(entryServerContent).toContain('(js|ts)');
+    expect(i18nContent).toContain('(js|ts)');
+    expect(storeContent).toContain('(js|ts)');
+  });
+});

__tests__/features/alias.spec.ts

@@ -0,0 +1,10 @@
+import { testFeature } from '../utils/feature';
+
+testFeature('alias', () => {
+  test('should resolve webpack aliases correctly', async () => {
+    await page.goto('http://localhost:3000');
+    expect(await page.content()).toContain(
+      '<div id="app"><div><span>vuex</span><span>src</span><span>root</span><span>components</span><span>mixins</span><span>resources</span><span>[{"path":"/","name":"home"}]</span><span>test</span></div></div>'
+    );
+  });
+});

__tests__/features/async-data.spec.ts

@@ -0,0 +1,27 @@
+import { testFeature } from '../utils/feature';
+
+testFeature('async-data', () => {
+  test('should fetch data before rendering component on page change', async () => {
+    await page.goto('http://localhost:3000');
+    await (await page.$('a'))?.click();
+    const watchDog = page.waitForFunction('window.status === "ready"');
+    await watchDog;
+    expect(await page.content()).toContain(
+      '<div id="app"><div>some async data</div></div>'
+    );
+  });
+
+  test('should fetch data before ssr', async () => {
+    const response = await page.goto('http://localhost:3000/test');
+    expect(await response?.text()).toContain(
+      '<div id="app" data-server-rendered="true"><div>some async data</div></div>'
+    );
+  });
+
+  test('should have the asyncData class hook registered', async () => {
+    const response = await page.goto('http://localhost:3000/test-class');
+    expect(await response?.text()).toContain(
+      '<div id="app" data-server-rendered="true"><div>some async data</div></div>'
+    );
+  });
+});

__tests__/features/babel-loader.spec.ts

@@ -0,0 +1,109 @@
+import { rebuild, testFeature } from '../utils/feature';
+import fs from 'fs-extra';
+import path from 'path';
+
+testFeature(
+  'babel-loader',
+  () => {
+    test('should transpile given deps correctly', async () => {
+      await page.goto('http://localhost:3000');
+      const content = await page.content();
+
+      expect(content).toContain(
+        '<div id="app"><span>test</span><span>another test</span><div>should be compiled</div></div>'
+      );
+    });
+
+    test('should transpile deps with regex correctly', async () => {
+      await rebuild({
+        webpack: {
+          transpileDependencies: [/package-to-transpile/]
+        }
+      });
+
+      await page.goto('http://localhost:3000');
+      const content = await page.content();
+
+      expect(content).toContain(
+        '<div id="app"><span>test</span><span>another test</span><div>should be compiled</div></div>'
+      );
+    });
+
+    test('should ignore non string and non regex', async () => {
+      await rebuild({
+        webpack: {
+          transpileDependencies: [
+            /package-to-transpile/,
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            () => {}
+          ]
+        }
+      });
+
+      await page.goto('http://localhost:3000');
+      const content = await page.content();
+
+      expect(content).toContain(
+        '<div id="app"><span>test</span><span>another test</span><div>should be compiled</div></div>'
+      );
+    });
+
+    test('should throw error when the package is missing in the transpileDependencies array', async () => {
+      try {
+        await rebuild({
+          webpack: {
+            transpileDependencies: []
+          }
+        });
+      } catch (error) {
+        expect(error).toContain("SyntaxError: Unexpected token 'export'");
+      }
+    });
+
+    test('should fallback to empty array', async () => {
+      try {
+        await rebuild({
+          webpack: {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            transpileDependencies: null
+          }
+        });
+      } catch (error) {
+        expect(error).toContain("SyntaxError: Unexpected token 'export'");
+      }
+    });
+
+    test('should call the babel function correctly', async () => {
+      const babel = jest.fn();
+      await rebuild({
+        webpack: {
+          babel
+        }
+      });
+      expect(babel.mock.calls.length).toBe(2);
+      expect(babel.mock.calls[0]).toEqual(
+        expect.arrayContaining([{ isServer: false }, { buildTarget: 'client' }])
+      );
+      expect(babel.mock.calls[1]).toEqual(
+        expect.arrayContaining([{ isServer: true }, { buildTarget: 'server' }])
+      );
+    });
+  },
+  {},
+  currentDir => {
+    beforeAll(() => {
+      fs.copySync(
+        path.resolve(currentDir, './package-to-transpile'),
+        path.resolve(process.cwd(), './node_modules/package-to-transpile')
+      );
+    });
+    afterAll(() => {
+      fs.removeSync(
+        path.resolve(process.cwd(), './node_modules/package-to-transpile')
+      );
+    });
+  }
+);

__tests__/features/copy-webpack.spec.ts

@@ -0,0 +1,15 @@
+import { testFeature } from '../utils/feature';
+import fs from 'fs-extra';
+import path from 'path';
+
+testFeature('copy-webpack', currentDir => {
+  const logoPath = path.resolve(currentDir, './public/images/logo.png');
+
+  afterAll(() => {
+    fs.removeSync(path.resolve(currentDir, './public'));
+  });
+
+  test('should copy images in resources folder to public folder', () => {
+    expect(fs.existsSync(logoPath)).toBeTruthy();
+  });
+});