nighttrax / mugshot Goto Github PK

Mugshot imports the looks-same adapter here but doesn't define it in dependencies. It's listed in devDependencies though.

Either not import it and require it in the constructor, or add it to dependencies.

Also consider adding eslint-plugin-import.

Should ignore:

tests/
.npmignore
.eslintrc
.travis.yml

Need

As a user
I want clear error messages
So that I can quickly identify what the problem is.

Deliverables

Given that there is no baseline
And `acceptFirstBaseline` is set to `false`
When I run mugshot
Then it will throw with an error telling me that the baseline is missing.

Solution

Don't call the done callback with no error when acceptFirstBaseline is false.

if (acceptFirstBaseline) {
  done(null, {isEqual: true, baseline: baselinePath});
} else {
  done(new Error('Baseline missing'));
}

TODO

• write failing test
• make it pass

Need

As a user
When a visual test fails
I want to see the baseline name and the selector
So that I know what went wrong.

Problem

Now it shows a message like this:
AssertionError: expected baseline and screenshot of { Object (name, selector) } to be identical

Solution

Log the actual name and selector.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency chai to ~4.5.0
• chore(deps): update dependency eslint to ~8.57.0
• chore(deps): update dependency jest to ~29.7.0
• chore(deps): update dependency playwright to ~1.46.0
• chore(deps): update dependency puppeteer to ~19.11.0
• chore(deps): update dependency webdriverio to ~7.36.0
• chore(deps): update pnpm/action-setup action to v2.4.1
• fix(deps): update dependency @algolia/client-search to ~4.24.0
• fix(deps): update dependency @types/node to ~18.19.0
• fix(deps): update dependency fs-extra to ~11.2.0
• fix(deps): update dependency typedoc-plugin-markdown to ~3.17.0
• fix(deps): update dependency webpack to ~5.93.0
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update codecov/codecov-action action to v4
• chore(deps): update dependency @tdd-buffet/jest-config to v6
• chore(deps): update dependency chai to v5
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency lerna to v8
• chore(deps): update dependency puppeteer to v23
• chore(deps): update dependency strong-mock to v9
• chore(deps): update pnpm/action-setup action to v4
• fix(deps): update dependency @algolia/client-search to v5
• fix(deps): update dependency @tsconfig/docusaurus to v2
• fix(deps): update dependency @types/node to v20
• fix(deps): update dependency clsx to v2
• fix(deps): update dependency docusaurus-plugin-typedoc to v1
• fix(deps): update dependency pixelmatch to v6
• fix(deps): update dependency prism-react-renderer to v2
• fix(deps): update dependency typedoc-plugin-markdown to v4
• fix(deps): update docusaurus monorepo to v3 (major) (@docusaurus/core, @docusaurus/module-type-aliases, @docusaurus/preset-classic)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update dependency @jimp/core to ~0.22.0
• fix(deps): update dependency @jimp/custom to ~0.22.0
• fix(deps): update dependency @jimp/plugin-color to ~0.22.0
• fix(deps): update dependency docusaurus-plugin-typedoc to ~0.22.0
• fix(deps): update dependency typedoc to ~0.26.0
• fix(deps): update docusaurus monorepo to ~2.4.0 (@docusaurus/core, @docusaurus/module-type-aliases, @docusaurus/preset-classic)
• chore(deps): update dependency webdriverio to v9
• fix(deps): update dependency @mdx-js/react to v3
• fix(deps): update dependency typescript to v5
• fix(deps): update react monorepo to v18 (major) (@types/react, @types/react-dom, react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I'm currently using mugshot for visual regression testing with webdriverio.
However, I could not find a working way to change the threshold of the comparison.

I know that the PixelDifferOptions include the threshold, however, there is no documentation about how to use it. I cannot inject it into the mugshot constructor, I cannot change the mugshots threshold via PNGDiffer since it doesn't have the required attribute.

So I am asking for a constructor, that takes the PixelDiffer insteaf of a constructor that doesn't seem to use the PixelDiffers threshold.
If it does already do so, then a documentation about how to use it or where to use it would be beneficial in order to use mugshot properly.

Here is the little test I'm running with webdriverio and chai.

it('visual regression tests', async () => {
await browser.setWindowSize(1280, 1024);
await browser.url('/?action=setTitle');
await browser.pause(1000);
const differ = new PixelDiffer({threshold: 1});
const mugshot = new Mugshot(
new BrowserScreenshotter(
new WebdriverIOAdapter(browser)
),
new FsStorage('./screenshots/title-tests'),
{ createMissingBaselines: true},
);
const result = await mugshot.check('title-test');
assert.isTrue(result.matches, 'title matches');
})

Need

As a user
I want good error reporting
So that I can get quick feedback on where my program is doing stuff wrong.

Deliverables

• An integration test suite that checks that all errors are returned through the .test() callback.
• Unit tests for the WebdriverIO adapter that check that all errors are returned through the callbacks.

Solution

Stub all of the dependencies to throw errors and check that they're returned through the callbacks.

We want to have mugshot independent from its adapters.

Need

As a developer
I want to use temporary files
When testing a package

Solution

Use tmp.
Test the package with a recursive rootDirectory.

Add a test that requires Mugshot from index.js

Move mugshot-webdriverio and mugshot-looks-same to devDev.

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

It would be really cool to be able to use this tool together with Cypress as this is IMO currently the best tool out there to write tests in the browser.

There are other open source solutions for it already (for example https://github.com/jaredpalmer/cypress-image-snapshot) and many commercial ones. This one seems to be the better choice overall though.
For a list of currently available visual diff tools for Cypress see this: https://docs.cypress.io/plugins/directory#visual-testing

Would you consider adding a Cypress adapter to this library?

Need

As a user
I want Mugshot to work correctly straight out of the box
So that I can quickly run my tests.

Problem

Given that there is no `visual-tests` folder
When I run mugshot
Then it will throw with an error for each fixture telling me that there is no such file or directory.

Eg:
Error: ENOENT: no such file or directory, mkdir 'tests/visual/visual-test/tooltip'

Deliverables

Fix the problem.

Solution

Use mkdirp instead of fs.mkdir.