fix: colorio.js patch mocking CSS #4456

gaiety-deque · 2024-05-10T16:33:57Z

Adds patch-package as suggested in the issue this PR fixes. The goal is to allow window.CSS to be mocked null in situations such as using JSdom.

Tests cover a version that is patched and one that is unpatched to demonstrate the patch truly fixes the issue.

fixes: #4400

Developer Notes/Questions for review:

Someone mentioned the patch step should not be postinstall, what should it be instead?
For test coverage purposes it's useful to keep an unpatched version, currently this is done manually in patches/color.unpatched.js but perhaps there's a better way
It's a bit gross modifying so many pre-compiled dist files
- Instead of a patch, we could pull in colorjs.io as a submodule and build it ourselves, unsure how to propagate that to consumers of axe-core however
- Perhaps this is fine and I could document how to update the patch in the future

Bumps the npm-low-risk group with 9 updates in the / directory: | Package | From | To | | --- | --- | --- | | [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) | `7.24.4` | `7.24.5` | | [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) | `7.24.4` | `7.24.5` | | [@babel/runtime-corejs3](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime-corejs3) | `7.24.4` | `7.24.5` | | [clean-jsdoc-theme](https://github.com/ankitskvmdam/clean-jsdoc-theme) | `4.2.18` | `4.3.0` | | [colorjs.io](https://github.com/LeaVerou/color.js) | `0.4.3` | `0.5.0` | | [core-js](https://github.com/zloirock/core-js/tree/HEAD/packages/core-js) | `3.36.1` | `3.37.0` | | [jsdoc](https://github.com/jsdoc/jsdoc) | `4.0.2` | `4.0.3` | | [selenium-webdriver](https://github.com/SeleniumHQ/selenium) | `4.19.0` | `4.20.0` | | [typescript](https://github.com/Microsoft/TypeScript) | `5.4.4` | `5.4.5` | Updates `@babel/core` from 7.24.4 to 7.24.5 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.5/packages/babel-core) Updates `@babel/preset-env` from 7.24.4 to 7.24.5 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.5/packages/babel-preset-env) Updates `@babel/runtime-corejs3` from 7.24.4 to 7.24.5 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.24.5/packages/babel-runtime-corejs3) Updates `clean-jsdoc-theme` from 4.2.18 to 4.3.0 - [Release notes](https://github.com/ankitskvmdam/clean-jsdoc-theme/releases) - [Changelog](https://github.com/ankitskvmdam/clean-jsdoc-theme/blob/master/CHANGELOG.md) - [Commits](https://github.com/ankitskvmdam/clean-jsdoc-theme/commits) Updates `colorjs.io` from 0.4.3 to 0.5.0 - [Release notes](https://github.com/LeaVerou/color.js/releases) - [Commits](color-js/color.js@v0.4.3...v0.5.0) Updates `core-js` from 3.36.1 to 3.37.0 - [Release notes](https://github.com/zloirock/core-js/releases) - [Changelog](https://github.com/zloirock/core-js/blob/master/CHANGELOG.md) - [Commits](https://github.com/zloirock/core-js/commits/v3.37.0/packages/core-js) Updates `jsdoc` from 4.0.2 to 4.0.3 - [Release notes](https://github.com/jsdoc/jsdoc/releases) - [Changelog](https://github.com/jsdoc/jsdoc/blob/4.0.3/CHANGES.md) - [Commits](jsdoc/jsdoc@4.0.2...4.0.3) Updates `selenium-webdriver` from 4.19.0 to 4.20.0 - [Release notes](https://github.com/SeleniumHQ/selenium/releases) - [Commits](SeleniumHQ/selenium@selenium-4.19.0...selenium-4.20.0) Updates `typescript` from 5.4.4 to 5.4.5 - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.4.4...v5.4.5) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-low-risk - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-low-risk - dependency-name: "@babel/runtime-corejs3" dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-low-risk - dependency-name: clean-jsdoc-theme dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-low-risk - dependency-name: colorjs.io dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-low-risk - dependency-name: core-js dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-low-risk - dependency-name: jsdoc dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-low-risk - dependency-name: selenium-webdriver dependency-type: direct:development update-type: version-update:semver-minor dependency-group: npm-low-risk - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch dependency-group: npm-low-risk ... Signed-off-by: dependabot[bot] <support@github.com>

package.json

patches/colorjs.io+0.5.0.patch

patches/color.unpatched.js

patches/colorjs.io+0.4.5.patch

…5c7381

patching colorio.js with optional chaining for `CSS?.supports` Refs: #4400

This reverts commit 0dd9bb5.

.eslintignore

WilcoFiers · 2024-05-20T10:04:10Z

Gruntfile.js

@@ -6,12 +6,14 @@ camelcase: ["error", {"properties": "never"}]
 module.exports = function (grunt) {
  'use strict';

+  grunt.loadNpmTasks('grunt-exec');


I don't think I said it needed to be in grunt :P. We did a good while back agree not to add more grunt tasks if we could at all avoid it. It seems viable to put this work in prebuild / predevelop scripts instead. Did you try that @gaiety-deque? If that was more difficult I can live with a Grunt solution, but if we can avoid these extra dependencies + more grunt tasks I think that's the way to go on this.

wilco and I believe marque is to blame because it is animated This fixes the `all-rules` check, particularly on Firefox. We believe the issue is because marque has a moving bounding client rect, leading to inconsistent results. So instead we set the motion to none for a consistent testing environment. --- To see that it works, I've run the CI tests on this branch five times. It only failed on one unrelated flakey test this does not address. Also, #4456 finally builds after many consistent test failures in the same place in a row after rebasing on this change. We can see this test failing on other branches, such as `develop` in places like this: https://app.circleci.com/pipelines/github/dequelabs/axe-core/6332/workflows/b3e2a293-c89b-4201-898d-1c6c64ee2764 which shows it has nothing to do with the other PR.

…lorjs-patch

addressed

package.json

test/core/patch.js

package.json

addressed change requests

WilcoFiers

Got a question

package.json

…lorjs-patch

## [4.10.0](v4.9.1...v4.10.0) (2024-07-29) ### Features - **new-rule:** summary elements must have an accessible name ([#4511](#4511)) ([0d8a99e](0d8a99e)), closes [#4510](#4510) ### Bug Fixes - **all-rules:** fix flakey all-rules firefox test ([#4467](#4467)) ([3f13aa1](3f13aa1)) - **aria-allowed-attr:** allow aria-multiline=false for element with contenteditable ([#4537](#4537)) ([f019068](f019068)) - **aria-allowed-attr:** allow aria-required=false when normally not allowed ([#4532](#4532)) ([2e242e1](2e242e1)) - **aria-prohibited-attr:** allow aria-label/ledby on decendants of widget ([#4541](#4541)) ([07c5d91](07c5d91)) - **aria-roledescription:** keep disabled with { runOnly: 'wcag2a' } ([#4526](#4526)) ([5b4cb9d](5b4cb9d)), closes [#4523](#4523) - **autocomplete-valid:** incomplete for invalid but safe values ([#4500](#4500)) ([e31a974](e31a974)), closes [#4492](#4492) - **build:** limit locales to valid files when using the --all-lang option ([#4486](#4486)) ([d3db593](d3db593)), closes [#4485](#4485) - colorio.js patch mocking CSS ([#4456](#4456)) ([3ef9353](3ef9353)), closes [#4400](#4400) - correct typos in texts ([#4499](#4499)) ([11fad59](11fad59)) - **landmark-unique:** follow spec, aside -> landmark ([#4469](#4469)) ([e32f803](e32f803)), closes [#4460](#4460) - **required-attr:** allow aria-valuetext on slider instead of valuenow ([#4518](#4518)) ([135898b](135898b)), closes [#4515](#4515) This PR was opened by a robot 🤖 🎉

dbjorge previously requested changes May 10, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

patches/colorjs.io+0.5.0.patch Outdated Show resolved Hide resolved

patches/color.unpatched.js Outdated Show resolved Hide resolved

straker reviewed May 13, 2024

View reviewed changes

patches/colorjs.io+0.4.5.patch Outdated Show resolved Hide resolved

patches/colorjs.io+0.4.5.patch Outdated Show resolved Hide resolved

straker added 2 commits May 14, 2024 14:10

install colorjs.io 0.4.3 exactly

d391a0c

Merge branch 'develop' into dependabot/npm_and_yarn/npm-low-risk-f6f5…

2ef636d

…5c7381

gaiety-deque marked this pull request as ready for review May 14, 2024 21:54

gaiety-deque requested a review from a team as a code owner May 14, 2024 21:54

gaiety-deque requested review from dbjorge and straker May 14, 2024 21:54

gaiety-deque and others added 21 commits May 14, 2024 16:59

fix: colorio.js patch mocking CSS

c62613f

patching colorio.js with optional chaining for `CSS?.supports` Refs: #4400

import local colorjs instead of CDN

920c990

copy in an unpatched file for testing against

576dc99

patch colorjs with optional chaining to support CSS null

5c39c29

removed commented out html script

841fb7d

🤖 Automated formatting fixes

69b80f5

debugging issue in CI

edf803a

still debugging in CI

3a7b7e6

undoes changes to prototype

eff6ad3

patch is a build step

4fada62

smaller patch, for 0.4.5

71cc2b4

move to grunt build step instead of prebuild postbuild

ebd2e96

🤖 Automated formatting fixes

57de085

patch only color.js

89b7386

correct import paths for proxied color.js in karma

4e6682d

testing a fix in CI, revert

0cb35e9

Revert "testing a fix in CI, revert"

af79b8b

This reverts commit 0dd9bb5.

add unpatched to build cache

2a4d76c

add colorjs patched dist to build cache as well

20a8a6f

🤖 Automated formatting fixes

c5444fd

patch 0.4.3 instead of 0.4.5

ac45ddf

romankulkovsf approved these changes May 18, 2024

View reviewed changes

WilcoFiers previously requested changes May 20, 2024

View reviewed changes

Base automatically changed from fix-flakey-marque-firefox-test to develop May 20, 2024 13:01

gaiety-deque and others added 4 commits May 20, 2024 08:09

Merge branch 'develop' into colorjs-patch

b79bae4

move patch steps to package pre/post steps not in grunt

1785f2c

Merge branch 'colorjs-patch' of github.com:dequelabs/axe-core into co…

e1c1eae

…lorjs-patch

removed file deleted from eslint merge issue

87c7845

WilcoFiers previously requested changes May 22, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

test/core/patch.js Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

test axe*.js, npm prepare

8b78165

gaiety-deque and others added 7 commits May 28, 2024 15:54

cii now runs prepare step for tests

ae68dc8

circle config runs prepare

a2842f4

npm run prepare, not npm prepare

3ae8d35

Merge branch 'develop' into colorjs-patch

9c255b1

Merge branch 'develop' into colorjs-patch

3271c2e

proper test validating the patch

434173b

🤖 Automated formatting fixes

283dca9

WilcoFiers reviewed Jun 7, 2024

View reviewed changes

package.json Outdated Show resolved Hide resolved

gaiety-deque added 2 commits June 7, 2024 08:34

no need to unpatch

09a36d5

Merge branch 'colorjs-patch' of github.com:dequelabs/axe-core into co…

ca3091a

…lorjs-patch

WilcoFiers approved these changes Jun 11, 2024

View reviewed changes

gaiety-deque merged commit 3ef9353 into develop Jun 13, 2024
21 checks passed

gaiety-deque deleted the colorjs-patch branch June 13, 2024 13:40

attest-team-ci mentioned this pull request Jul 29, 2024

chore(release): v4.10.0 #4545

Merged

Stanislav1975 mentioned this pull request Aug 19, 2024

[Snyk] Upgrade axe-core from 4.3.3 to 4.10.0 Stanislav1975/sitespeed.io#11

Open

Stanislav1975 mentioned this pull request Sep 9, 2024

[Snyk] Upgrade: uuid, , , axe-core, fast-stats, find-up, cli-color, coach-core, dayjs, fs-extra, influx, jstransformer-markdown-it, junit-report-builder, os-name, p-limit, pug, recursive-readdir Stanislav1975/sitespeed.io#12

Open

organich mentioned this pull request Sep 24, 2024

[Snyk] Upgrade axe-core from 4.4.1 to 4.10.0 organich/lighthouse#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: colorio.js patch mocking CSS #4456

fix: colorio.js patch mocking CSS #4456

gaiety-deque commented May 10, 2024

WilcoFiers May 20, 2024

WilcoFiers left a comment

fix: colorio.js patch mocking CSS #4456

fix: colorio.js patch mocking CSS #4456

Conversation

gaiety-deque commented May 10, 2024

WilcoFiers May 20, 2024

Choose a reason for hiding this comment

WilcoFiers left a comment

Choose a reason for hiding this comment