test: Integrate Jest snapshot with fixtures (#2294)

CONTRIBUTING.md

@@ -68,11 +68,9 @@ yarn test <path_to_test>
 If you change the way the compiler outputs code, then you may see failed tests due to these changes. In those cases, you can regenerate the test snapshots like so:
 
 ```bash
-find . -type f | grep __tests__ | grep expected | xargs rm -f
+yarn test -u
 ```
 
-Then run `yarn test` to regenerate the snapshots.
-
 If you want to debug these tests, you can do as follow:
 
 1. First, insert a new line in your test where you think it might be failing and type `debugger`. This will serve as a break point for the debugger to stop at.

package.json

@@ -45,6 +45,7 @@
     "is-ci": "^3.0.0",
     "isbinaryfile": "^4.0.6",
     "jest": "^26.6.3",
+    "jest-utils-lwc-internals": "link:./scripts/jest/utils",
     "lerna": "^4.0.0",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",

packages/@lwc/engine-server/jest.config.js

@@ -11,4 +11,7 @@ module.exports = {
     displayName: 'lwc-engine-server',
     roots: ['<rootDir>/src'],
     testEnvironment: 'node',
+    moduleNameMapper: {
+        '^lwc$': '<rootDir>/src/index.ts',
+    },
 };

packages/@lwc/engine-server/src/__tests__/fixtures.spec.ts

@@ -7,24 +7,38 @@
 
 import fs from 'fs';
 import path from 'path';
+
 import { rollup } from 'rollup';
 import prettier from 'prettier';
 import lwcRollupPlugin from '@lwc/rollup-plugin';
+import { testFixtureDir } from 'jest-utils-lwc-internals';
 
-const FIXTURE_DIR = path.join(__dirname, 'fixtures');
+jest.setTimeout(10_000 /* 10 seconds */);
 
-const DIST_DIRNAME = 'dist';
-const MODULE_DIRNAME = 'modules';
-const FIXTURE_NAMESPACE = 'x';
+async function compileFixture({ input, dirname }) {
+    const modulesDir = path.resolve(dirname, './modules');
+    const outputFile = path.resolve(dirname, './dist/compiled.js');
 
-const CONFIG_FILENAME = 'config.json';
-const COMPILER_ENTRY_FILENAME = 'fixture.js';
-const EXPECTED_HTML_FILENAME = 'expected.html';
+    const bundle = await rollup({
+        input,
+        external: ['lwc'],
+        plugins: [
+            lwcRollupPlugin({
+                modules: [
+                    {
+                        dir: modulesDir,
+                    },
+                ],
+            }),
+        ],
+    });
 
-const ONLY_FILENAME = '.only';
-const SKIP_FILENAME = '.skip';
+    await bundle.write({
+        file: outputFile,
+    });
 
-jest.setTimeout(10_000 /* 10 seconds */);
+    return outputFile;
+}
 
 function formatHTML(code: string): string {
     return prettier.format(code, {
@@ -34,95 +48,24 @@ function formatHTML(code: string): string {
 }
 
 describe('fixtures', () => {
-    const fixtures = fs.readdirSync(FIXTURE_DIR);
-
-    for (const caseName of fixtures) {
-        const caseTagName = `${FIXTURE_NAMESPACE}-${caseName}`;
-        const caseModuleName = `${FIXTURE_NAMESPACE}/${caseName}`;
-        const caseFolder = path.join(FIXTURE_DIR, caseName);
-
-        const fixtureFilePath = (fileName): string => {
-            return path.join(caseFolder, fileName);
-        };
-
-        const fixtureFileExists = (fileName): boolean => {
-            const filePath = fixtureFilePath(fileName);
-            return fs.existsSync(filePath);
-        };
-
-        const readFixtureFile = (fileName): string => {
-            const filePath = fixtureFilePath(fileName);
-            return fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : null;
-        };
-
-        const writeFixtureFile = (fileName, content): void => {
-            const filePath = fixtureFilePath(fileName);
-            fs.writeFileSync(filePath, content, { encoding: 'utf-8' });
-        };
-
-        const compileFixture = async () => {
-            const bundle = await rollup({
-                input: COMPILER_ENTRY_FILENAME,
-                plugins: [
-                    {
-                        name: 'fixture-resolver',
-                        resolveId(specifier) {
-                            if (specifier === COMPILER_ENTRY_FILENAME) {
-                                return COMPILER_ENTRY_FILENAME;
-                            }
-                        },
-                        load(specifier) {
-                            if (specifier === COMPILER_ENTRY_FILENAME) {
-                                return `export { default as ctor } from '${caseModuleName}';`;
-                            }
-                        },
-                    },
-                    {
-                        name: 'lwc-server-resolver',
-                        resolveId(specifier) {
-                            if (specifier === 'lwc') {
-                                const lwcServerRelativePath = path.relative(
-                                    fixtureFilePath(MODULE_DIRNAME),
-                                    path.resolve(__dirname, '../index')
-                                );
-
-                                return {
-                                    id: lwcServerRelativePath,
-                                    external: true,
-                                };
-                            }
-                        },
-                    },
-                    lwcRollupPlugin({
-                        modules: [
-                            {
-                                dir: fixtureFilePath(MODULE_DIRNAME),
-                            },
-                        ],
-                    }) as any,
-                ],
-            });
+    testFixtureDir(
+        {
+            root: path.resolve(__dirname, 'fixtures'),
+            pattern: '**/index.js',
+        },
+        async ({ filename, dirname }) => {
+            const configPath = path.resolve(dirname, 'config.json');
+
+            let config: any = {};
+            if (fs.existsSync(configPath)) {
+                config = require(configPath);
+            }
 
-            await bundle.write({
-                dir: fixtureFilePath(DIST_DIRNAME),
+            const compiledFixturePath = await compileFixture({
+                input: filename,
+                dirname,
             });
 
-            return fixtureFilePath(`${DIST_DIRNAME}/${COMPILER_ENTRY_FILENAME}`);
-        };
-
-        let testFn = it;
-        if (fixtureFileExists(ONLY_FILENAME)) {
-            testFn = (it as any).only;
-        } else if (fixtureFileExists(SKIP_FILENAME)) {
-            testFn = (it as any).skip;
-        }
-
-        testFn(`${caseName}`, async () => {
-            const compiledFixturePath = await compileFixture();
-
-            let expected = readFixtureFile(EXPECTED_HTML_FILENAME);
-            const config = JSON.parse(readFixtureFile(CONFIG_FILENAME) || '{}');
-
             // The LWC engine holds global state like the current VM index, which has an impact on
             // the generated HTML IDs. So the engine has to be re-evaluated between tests.
             // On top of this, the engine also checks if the component constructor is an instance of
@@ -135,20 +78,15 @@ describe('fixtures', () => {
                 module = require(compiledFixturePath);
             });
 
-            const actual = lwcEngineServer.renderComponent(
-                caseTagName,
-                module.ctor,
+            const result = lwcEngineServer.renderComponent(
+                module.tagName,
+                module.default,
                 config.props || {}
             );
 
-            if (!expected) {
-                // Write rendered HTML file if doesn't exist (ie new fixture).
-                expected = actual;
-                writeFixtureFile(EXPECTED_HTML_FILENAME, formatHTML(expected));
-            }
-
-            // Check rendered HTML.
-            expect(formatHTML(actual)).toEqual(formatHTML(expected));
-        });
-    }
+            return {
+                'expected.html': formatHTML(result),
+            };
+        }
+    );
 });

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-boolean';
+export { default } from 'x/attribute-boolean';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-aria/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-component-aria';
+export { default } from 'x/attribute-component-aria';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-component-global-html/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-component-global-html';
+export { default } from 'x/attribute-component-global-html';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic-escape/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-dynamic-escape';
+export { default } from 'x/attribute-dynamic-escape';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-dynamic/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-dynamic';
+export { default } from 'x/attribute-dynamic';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-global-html/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-global-html';
+export { default } from 'x/attribute-global-html';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-live-bindings/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-live-bindings';
+export { default } from 'x/attribute-live-bindings';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-static/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-static';
+export { default } from 'x/attribute-static';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-style/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attribute-style';
+export { default } from 'x/attribute-style';

packages/@lwc/engine-server/src/__tests__/fixtures/attributes-aria/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-attributes-aria';
+export { default } from 'x/attributes-aria';

packages/@lwc/engine-server/src/__tests__/fixtures/component/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-component';
+export { default } from 'x/component';

packages/@lwc/engine-server/src/__tests__/fixtures/computed/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-computed';
+export { default } from 'x/computed';

packages/@lwc/engine-server/src/__tests__/fixtures/delegates-focus/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-delegates-focus';
+export { default } from 'x/delegates-focus';

packages/@lwc/engine-server/src/__tests__/fixtures/for-each-block/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-for-each-block';
+export { default } from 'x/for-each-block';

packages/@lwc/engine-server/src/__tests__/fixtures/for-each-child-nested/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-for-each-child-nested';
+export { default } from 'x/for-each-child-nested';

packages/@lwc/engine-server/src/__tests__/fixtures/for-each-nested/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-for-each-nested';
+export { default } from 'x/for-each-nested';

packages/@lwc/engine-server/src/__tests__/fixtures/getter-class-list/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-getter-class-list';
+export { default } from 'x/getter-class-list';

packages/@lwc/engine-server/src/__tests__/fixtures/getter-is-connected/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-getter-is-connected';
+export { default } from 'x/getter-is-connected';

packages/@lwc/engine-server/src/__tests__/fixtures/if-block/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-if-block';
+export { default } from 'x/if-block';

packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot-content/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-if-conditional-slot-content';
+export { default } from 'x/if-conditional-slot-content';

packages/@lwc/engine-server/src/__tests__/fixtures/if-conditional-slot/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-if-conditional-slot';
+export { default } from 'x/if-conditional-slot';

packages/@lwc/engine-server/src/__tests__/fixtures/if-custom-element-child/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-if-custom-element-child';
+export { default } from 'x/if-custom-element-child';

packages/@lwc/engine-server/src/__tests__/fixtures/if-element-child/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-if-element-child';
+export { default } from 'x/if-element-child';

packages/@lwc/engine-server/src/__tests__/fixtures/iterator-block/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-iterator-block';
+export { default } from 'x/iterator-block';

packages/@lwc/engine-server/src/__tests__/fixtures/lifecycle-hooks/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-lifecycle-hooks';
+export { default } from 'x/lifecycle-hooks';

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dom-manual/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-lwc-dom-manual';
+export { default } from 'x/lwc-dom-manual';

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-dynamic/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-lwc-dynamic';
+export { default } from 'x/lwc-dynamic';

packages/@lwc/engine-server/src/__tests__/fixtures/method-get-attribute/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-method-get-attribute';
+export { default } from 'x/method-get-attribute';

packages/@lwc/engine-server/src/__tests__/fixtures/method-remove-attribute/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-method-remove-attribute';
+export { default } from 'x/method-remove-attribute';

packages/@lwc/engine-server/src/__tests__/fixtures/method-set-attribute/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-method-set-attribute';
+export { default } from 'x/method-set-attribute';

packages/@lwc/engine-server/src/__tests__/fixtures/methods-noop/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-methods-noop';
+export { default } from 'x/methods-noop';

packages/@lwc/engine-server/src/__tests__/fixtures/methods-unsupported/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-methods-unsupported';
+export { default } from 'x/methods-unsupported';

packages/@lwc/engine-server/src/__tests__/fixtures/rehydration/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-rehydration';
+export { default } from 'x/rehydration';

packages/@lwc/engine-server/src/__tests__/fixtures/slotchange/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-slotchange';
+export { default } from 'x/slotchange';

packages/@lwc/engine-server/src/__tests__/fixtures/slots-fallback/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-slots-fallback';
+export { default } from 'x/slots-fallback';

packages/@lwc/engine-server/src/__tests__/fixtures/slots-nested/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-slots-nested';
+export { default } from 'x/slots-nested';

packages/@lwc/engine-server/src/__tests__/fixtures/slots-unknown/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-slots-unknown';
+export { default } from 'x/slots-unknown';

packages/@lwc/engine-server/src/__tests__/fixtures/slots/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-slots';
+export { default } from 'x/slots';

packages/@lwc/engine-server/src/__tests__/fixtures/styles/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-styles';
+export { default } from 'x/styles';

packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation-escape/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-text-interpolation-escape';
+export { default } from 'x/text-interpolation-escape';

packages/@lwc/engine-server/src/__tests__/fixtures/text-interpolation/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-text-interpolation';
+export { default } from 'x/text-interpolation';

packages/@lwc/engine-server/src/__tests__/fixtures/text-static/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-text-static';
+export { default } from 'x/text-static';

packages/@lwc/engine-server/src/__tests__/fixtures/wire/index.js

@@ -0,0 +1,2 @@
+export const tagName = 'x-wire';
+export { default } from 'x/wire';