Jest expected and receive identical, but it still fails

Question

I have this test :

    it('Should return the date correctly formatted', async () => {
      const page = await newE2EPage();
      await page.setContent('<dsd-datepicker></dsd-datepicker>');
      const input = await page.find('dsd-datepicker .duet-date__input');
      await input.press('1');
      await input.press('2');
      await input.press('/');
      await input.press('0');
      await input.press('1');
      await input.press('/');
      await input.press('2');
      await input.press('0');
      await input.press('2');
      await input.press('2');
      const value = await input.getProperty('value');

      expect(value).toBe('12 / 01 / 2022z');
    });

It fails like this :

if I remove the "z" I added at the end it fails without any explanation :

I'm using stencjs e2e that uses pupperteer, I am wondering if this has to do with encoding, it just seems weird.

Answer 1

I tried to reproduce this, but wasn't able to with a 'plain' index tag. With the following component:

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true,
})
export class MyComponent {
  render() {
    return <input/>;
  }
}

I created the following test

describe('my-component', () => {
  it('renders', async () => {
    const page = await newE2EPage();

    await page.setContent('<my-component></my-component>');
    // the '>>>' pierces the shadow dom 
    const input = await page.find('my-component >>> input');

    await input.press('1');
    await input.press('2');
    await input.press('/');
    await input.press('0');
    await input.press('1');
    await input.press('/');
    await input.press('2');
    await input.press('0');
    await input.press('2');
    await input.press('2');

    const value = await input.getProperty('value');

    expect(value).toBe('12/01/2022');
  });
});

but the test passes for me. My tests are different from yours in two key regards though:

1. I'm using the standard input tag instead of dsd-datepicker
2. The value you're expecting has spaces around the '/' characters (which I'd guess is related to the datepicker).

I'd wager that this is related to dsd-datepicker but without seeing a full reproduction case, it's a little tricky to diagnose. But taking a closer look at dsd-datepicker is the first thing I'd do here. Not to say it isn't Stencil, but something interesting is happening here.

My shot in the dark guess/debugging suggestion would be to remove the calls await input.press('/'); in your test (and update the assertion accordingly).

• [ ] Does it fail with expect(value).toBe('12012022z');?
• [ ] Does is pass with expect(value).toBe('12012022');?
• [ ] If yes to the above, what happens if we reintroduce just one of those slashes?
• [ ] If no to the above, maybe there's some string trimming to be done here?

That might point you in the right direction to determine if this is a dsd-datepicker issue or a Stencil issue.

Some additional stats:

• Node Version 16.11.0
• npm Version 8.0.0
• Stencil version 2.13.0