WIP: src/components/__tests__: use snapshot test for testing icon rendering

[maceksimon]

Add a common test command testIcon that makes use of snapshot command to visually test rendered icon.
Replace individual icon tests with the common test across component test specs.

[tmszi]

My opinion that tests are failed (number of image pixels are different) under Mozilla Firefox web browser, because that scrollbar width size is different across web browsers and rendered image size will be different (I solved similar issue in the past). Solution is disable scrollbar before running tests (I think we have this example in our test code).

[tmszi]

With git reset --hard 2e155ff699ede420aadc8178dfa78153251ebbe0 and interactively tested BannerChallengeDescription.cy.js component test I got this message:

wrap<i.q-icon.notranslate.material-icons>
26
taskMatching image snapshot, Object{3}
(uncaught exception)CypressError: Cypress detected that you returned a promise from a command while also invoking one or more cy commands in that promise. The command that returned the promise was: > cy.task() The cy command you invoked inside the promise was: > cy.log() Because Cypress commands are already promise-like, you don't need to wrap them or return your own promise. Cypress will resolve your command with whatever the final Cypress command yields. The reason this is an error instead of a warning is because Cypress internally queues commands serially whereas Promises execute as soon as they are invoked. Attempting to reconcile this would prevent Cypress from ever resolving.

Make code simple as possible, please.

[tmszi]

BannerChallengeDescription.cy.js component test (icon image snapshot) passed across different web browsers.

Refactored and simplified testIcon cy command func with increased timeout to 4 seconds.

Cypress.Commands.add('testIcon', ({ element, name }) => {
  cy.get(element[0]).matchImageSnapshot(name, {
    failureThreshold: 0.1,
    failureThresholdType: 'percent',
    timeout: 4000,
    customDiffConfig: { threshold: 0.4 },
    screenshotsFolder: 'test/cypress/snapshots',
    retries: 2,
  });
});

Which tests you are identify as the problematic tests?

[maceksimon]

Updated with the simplified example.
Letting the tests re-run.
Currently, on local tests, I get error from ListCardProgress and SliderProgress. Both are related to malformed snapshot files, returning:
TypeError: The "target" argument must be an instance of Buffer or Uint8Array. Received null