search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.61k stars 791 forks source link

Start project tests fail #355

Closed cramhead closed 6 years ago

cramhead commented 6 years ago

Stencil version:

@stencil/core@0.0.8-12

I'm submitting a:

Current behavior: When running tests on a git starter project tests fail

Expected behavior: When running tests on a git starter project tests should pass

Steps to reproduce:

  1. git clone https://github.com/ionic-team/stencil-app-starter my-app
  2. cd my-app
  3. git remote rm origin
  4. npm install
  5. npm test

Related code: Code is unchanged from the checkout of commit 82614a429f469404810df91c2593d7e05300e6e2

Other information: This is my first experience in playing with stencil so I'm affaid I can provide too much insight The npm test output is

FAIL src/components/app-profile/app-profile.spec.ts ● app-profile › rendering › should not render any content if there is not a match

No registered components found

  at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3765:31)
  at step (node_modules/@stencil/core/testing/index.js:3726:23)
  at Object.next (node_modules/@stencil/core/testing/index.js:3707:53)
  at fulfilled (node_modules/@stencil/core/testing/index.js:3698:58)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

● app-profile › rendering › should not render any content if there is not a match

TypeError: Cannot read property '__testPlatform' of undefined

  at node_modules/@stencil/core/testing/index.js:3779:24
      at new Promise (<anonymous>)
  at Object.flush (node_modules/@stencil/core/testing/index.js:3778:12)
  at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:68:60)
  at step (src/components/app-profile/app-profile.spec.ts:32:23)
  at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
  at src/components/app-profile/app-profile.spec.ts:7:71
      at new Promise (<anonymous>)
  at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
  at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:65:90)
      at new Promise (<anonymous>)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

● app-profile › rendering › should work with a name passed

No registered components found

  at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3765:31)
  at step (node_modules/@stencil/core/testing/index.js:3726:23)
  at Object.next (node_modules/@stencil/core/testing/index.js:3707:53)
  at fulfilled (node_modules/@stencil/core/testing/index.js:3698:58)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

● app-profile › rendering › should work with a name passed

TypeError: Cannot set property 'match' of undefined

  at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:80:39)
  at step (src/components/app-profile/app-profile.spec.ts:32:23)
  at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
  at src/components/app-profile/app-profile.spec.ts:7:71
      at new Promise (<anonymous>)
  at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
  at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:76:67)
      at new Promise (<anonymous>)
      at <anonymous>
  at process._tickCallback (internal/process/next_tick.js:188:7)

PASS src/components/app-home/app-home.spec.ts PASS src/components/my-app/my-app.spec.ts

Test Suites: 1 failed, 2 passed, 3 total Tests: 2 failed, 3 passed, 5 total Snapshots: 0 total Time: 3.2s Ran all test suites. npm ERR! Test failed. See above for more details.

jeremiecarlson commented 6 years ago

Same, I created an issue inside of the starter project also. https://github.com/ionic-team/stencil-app-starter/issues/33

jgw96 commented 6 years ago

Hello everyone! Thanks for opening an issue with us, we will look into this.

kensodemann commented 6 years ago

Something broke between 0.0.8-8 and 0.0.8-9 I will have a look at the diffs and see if anything stands out

kensodemann commented 6 years ago

It appears that this commit here started the troubles: https://github.com/ionic-team/stencil/commit/3919da93cc5215d1ff3416304aaea86a469e606b#diff-b47411bee200fed3efa31850ddd3b310

Unfortunately, it is a fairly large commit.

kensodemann commented 6 years ago

More info. The way that Stencil transpiles the sources has changed and the meta-data is no longer being output:

0.0.8-8:

"use strict";
exports.__esModule = true;
var StencilTesting = require("@stencil/core/testing");
var h = StencilTesting.h;
var t = StencilTesting.t;
var publicPath = "build/";
var Context = {};
var core_1 = require("@stencil/core");
var router_1 = require("@stencil/router");
var AppProfile = /** @class */ (function () {
    function AppProfile() {
    }
    AppProfile.prototype.render = function () {
        if (this.match && this.match.params.name) {
            return (h("div", null,
                h("p", null,
                    "Hello! My name is ",
                    this.match.params.name,
                    ". My name was passed in through a route param!")));
        }
    };
    AppProfile.metadata = { "tagNameMeta": "app-profile", "stylesMeta": { "$": { "cmpRelativePaths": ["app-profile.scss"], "absolutePaths": ["/Users/kensodemann/Projects/Issues/my-app/src/components/app-profile/app-profile.scss"] } }, "hostMeta": {}, "encapsulation": 0, "componentClass": "AppProfile", "membersMeta": { "match": { "memberType": 1, "attribType": { "text": "MatchResults", "typeReferences": { "MatchResults": { "referenceLocation": "import", "importReferenceLocation": "@stencil/router" } } }, "attribName": "match", "propType": 1 } }, "eventsMeta": [], "listenersMeta": [], "propsWillChangeMeta": [], "propsDidChangeMeta": [] };
    return AppProfile;
}());
exports.AppProfile = AppProfile;

0.0.8-9:

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target,key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
exports.__esModule = true;
var StencilTesting = require("@stencil/core/testing");
var h = StencilTesting.h;
var t = StencilTesting.t;
var publicPath = "build/";
var Context = {};
var core_1 = require("@stencil/core");
var router_1 = require("@stencil/router");
var AppProfile = /** @class */ (function () {
    function AppProfile() {
    }
    AppProfile.prototype.render = function () {
        if (this.match && this.match.params.name) {
            return (h("div", null,
                h("p", null,
                    "Hello! My name is ",
                    this.match.params.name,
                    ". My name was passed in through a route param!")));
        }
    };
    __decorate([], AppProfile.prototype, "match");
    AppProfile = __decorate([], AppProfile);
    return AppProfile;
}());
exports.AppProfile = AppProfile;

Note the missing AppProfile.metadata = ... line

jthoms1 commented 6 years ago

This is fixed with commit 68dcc847dc6d4d1bbb4349f09c10e39f67f2be63

mattdsteele commented 6 years ago

@jthoms1 - I'm still seeing this behavior with the new 0.0.9-2, which appears to include your commit. Same error:

    it('should build', async () => {
        const element = await render({
            components: [Navigation],
            html: `<my-nav></my-nav>`
        });
        await flush(element);
    });
  ● my-component › should build

    No registered components found

      at Object.<anonymous> (../../node_modules/@stencil/core/testing/index.js:3967:31)
      at step (../../node_modules/@stencil/core/testing/index.js:3928:23)
      at Object.next (../../node_modules/@stencil/core/testing/index.js:3909:53)
      at fulfilled (../../node_modules/@stencil/core/testing/index.js:3900:58)
      at process._tickCallback (internal/process/next_tick.js:109:7)
jeremiecarlson commented 6 years ago

@jthoms1 @jgw96 Re-cloned fresh with 0.0.9-3 still seeing same issues. Here is my console output if that helps:

npm run test

> @stencil/starter@0.0.1 test /stencil-starter
> jest --no-cache

 FAIL  src/components/app-profile/app-profile.spec.ts
  ● app-profile › rendering › should not render any content if there is not a match

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3974:31)
      at step (node_modules/@stencil/core/testing/index.js:3935:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3916:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3907:58)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should not render any content if there is not a match

    TypeError: Cannot read property '__testPlatform' of undefined

      at node_modules/@stencil/core/testing/index.js:3988:24
          at new Promise (<anonymous>)
      at Object.flush (node_modules/@stencil/core/testing/index.js:3987:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:68:60)
      at step (src/components/app-profile/app-profile.spec.ts:32:23)
      at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
      at src/components/app-profile/app-profile.spec.ts:7:71
          at new Promise (<anonymous>)
      at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:65:90)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should work with a name passed

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3974:31)
      at step (node_modules/@stencil/core/testing/index.js:3935:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3916:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3907:58)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

  ● app-profile › rendering › should work with a name passed

    TypeError: Cannot set property 'match' of undefined

      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:80:39)
      at step (src/components/app-profile/app-profile.spec.ts:32:23)
      at Object.next (src/components/app-profile/app-profile.spec.ts:13:53)
      at src/components/app-profile/app-profile.spec.ts:7:71
          at new Promise (<anonymous>)
      at Object.<anonymous>.__awaiter (src/components/app-profile/app-profile.spec.ts:3:12)
      at Object.<anonymous> (src/components/app-profile/app-profile.spec.ts:76:67)
          at new Promise (<anonymous>)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

 PASS  src/components/app-home/app-home.spec.ts
 PASS  src/components/my-app/my-app.spec.ts

Test Suites: 1 failed, 2 passed, 3 total
Tests:       2 failed, 3 passed, 5 total
Snapshots:   0 total
Time:        5.47s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @stencil/starter@0.0.1 test: `jest --no-cache`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @stencil/starter@0.0.1 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
mattdsteele commented 6 years ago

@jthoms1 Is there a way to verify this? I checked out Stencil from Git, built and npm linked it into a stencil-component-starter project, and tests are still failing with the same "No registered components found" error.

jthoms1 commented 6 years ago

I worked with @kensodemann. He also tested the fix. Your approach should be an appropriate test, but not sure why you would still be getting the error unless you are still somehow using an older version of stencil. We might cut a new release today.

mattdsteele commented 6 years ago

The tests in stencil-component-starter are still failing with @stencil/core@0.1.1-0:

C:\Users\IGEN261\code\github\stencil-component-starter>npm ls @stencil/core
my-component@0.0.1 C:\Users\IGEN261\code\github\stencil-component-starter
`-- @stencil/core@0.1.1-0
> my-component@0.0.1 test C:\Users\IGEN261\code\github\stencil-component-starter
> jest --no-cache

 FAIL  src\components\my-component\my-component.spec.ts
  my-component
    √ should build (6ms)
    rendering
      × should work without parameters (17ms)
      × should work with a first name (6ms)
      × should work with a last name (2ms)
      × should work with both a first and a last name (6ms)

  ● my-component › rendering › should work without parameters

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3977:31)
      at step (node_modules/@stencil/core/testing/index.js:3938:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3919:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3910:58)
      at process._tickCallback (internal/process/next_tick.js:109:7)

Is there any other information I can provide to help reproduce this?

kensodemann commented 6 years ago

@jthoms1 - I can confirm that something does not work with the tests with the stencil-component-starter, but I do not get the same results as @mattdsteele

Instead, I get a timeout waiting for the render() to return:

~/Projects/Stencil/stencil-component-starter (master *): npm test

> my-component@0.0.1 test /Users/kensodemann/Projects/Stencil/stencil-component-starter
> jest --no-cache

  console.log src/components/my-component/my-component.spec.ts:56
    the render is starting

 FAIL  src/components/my-component/my-component.spec.ts (7.334s)
  my-component
    ✓ should build (3ms)
    rendering
      ✕ should work without parameters (5573ms)

  ● my-component › rendering › should work without parameters

    Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

      at node_modules/jest-jasmine2/build/queue_runner.js:64:21
      at ontimeout (timers.js:475:11)
      at tryOnTimeout (timers.js:310:5)
      at Timer.listOnTimeout (timers.js:270:5)

  ● my-component › rendering › should work without parameters

    TypeError: Cannot read property 'textContent' of undefined

      at Object.<anonymous> (src/components/my-component/my-component.spec.ts:69:28)
          at new Promise (<anonymous>)
          at <anonymous>

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        7.796s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

The transpile itself works fine.

Update: created https://github.com/ionic-team/stencil/issues/381

kensodemann commented 6 years ago

I just noticed that @mattdsteele is running on Windows, so I grabbed my Winders machine and tried it. I get the same issue as @mattdsteele there:

C:\Users\ken\Projects\Issues\stencil-component-starter>npm test

> my-component@0.0.1 test C:\Users\ken\Projects\Issues\stencil-component-starter
> jest --no-cache

 FAIL  src\components\my-component\my-component.spec.ts
  my-component
    √ should build (2ms)
    rendering
      × should work without parameters (4ms)
      × should work with a first name (1ms)
      × should work with a last name
      × should work with both a first and a last name

  ● my-component › rendering › should work without parameters

    No registered components found

      at Object.<anonymous> (node_modules/@stencil/core/testing/index.js:3977:31)
      at step (node_modules/@stencil/core/testing/index.js:3938:23)
      at Object.next (node_modules/@stencil/core/testing/index.js:3919:53)
      at fulfilled (node_modules/@stencil/core/testing/index.js:3910:58)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Hacking jest.preprocessor.js shows that there is no meta-data included in the transpiled compiled component, but only on Windows, not on Mac (have not tried it on my Linux machine yet)

Update: tried on my Linux machine, results same as Mac (not surprisingly), so this seems to be a Windows only issue at this point.

kensodemann commented 6 years ago

The timeout I get on the Mac (two comments above) appears to be related to the shadow parameter. I will create a different issue about that. If I remove that parameter from the component's meta-data, the tests all run fine on the Mac.

jgw96 commented 6 years ago

Hey all! I am going to close this as a duplicate of https://github.com/ionic-team/stencil/issues/381 since that seems to be the core issue going on here. Thanks for using Stencil!

Puertas commented 6 years ago

Hi Team,

Test are still failing on windows, I tried with my components and also with the start-component-project. No need to have the "shadow" flag, for me are failing always on windows.

Both are working fine on Mac and Linux but same tests fail on windows, seems like an issue with the renderer, on those test I have a "No register components found" on windows machines, but working nice on Mac/Linux.

Could you please take a look?

Thanks for your hard work.

Kr, Jose