ReferenceError: viewport is not defined about karma-viewport HOT 10 CLOSED

make sure to call the respective functions from the setup hooks of your test framework or from within your tests (e.g. beforeEach, describe etc.)

I thought about this too, but testing frameworks have different names for functions. For mocha and jasmine it's it, for others it's test, which is why I tried to describe it without getting into too much detail. However, if more people stumble over this, we can adjust it

from karma-viewport.

Here is full karma.config.js:

const webpackConfig = require('./webpack.config');

process.env.CHROMIUM_BIN = require('puppeteer').executablePath();
module.exports = (config) => {
	config.set({
		basePath: '',
		files: [
			{
				pattern: 'src/**/*.spec.ts',
				watched: false,
			},
		],

		frameworks: ['mocha', 'viewport'],
		client: {
			mocha: {
				timeout: 30000,
			},
		},

		browserNoActivityTimeout: 60000,

		mime: {
			'text/x-typescript': ['ts', 'tsx'],
		},

		preprocessors: {
			'src/**/*.spec.ts': ['webpack'],
		},
		webpack: {
			mode: 'development',
			devtool: 'inline-source-map',
			resolve: {
				extensions: ['.ts', '.tsx', '.js', '.json'],
			},
			module: webpackConfig.module,
		},

		reporters: ['dots'],

		port: 9876,
		colors: true,
		logLevel: config.LOG_INFO,
		autoWatch: true,
		singleRun: false,

		browsers: ['ChromiumHeadless'],
		concurrency: Infinity,
	});
};

from karma-viewport.

I just tested karma-viewport in a mint project and it works just fine. It's likely related to your project configuration, but really hard to debug this remotely. I don't see any immediate problems from the configuration you posted, as it's basically the same as the integration test. However, the devil is in the details. My advice would be to check whether other plugins that add variables to the global scope work as expected. If not, it could be this project, otherwise it's something more general.

from karma-viewport.

Thank you for your reply! Looks like you don't use puppeteer, so it may be problem in there. I'll try to figure it out.

from karma-viewport.

Hm, it does not seem to be the problem. I've created completely new testing project and ran:

yarn init && yarn add --dev karma karma-chrome-launcher karma-viewport

In my package.json I have (basically just added scripts):

{
	"name": "test-test",
	"version": "0.0.1",
	"main": "index.js",
	"license": "MIT",
	"devDependencies": {
		"karma": "^5.2.2",
		"karma-chrome-launcher": "^3.1.0",
		"karma-viewport": "^1.0.7"
	},
	"scripts": {
		"test": "karma start karma.conf.js"
	}
}

I've created test.spec.js:

viewport.set(1000, 50);

And reduced karma.config.js to:

module.exports = (config) => {
	config.set({
		files: [
			'test.spec.js',
		],
		frameworks: ['viewport'],
		browsers: ['Chrome'],
	});
};

Then, when I run yarn run test, I still end up with given message:

I was not sure if it is not just my Git Bash problem so I ran it on cmd.exe as well as PowerShell, but the result is still the same.

from karma-viewport.

Okay, that's weird. Unfortunately, I don't have the time to debug this with you together, but I think the best idea would be to check out some projects that use this library successfully and see how they've done it. Might I suggest:

• https://github.com/aposin/ng-aquila
• https://github.com/niksy/advertol-context-media-query

from karma-viewport.

Thank you, suggestions helped. I've fiddled with https://github.com/niksy/advertol-context-media-query and the problem appeared: you can not use viewport too early – which basically means outside of a function. So this will make an error:

viewport.set(x, y);

describe('...', () => {
  it('...', () => {});
});

but this works:

beforeEach(() => {
  viewport.set(x, y);
});

// and/or

describe('...', () => {
  it('...', () => {
    viewport.set(x, y);
  });
});

It kind of makes sense (it's like working with DOM before DOMContentLoaded), but it's very confusing for us newcomers who do not know how internals of this testing ecosystem work. It would be worthy to mention it in the docs definitely. :-)

from karma-viewport.

Ah great you found the issue. I was assuming that you'd use it inside of a function, but yes, this makes sense. It's also great we've documented it here for future users.

I guess this issue can be closed then?

from karma-viewport.

I added a note in 4846275.

from karma-viewport.

makes sure to call the respective functions from the setup hooks of your test framework or from within your tests

Not pretty sure I would understand this test slang, but maybe it's just me test newbie. :-) Some examples would help me understand:

make sure to call the respective functions from the setup hooks of your test framework or from within your tests (e.g. beforeEach, describe etc.)

Yes, this issue can be closed. Thank you.

from karma-viewport.