Element is not defined #32

NullVoxPopuli · 2018-06-10T20:47:32Z

import { setupAppForTesting } from '@bigtest/react';
import {
  Interactor,
  clickable, fillable, blurrable
} from '@bigtest/interactor';

import Application from '@ui/application';


class TodoMVCPage extends Interactor {
  clickFirstTodo = clickable('ul.todo-list li:first-child');
  fillName = fillable('ul.todo-list li:first-child input');
}

describe('Acceptance | todo editing', () => {
  let app;

  beforeEach(async () => {
    app = await setupAppForTesting(Application);
  });

  it('the initial todo can be edited', () => {
    const page = new TodoMVCPage()
      .clickFirstTodo();

    const edits = app.find('.editable');
    const classes = edits[0].classList;

    expect(classes).to.contain('editing');
  });

and then I get this error:

  1) Acceptance | todo editing
       the initial todo can be edited:
     ReferenceError: Element is not defined
      at new Interactor (node_modules/@bigtest/interactor/dist/umd/index.js:855:59)
      at new TodoMVCPage (tests/acceptance/todo-editing-test.ts:8:9)
      at Context.it (tests/acceptance/todo-editing-test.ts:25:18)
      at <anonymous>

wwilsman · 2018-06-10T20:56:19Z

We definitely need to get some better documentation for this. But I think one issue is here:

class TodoMVCPage extends Interactor {

The correct way to use the helpers clickable, fillable, etc. is to use the class decorator instead of extending the Interactor class directly.

@interactor class TodoMVCPage {

But the other issue I see is with Element. It is assumed to be a global because this package is meant to be consumed in a DOM environment where Element is indeed a global.

Or maybe there is something weird with the UMD module, and we need to explicitly use global.Element.

NullVoxPopuli · 2018-06-10T21:13:41Z

hmm. I'm running the tests from the cli, so.. I don't know if Element would exist or not? I know in typescript, there is an HTMLElement

wwilsman · 2018-06-10T22:17:02Z

HTMLElement extends Element (MDN Docs), so I'm still unsure of why you get an Element is not defined error.

It's not really the preprocessor (typescript) that would determine this, but the environment in which your code is run. This package is meant to be consumed in a browser environment, where the DOM API is fully available.

You mention the CLI, so I'm inclined to think you may be using JSDom or some other environment that simulates the DOM. If that's the case, then this may be an issue with that library properly mocking the Element class.

NullVoxPopuli · 2018-06-10T23:04:18Z

Oh, I'm not currently using jsdom, that much be the issue, I'll add that. It bothers me how many disjoint parts this all requires

…

On Sun, Jun 10, 2018, 6:17 PM Wil Wilsman ***@***.***> wrote: HTMLElement extends Element (MDN Docs <https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement>), so I'm still unsure of why you get an Element is not defined error. It's not really the preprocessor (typescript) that would determine this, but the environment in which your code is run. This package is meant to be consumed in a browser environment, where the DOM API is fully available. You mention the CLI, so I'm inclined to think you may be using JSDom or some other environment that *simulates* the DOM. If that's the case, then this may be an issue with that library properly mocking the Element class. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#32 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAMJanLAyjIv3d-BOxKvhbJw1__sFMUpks5t7ZrfgaJpZM4Uh3cs> .

NullVoxPopuli · 2018-06-11T01:12:24Z

j/k, I have jsdom, doing this in my setup file:

import { configure } from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
import { JSDOM } from 'jsdom';

configure({ adapter: new Adapter() });

const jsdom = new JSDOM(`
  <!doctype html>
  <html>
    <body></body><
  /html>
`);

const { window } = jsdom;

(global as any).window = window;
(global as any).document = window.document;

NullVoxPopuli · 2018-06-11T01:15:28Z

the tree at the commit: https://github.com/NullVoxPopuli/react-vs-ember/tree/adcdbab76a44508d6c9e9c0b85cb8d3c06de3b75
if you feel like playing around, it's just yarn test

Robdel12 · 2018-06-11T01:45:53Z

Ah yea, we built BigTest specifically to get away from jsdom since it's a faked environment (not a real browser). We're working on getting guides up @wwilsman has a blog post that will be out in the next few days (in review! :D) so this will be explained better soon.

You'll need something like Karma to launch a browser. I'm looking at the repo you linked to and I'm not 100% sure how to integrate Karma with Parcel yet. I'll have to get back to you on that.

Also, dope repo! 😁

NullVoxPopuli · 2018-06-11T10:44:14Z

Ah yea, we built BigTest specifically to get away from jsdom since it's a faked environment (not a real browser). We're working on getting guides up @wwilsman has a blog post that will be out in the next few days (in review! :D) so this will be explained better soon.

yay!!

You'll need something like Karma to launch a browser. I'm looking at the repo you linked to and I'm not 100% sure how to integrate Karma with Parcel yet. I'll have to get back to you on that.

that'd be cool. but, but why does anything need to know about parcel / webpack / etc? why not just use ts-node directly to evaluate the test files?

Also, dope repo!

Thanks!! :-D

Robdel12 · 2018-06-11T14:51:14Z

but, but why does anything need to know about parcel / webpack / etc?

This is eventually what we want but I think we might have to write our own runner like Karma. We use Karma because it runs the app in an iframe (isolated) and handles launching browsers for us. So it has to know about the build tool because that's how Karma works. It handles bundling all the test files for you

NullVoxPopuli · 2018-06-11T15:53:21Z

@Robdel12 are there any apps that have everything bigtestjs already setup that I can look up in the mean time? want to see if I can just figure it out based on something that's already working.

Robdel12 · 2018-06-11T16:00:12Z

Yea no problem! One of our client apps is 100% open source and uses BigTest: https://github.com/folio-org/ui-eholdings/tree/master/tests but that might be harder to follow since Stripes-CLI abstracts the karma/webpack config out.

Here's an example I did with spectacle: https://github.com/Robdel12/spectacle-boilerplate/commit/66e14b0197625e7d82109c53aa221d468dcc4daa

You'll want to ignore some parts that @bigtest/react takes care of for us now. Basically ignore tests/utils/helpers.js in that commit

NullVoxPopuli · 2018-06-11T20:25:08Z

so, I aalllmost have karma working with typescript and a test-only webpack config. :-
not sure where this is coming from though: "str": "You need to include some adapter that implements karma.start method!"

https://github.com/NullVoxPopuli/react-vs-ember/tree/ddfb7ce79ff26a25aca6e29450f0184694cd3779/testing/react

Robdel12 · 2018-06-12T16:32:55Z

Hey @NullVoxPopuli just want to let you know we're taking a look at the repo you've linked. I think there's some funky things going on with Karma & typescript. We haven't ever used typescript so this is going to be a little bit of a learning experience.

NullVoxPopuli · 2018-06-12T16:45:56Z

it's all good. I think, using the master branch, webpack can handle everything, rather than karma-typescript.
I have teh configuration mostly working ™️ , but I just don't have a karma.start method

NullVoxPopuli · 2018-06-13T12:41:17Z

I got things working. I have a test-only webpack file that I'm running everything though.

Robdel12 · 2018-06-14T19:27:30Z

Hm, I'm wondering what could be an actionable takeaway from this? The obvious is we need to step up our docs / guide game.

NullVoxPopuli · 2018-06-14T22:17:21Z

I think the issue was that karma-typescript doesn't work, and that using webpack for typescript transpiling is the way to go.

triage-new-issues bot added the triage label Jun 10, 2018

NullVoxPopuli closed this as completed Jun 14, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Element is not defined #32

Element is not defined #32

NullVoxPopuli commented Jun 10, 2018

wwilsman commented Jun 10, 2018

NullVoxPopuli commented Jun 10, 2018

wwilsman commented Jun 10, 2018

NullVoxPopuli commented Jun 10, 2018 via email

NullVoxPopuli commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018 •

edited

Loading

Robdel12 commented Jun 12, 2018

NullVoxPopuli commented Jun 12, 2018

NullVoxPopuli commented Jun 13, 2018

Robdel12 commented Jun 14, 2018

NullVoxPopuli commented Jun 14, 2018

Element is not defined #32

Element is not defined #32

Comments

NullVoxPopuli commented Jun 10, 2018

wwilsman commented Jun 10, 2018

NullVoxPopuli commented Jun 10, 2018

wwilsman commented Jun 10, 2018

NullVoxPopuli commented Jun 10, 2018 via email

NullVoxPopuli commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018

Robdel12 commented Jun 11, 2018

NullVoxPopuli commented Jun 11, 2018 • edited Loading

Robdel12 commented Jun 12, 2018

NullVoxPopuli commented Jun 12, 2018

NullVoxPopuli commented Jun 13, 2018

Robdel12 commented Jun 14, 2018

NullVoxPopuli commented Jun 14, 2018

NullVoxPopuli commented Jun 11, 2018 •

edited

Loading