GithubHelp home page GithubHelp logo

Comments (20)

ollwenjones avatar ollwenjones commented on June 29, 2024 6

adding

Object.defineProperty(window, 'CSS', {value: mock()});

to my jestGlobalMocks.ts seems to have cleared up the CSS is not defined issue for me.

from jest-preset-angular.

zack9433 avatar zack9433 commented on June 29, 2024 3

I add some mock

Object.defineProperty(document, 'doctype', {
  value: '<!DOCTYPE html>'
});
Object.defineProperty(window, 'getComputedStyle', {
  value: () => {
    return {
      display: 'none',
      appearance: ['-webkit-appearance']
    };
  }
});

and warning messages

console.warn node_modules/@angular/material/bundles/material.umd.js:146
    Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

  console.warn node_modules/@angular/material/bundles/material.umd.js:159
    Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

are gone

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024 1

You're probably hitting this: jestjs/jest#3299
I'll be implementing new testEnvironment for this preset, so I can keep that in mind and add support for doctype. If you don't have time, you can create your own testEnvironment (copy-paste existing one and adjust it as I commented in mentioned issue)

Use it in your jest config like:

{
  "testEnvironment": "path/to/your/custom_test_env.js"
}

from jest-preset-angular.

luke-emmental avatar luke-emmental commented on June 29, 2024

thanks reply! It is harder than I thought. I'm trying

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

Yea it's not a regular thing you do with Jest, but it's definitely possible to adjust :)

from jest-preset-angular.

luke-emmental avatar luke-emmental commented on June 29, 2024

I try it. but not working
vmDom.js

const _util = require('jest-util');
const FakeTimers = _util.FakeTimers, installCommonGlobals = _util.installCommonGlobals;
const mock = require('jest-mock');
const jsdom = require('jsdom');
const path = require('path');
const fs = require('fs');
const process = require('process');


const maincss = fs.readFileSync(path.normalize(`${path.parse(__dirname).dir}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css`), 'utf8');
const vm = require('vm');

class JSDOMEnvironment {


  constructor(config) {
    this.browser = new jsdom.JSDOM(`<!DOCTYPE html><head></head><body></body><html>`, {
      features : {
        FetchExternalResources : ['script', 'style', 'link'],
        QuerySelector : true
      },
      url: config.testURL
    });

    const _global = (this.global = this.browser.window);


    const document = _global.document;
    let head = document.getElementsByTagName('head')[0];
    let style = document.createElement("style");
    style.type = 'text/css';
    style.innerHTML = maincss;
    head.appendChild(style);
   

    installCommonGlobals(_global, config.globals);

    this.moduleMocker = new mock.ModuleMocker(_global);
    this.fakeTimers = new FakeTimers(_global, this.moduleMocker, config);
  }

  dispose() {
    if (this.fakeTimers) {
      this.fakeTimers.dispose();
    }
    if (this.global) {
      this.global.close();
    }
    this.global = null;
    this.browser = null;
    this.fakeTimers = null;
  }

  runScript(script) {

    if (this.global) {

      return script.runInContext(vm.createContext(this.global));
    }
    return null;
  }
}
// new JSDOMEnvironment({testURL: 'https://github.com/letsrock-today/mock-local-storage'});

module.exports = JSDOMEnvironment;

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

See how it's done here: https://github.com/Micromeritics/jest-environment-jsdom-11.0.0. You can also send them a PR and use it.

from jest-preset-angular.

luke-emmental avatar luke-emmental commented on June 29, 2024

Thanks @thymikee . I will try.

from jest-preset-angular.

michahell avatar michahell commented on June 29, 2024

Also hitting this, after first having hit the bug with merging moduleNameMapper from a preset + jest.config :( (seems to get fixed in jestjs/jest#3689 though).

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

@luke-emmental can you send a PR to example in this repo with usage if Material module, so I can test new environment?

from jest-preset-angular.

michahell avatar michahell commented on June 29, 2024

Hmm. maybe there is a way to mock material components, seems like the material design guys would do that to test their own nested components 🤔

from jest-preset-angular.

ollwenjones avatar ollwenjones commented on June 29, 2024

Same deal here.

from jest-preset-angular.

michahell avatar michahell commented on June 29, 2024

nice @ollwenjones ! I can at least get JEST to pass a basic component spec using material design icons. I do still get the following warnings / errors:

console.warn node_modules/@angular/material/bundles/material.umd.js:146
    Current document does not have a doctype. This may cause some Angular Material components not to behave as expected.

  console.warn node_modules/@angular/material/bundles/material.umd.js:159
    Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

  console.log node_modules/@angular/material/bundles/material.umd.js:13754
    Loading icon set URL: [object Object] failed: SyntaxError

  console.log node_modules/@angular/material/bundles/material.umd.js:14108
    Error retrieving icon: Unable to find icon with the name "security-outline"

which are probably still related to the Jsdom document type setting

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

@zack9433 nice! Thank you for sharing :)

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

Would you mind adding PR to the example, so it's there by default?
https://github.com/thymikee/jest-preset-angular/blob/master/example/src/jestGlobalMocks.ts

from jest-preset-angular.

michahell avatar michahell commented on June 29, 2024

Awesome! going to try that right now, thanks for sharing @zack9433 !

from jest-preset-angular.

michahell avatar michahell commented on June 29, 2024

But I think this has the same effect as using the
{provide: MATERIAL_SANITY_CHECKS, useValue: false}, provider in your
TestBed.configureTestingModule() setup, no ?

I'm still getting the following warning types though:

console.log node_modules/@angular/material/bundles/material.umd.js:12149
Loading icon set URL: [object Object] failed: SyntaxError

console.log node_modules/@angular/material/bundles/material.umd.js:12485
Error retrieving icon: Unable to find icon with the name "security-outline"

from jest-preset-angular.

zack9433 avatar zack9433 commented on June 29, 2024

@thymikee sorry for lately reply. I already created a PR for this issue.
@michahell I think you can try to load a fake icon like this

from jest-preset-angular.

thymikee avatar thymikee commented on June 29, 2024

Fixed with #61

from jest-preset-angular.

denniske avatar denniske commented on June 29, 2024

I think the following is still missing in jestGlobalMocks.ts:

Object.defineProperty(window, 'CSS', {value: mock()});

from jest-preset-angular.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.