Trouble using Limiting Targets

[kyletov]

Hey, I'm getting trouble compiling happo test files that's set up for limiting targets. I'm following the example given here: https://docs.happo.io/docs/examples#limiting-targets

The version of happo I'm running right now is the rc version mentioned from #168.

Below is the happo config and test file:

// .happo.js
const { RemoteBrowserTarget } = require('happo.io');
const craWebpackConfig = require('react-scripts/config/webpack.config');
const path = require('path');
const MAX_HEIGHT = 10000;

module.exports = {
  renderWrapperModule: path.resolve(__dirname, 'src/tests/happo/happo-wrapper.jsx'),
  prerender: false,

  apiKey: process.env.HAPPO_API_KEY,
  apiSecret: process.env.HAPPO_API_SECRET,

  customizeWebpackConfig: config => {
    // Use the built-in webpack config provided by create-react-app
    config.module = craWebpackConfig('development').module;
    config.module.rules.push({
      resolve: {
        alias: {
          shared: path.resolve(__dirname, 'src/shared'),
          "config.js": path.resolve(__dirname, 'src/config.js'),
          css: path.resolve(__dirname, 'src/css'),
          pages: path.resolve(__dirname, 'src/pages'),
        }
      },
    });
    return config;
  },

  targets: {
    'chrome-small': new RemoteBrowserTarget('chrome', {
      viewport: '576x768',
      maxHeight: MAX_HEIGHT,
    }),
  },
};

Update: Updated the file to match the syntax from #76.

// about-happo.js
import React from 'react';
import About from 'pages/about';

export const aboutPage = {
  render: () => <About />,
  targets: ['chrome-small'],
};

This is the error I am getting:

ModuleError: Module Error (from ./node_modules/eslint-loader/index.js):
Line 7:10:  Parsing error: Unexpected token, expected ";"

I also have a similar problem using conditionally applied stylesheets because of this as well, so any help with this would be great!

Update: I realized I got the syntax wrong in my test file after looking at #76. I updated the file to match the syntax, but when I try running happo, it successfully runs, but the report afterwards says no screenshots were taken.

[trotzig]

Can you send me a log of the happo run? I'm having trouble reproducing this issue.

For reference, below is what my log looks like when I have this happo file:

import React from 'react';

export const FooBar = {
  render: () => <button />,
  targets: ['chrome-large'],
};

log:

$ happo run --only FooBar
No [sha] provided. A temporary one will be used in place: "dev-f15f9eae7507196721a5".
Searching for happo test files... ✓ 1 found (59.5ms)
Creating bundle... Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
✓ (3963.4ms)
Generating screenshots in 6 targets...
No examples found for target firefox-large, skipping
  - firefox-large ✓ (5.4ms)
No examples found for target safari-large, skipping
  - safari-large ✓ (4.7ms)
No examples found for target edge-large, skipping
  - edge-large ✓ (4.3ms)
No examples found for target ie-large, skipping
  - ie-large ✓ (6.0ms)
No examples found for target ios-safari, skipping
  - ios-safari ✓ (0.2ms)
  - chrome-large ✓ (11251.5ms)
Uploading report for dev-f15f9eae7507196721a5-FooBar... ✓ (1116.9ms)
View results at https://happo.io/a/8/p/8/report/dev-f15f9eae7507196721a5-FooBar
Done dev-f15f9eae7507196721a5-FooBar
✨  Done in 17.29s.

[kyletov]

This is what I got when I ran npm run happo run --only aboutPage:

Log:

$ npm run happo run --only aboutPage
npm WARN invalid config only="aboutPage"

> NODE_ENV=development happo "run"

No [sha] provided. A temporary one will be used in place: "dev-b74a1b4d3a6c19a1969f".
Searching for happo test files... ✓ 1 found (59.8ms)
Creating bundle... ✓ (4402.8ms)
Generating screenshots in 6 targets...
  - chrome-0768 ✓ (6257.3ms)
  - chrome-1200 ✓ (6319.0ms)
  - chrome-0992 ✓ (11668.2ms)
  - chrome-1440 ✓ (11794.3ms)
  - chrome-0576 ✓ (12590.1ms)
  - chrome-1920 ✓ (12712.2ms)
Uploading report for dev-b74a1b4d3a6c19a1969f... ✓ (692.5ms)
View results at https://happo.io/a/396/p/488/report/dev-b74a1b4d3a6c19a1969f
Done dev-b74a1b4d3a6c19a1969f

I replaced my targets with these targets in the happo config file:

// Chrome
    'chrome-0576': new RemoteBrowserTarget('chrome', {
      viewport: '576x768',
      maxHeight: MAX_HEIGHT,
    }),
    'chrome-0768': new RemoteBrowserTarget('chrome', {
      viewport: '768x768',
      maxHeight: MAX_HEIGHT,
    }),
    'chrome-0992': new RemoteBrowserTarget('chrome', {
      viewport: '992x768',
      maxHeight: MAX_HEIGHT,
    }),
    'chrome-1200': new RemoteBrowserTarget('chrome', {
      viewport: '1200x768',
      maxHeight: MAX_HEIGHT,
    }),
    'chrome-1440': new RemoteBrowserTarget('chrome', {
      viewport: '1440x768',
      maxHeight: MAX_HEIGHT,
    }),
    'chrome-1920': new RemoteBrowserTarget('chrome', {
      viewport: '1920x768',
      maxHeight: MAX_HEIGHT,
    }),

[trotzig]

Thanks! I think I've found the bug now. It's the prerender: false that isn't working well with filtering of targets for individual examples. I'm working on a fix.

[trotzig]

The fix is now deployed to Chrome and Firefox workers. It will be deployed to other browser targets as well, but I'll hold off on that until we know this works well. Let me know how it goes!

[kyletov]

The fix is now deployed to Chrome and Firefox workers. It will be deployed to other browser targets as well, but I'll hold off on that until we know this works well. Let me know how it goes!

Yup, it looks like it's working now. Tested with both browsers you specified above and I also added other test files that hits all targets and everything works nicely. Thanks!

Also, a question about this command you ran happo run --only FooBar, how can I enable this --only config? Would really help with adding new happo test files to the project and making sure they work individually without needing to run every test as a whole every time.

[trotzig]

The --only flag matches on filename, so if your examples file is about-happo.js you can call

npm run happo -- run --only about

Notice the double dash before the --only flag. Without it, npm thinks the --only flag belongs to them.

[kyletov]

The --only flag matches on filename, so if your examples file is about-happo.js you can call

npm run happo -- run --only about

Notice the double dash before the --only flag. Without it, npm thinks the --only flag belongs to them.

Ahh alright, it works! Thanks for the help!

Let me know when the limiting targets bug is fixed for the Safari workers as well.

[trotzig]

Sorry about the delay, this change is now deployed to all browser targets (including Safari).

[kyletov]

No worries, and thanks for the update! Will let you know if I run into any issue regarding this in the future 👍