ReferenceError: viewport is not defined

[dakur]

Description

When I'm trying to use this plugin, I end up on ReferenceError: viewport is not defined error.

Expected behavior

It runs test.

Actual behavior

It fails running test.

Steps to reproduce the bug

1. add karma-viewport with your package manager
2. add viewport into frameworks array in karma.config.js
3. run test:

   /// <reference types="karma-viewport" />    
   viewport.set(1000, 1000);

Package versions

• karma-viewport: 1.0.7
• karma: 5.1.1

System information

• OS: Windows 10 (2004)
• Browser: karma-chrome-launcher@3.1.0, puppeteer@5.2.1 – Chrome or ChromiumHeadless through puppeteer as described in karma-chrome-launcher docs

[dakur]

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,
	});
};

[Martin Donath]

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.

[dakur]

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.

[dakur]

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.

[Martin Donath]

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

[dakur]

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. :-)

[Martin Donath]

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?

[Martin Donath]

I added a note in 4846275.

[dakur]

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.

[Martin Donath]

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