Web Component / HtmlElement : unit testing

I'm trying to test a web component.
Here is my project structure :

├── package.json

├── src

│   ├── app.js

│   └── index.html

└── test

    └── hello-world-test.html

Here is my working code :

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

I'm trying to test that web component with web-component-tester.
I installed the utility globally :

npm install -g web-component-tester

I declared it in the package.json file :

"devDependencies": {

    "web-component-tester": "^6.9.0"

}

then, I wrote my test in the test folder and saved it to hello-world-test.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="app.js"></script>

</head>

<body>

    <test-fixture id="hello-world-fixture">

            <hello-world></hello-world>

    </test-fixture>

    <script>

        suite('<hello-world>', function(){

            let component = document.querySelector('hello-world');



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Finally, I typed :

wct --npm

Then obtained the following error in Chrome :

Here is the result in Chrome

What am I missing to run the test correctly ?
The only decent materials I've found are this one and that one but they are outdated.

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

add a comment |

I'm trying to test a web component.
Here is my project structure :

├── package.json

├── src

│   ├── app.js

│   └── index.html

└── test

    └── hello-world-test.html

Here is my working code :

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

I'm trying to test that web component with web-component-tester.
I installed the utility globally :

npm install -g web-component-tester

I declared it in the package.json file :

"devDependencies": {

    "web-component-tester": "^6.9.0"

}

then, I wrote my test in the test folder and saved it to hello-world-test.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="app.js"></script>

</head>

<body>

    <test-fixture id="hello-world-fixture">

            <hello-world></hello-world>

    </test-fixture>

    <script>

        suite('<hello-world>', function(){

            let component = document.querySelector('hello-world');



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Finally, I typed :

wct --npm

Then obtained the following error in Chrome :

Here is the result in Chrome

What am I missing to run the test correctly ?
The only decent materials I've found are this one and that one but they are outdated.

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

add a comment |

I'm trying to test a web component.
Here is my project structure :

├── package.json

├── src

│   ├── app.js

│   └── index.html

└── test

    └── hello-world-test.html

Here is my working code :

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

I'm trying to test that web component with web-component-tester.
I installed the utility globally :

npm install -g web-component-tester

I declared it in the package.json file :

"devDependencies": {

    "web-component-tester": "^6.9.0"

}

then, I wrote my test in the test folder and saved it to hello-world-test.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="app.js"></script>

</head>

<body>

    <test-fixture id="hello-world-fixture">

            <hello-world></hello-world>

    </test-fixture>

    <script>

        suite('<hello-world>', function(){

            let component = document.querySelector('hello-world');



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Finally, I typed :

wct --npm

Then obtained the following error in Chrome :

Here is the result in Chrome

What am I missing to run the test correctly ?
The only decent materials I've found are this one and that one but they are outdated.

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

I'm trying to test a web component.
Here is my project structure :

├── package.json

├── src

│   ├── app.js

│   └── index.html

└── test

    └── hello-world-test.html

Here is my working code :

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

I'm trying to test that web component with web-component-tester.
I installed the utility globally :

npm install -g web-component-tester

I declared it in the package.json file :

"devDependencies": {

    "web-component-tester": "^6.9.0"

}

then, I wrote my test in the test folder and saved it to hello-world-test.html:

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="app.js"></script>

</head>

<body>

    <test-fixture id="hello-world-fixture">

            <hello-world></hello-world>

    </test-fixture>

    <script>

        suite('<hello-world>', function(){

            let component = document.querySelector('hello-world');



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Finally, I typed :

wct --npm

Then obtained the following error in Chrome :

Here is the result in Chrome

What am I missing to run the test correctly ?
The only decent materials I've found are this one and that one but they are outdated.

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

class HelloWorld extends HTMLElement {

    connectedCallback () {

      this.innerHTML = 'Hello, World!'

    }

}

customElements.define('hello-world', HelloWorld);

<!doctype html>

<html>



<head>

    <meta charset="utf-8">

    <script src="app.js"></script>

</head>



<body>

    <hello-world></hello-world>

</body>



</html>

html unit-testing web-component web-component-tester

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

edited Nov 30 '18 at 5:35

artkoshelev

650418

edited Nov 30 '18 at 5:35

artkoshelev

650418

edited Nov 30 '18 at 5:35

artkoshelev

650418

asked Nov 24 '18 at 23:13

Loo

asked Nov 24 '18 at 23:13

Loo

asked Nov 24 '18 at 23:13

Loo

add a comment |

2 Answers
2

active

oldest

votes

There are many errors :

First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include
wct-browser-legacy in their devDependencies, which is a package that
contains only the client-side javascript necessary for executing WCT
tests in an npm-based environment. WCT will attempt to identify which
package provides the client-side code by checking for compatible
packages in the following order of preference: wct-mocha,
wct-browser-legacy and web-component-tester. If you want to specify
which package provides WCT client-side code, use the
--wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

You should add the type="module" to that import

You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

Your test should be modified as following :

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Please, notice that I used the fixture's id and put the component initialisation in the setup function.

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

1

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

1

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

add a comment |

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy

$ npm install --save-dev 

  @webcomponents/webcomponentsjs 

  @polymer/test-fixture 

  wct-mocha 

  mocha 

  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

Your HTML needs to change a little and you need to make sure mocha is a direct dependency, since wct-mocha will not autoload. You'd also need to do that with chai if you're using chai assertions and @polymer/test-fixture if you use those.

<head>

  <meta charset="utf-8">

  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 

  <script src="../node_modules/mocha/mocha.js"></script> 

  <script src="../node_modules/chai/chai.js"></script> 

  <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script> 

  <script src="../node_modules/wct-mocha/wct-mocha.js"></script> 

</head>

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463201%2fweb-component-htmlelement-unit-testing%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

There are many errors :

First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include
wct-browser-legacy in their devDependencies, which is a package that
contains only the client-side javascript necessary for executing WCT
tests in an npm-based environment. WCT will attempt to identify which
package provides the client-side code by checking for compatible
packages in the following order of preference: wct-mocha,
wct-browser-legacy and web-component-tester. If you want to specify
which package provides WCT client-side code, use the
--wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

You should add the type="module" to that import

You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

Your test should be modified as following :

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Please, notice that I used the fixture's id and put the component initialisation in the setup function.

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

1

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

1

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

add a comment |

There are many errors :

First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include
wct-browser-legacy in their devDependencies, which is a package that
contains only the client-side javascript necessary for executing WCT
tests in an npm-based environment. WCT will attempt to identify which
package provides the client-side code by checking for compatible
packages in the following order of preference: wct-mocha,
wct-browser-legacy and web-component-tester. If you want to specify
which package provides WCT client-side code, use the
--wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

You should add the type="module" to that import

You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

Your test should be modified as following :

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Please, notice that I used the fixture's id and put the component initialisation in the setup function.

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

1

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

1

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

add a comment |

There are many errors :

First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include
wct-browser-legacy in their devDependencies, which is a package that
contains only the client-side javascript necessary for executing WCT
tests in an npm-based environment. WCT will attempt to identify which
package provides the client-side code by checking for compatible
packages in the following order of preference: wct-mocha,
wct-browser-legacy and web-component-tester. If you want to specify
which package provides WCT client-side code, use the
--wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

You should add the type="module" to that import

You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

Your test should be modified as following :

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Please, notice that I used the fixture's id and put the component initialisation in the setup function.

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

There are many errors :

First, please read the whole documentation as in the last paragraph it's clear that for those who use npm you need an additional dependency through the wctPackageName :

Components which wish to support npm-based installation should include
wct-browser-legacy in their devDependencies, which is a package that
contains only the client-side javascript necessary for executing WCT
tests in an npm-based environment. WCT will attempt to identify which
package provides the client-side code by checking for compatible
packages in the following order of preference: wct-mocha,
wct-browser-legacy and web-component-tester. If you want to specify
which package provides WCT client-side code, use the
--wct-package-name flag or wctPackageName option in wct.conf.json with the npm package name.

So you will need to add wct-browser-legacy in your devDependencies

Giving your project structure, you are including the app.js as if it was at the same level. It should be ../src/app.js.

You should add the type="module" to that import

You declared a fixture but didn't take profit of it through the function fixture

If I had to correct your code :

The command should be wct --npm -wct-package-name=wct-browser-legacy. Or even better create a wct.conf.js file with the following information :

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

Your test should be modified as following :

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

Please, notice that I used the fixture's id and put the component initialisation in the setup function.

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

module.exports = {

    npm:true,

    verbose: true,

    plugins: {

        local: {

            browsers: ["chrome"]

        }

    },

    wctPackageName: "wct-browser-legacy"

};

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <script src="../node_modules/web-component-tester/browser.js"></script>

    <script src="../src/app.js"></script>

</head>

<body>

    <test-fixture id="helloWorldFixture">

        <template>

            <hello-world>

            </hello-world>

        </template>

    </test-fixture>

    <script>

        suite('<hello-world>', () => {

            let component;

            setup(() => {

                component = fixture('helloWorldFixture');

            });



            test('contains hello world string ?', () => {

                let index = component.innerText.indexOf('Hello');

                assert.isAtLeast(index, 0);

            });

        });

    </script>

</body>

</html>

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

edited Nov 25 '18 at 20:23

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

answered Nov 25 '18 at 17:32

Zakaria

9,8761875120

1

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

1

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

add a comment |

1

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

1

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

your WCT knowledge seems to be pretty big - may I ask you to review an "alternative" e.g. karma with some settings... here are the details open-wc.org/recommendations/testing.html would love your feedback :)

– daKmoR
Jan 2 at 2:38

@daKmoR thank you ! I will check this out ;)

– Zakaria
Jan 2 at 21:00

add a comment |

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy

$ npm install --save-dev 

  @webcomponents/webcomponentsjs 

  @polymer/test-fixture 

  wct-mocha 

  mocha 

  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

<head>

  <meta charset="utf-8">

  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 

  <script src="../node_modules/mocha/mocha.js"></script> 

  <script src="../node_modules/chai/chai.js"></script> 

  <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script> 

  <script src="../node_modules/wct-mocha/wct-mocha.js"></script> 

</head>

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

add a comment |

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy

$ npm install --save-dev 

  @webcomponents/webcomponentsjs 

  @polymer/test-fixture 

  wct-mocha 

  mocha 

  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

<head>

  <meta charset="utf-8">

  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 

  <script src="../node_modules/mocha/mocha.js"></script> 

  <script src="../node_modules/chai/chai.js"></script> 

  <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script> 

  <script src="../node_modules/wct-mocha/wct-mocha.js"></script> 

</head>

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

add a comment |

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy

$ npm install --save-dev 

  @webcomponents/webcomponentsjs 

  @polymer/test-fixture 

  wct-mocha 

  mocha 

  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

<head>

  <meta charset="utf-8">

  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 

  <script src="../node_modules/mocha/mocha.js"></script> 

  <script src="../node_modules/chai/chai.js"></script> 

  <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script> 

  <script src="../node_modules/wct-mocha/wct-mocha.js"></script> 

</head>

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

Zakaria's answer is good, but I suggest ditching wct-browser-legacy in favor of wct-mocha as it is lighter-weight and doesn't have out-of-date dependencies like old version of lodash and sinon etc.

See the README for full details: https://www.npmjs.com/package/wct-mocha

tl;dr version:

$ npm rm --save wct-browser-legacy

$ npm install --save-dev 

  @webcomponents/webcomponentsjs 

  @polymer/test-fixture 

  wct-mocha 

  mocha 

  chai

You shouldn't need to specify it, but if you have wct.conf.js file you should change an existing wctPackageName entry to:

wctPackageName: "wct-mocha"

<head>

  <meta charset="utf-8">

  <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> 

  <script src="../node_modules/mocha/mocha.js"></script> 

  <script src="../node_modules/chai/chai.js"></script> 

  <script src="../node_modules/@polymer/test-fixture/test-fixture.js"></script> 

  <script src="../node_modules/wct-mocha/wct-mocha.js"></script> 

</head>

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

edited Feb 25 at 19:31

answered Feb 25 at 19:23

Brendan Baldwin

answered Feb 25 at 19:23

Brendan Baldwin

answered Feb 25 at 19:23

Brendan Baldwin

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg