New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Shadow DOM Causes Tests to Hang #381

Closed
kensodemann opened this Issue Dec 22, 2017 · 4 comments

Comments

6 participants
@kensodemann
Copy link
Contributor

kensodemann commented Dec 22, 2017

Stencil version:

 @stencil/core@0.1.1-0

I'm submitting a:

Current behavior:

If you clone the stencil-component-starter and run the tests, they hang. The tests work in stencil-app-starter. Comparing the two repos, the big difference is that the component starter uses shadow DOM whereas the app starter does not.

Expected behavior:

No hangy hangy in the testy testy.

Steps to reproduce:

  1. clone the stencil-component-starter repo
  2. npm i; npm run build; npm test
  3. drink coffee while tests hang until timeout
  4. remove shadow: true parameter from the one component in this repo
  5. npm test
  6. rejoice as tests work

Related code:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;

  render() {
    return (
      <div>
        Hello, World! I'm {this.first} {this.last}
      </div>
    );
  }
}

Other information:

@kensodemann kensodemann referenced this issue Dec 22, 2017

Closed

Start project tests fail #355

0 of 2 tasks complete

@jgw96 jgw96 added the tests label Dec 27, 2017

@jgw96 jgw96 added the bug label Jan 5, 2018

@jgw96 jgw96 referenced this issue Jan 9, 2018

Closed

Testing shadow dom component #311

0 of 2 tasks complete
@mattdsteele

This comment has been minimized.

Copy link
Contributor

mattdsteele commented Jan 16, 2018

As info, I wanted to see if this was related to JSDom's (lack of) support for Shadow DOM, so I tried setting up Jest to run against Headless Chrome and Puppeteer, via this guide.

Repo here: https://github.com/mattdsteele/stencil-component-puppeteer

On a Mac, I'm seeing the same hanging failures for any tests that use render(), as described above. This happens regardless of whether I set shadow to true or false.

@rolandjitsu

This comment has been minimized.

Copy link

rolandjitsu commented Jan 17, 2018

I'm getting the same issue. It seems like render() always returns null, no matter if I have only a <div></div> in the {html} prop and no components or if I have components.

@adamdbradley adamdbradley added this to the 0.4.0 milestone Jan 24, 2018

@adamdbradley adamdbradley modified the milestones: 0.4.0, 0.5.0, 0.6.0 Feb 8, 2018

@adamdbradley adamdbradley modified the milestones: 0.6.0 - import collections, 0.10.0 - Testing Feb 19, 2018

@silentHoo

This comment has been minimized.

Copy link

silentHoo commented Jun 5, 2018

@adamdbradley Are there any updates on that issue since 0.6.0?

@jthoms1 jthoms1 added this to Backlog 🤖 in Stencil via automation Sep 10, 2018

@adamdbradley

This comment has been minimized.

Copy link
Member

adamdbradley commented Oct 23, 2018

No longer applicable with latest version

Stencil automation moved this from Backlog 🤖 to Done 🎉 Oct 23, 2018

@ionic-team ionic-team locked as resolved and limited conversation to collaborators Oct 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.