Jsdom: HTML5 양식 유효성 검사

나는 이것이 훌륭하고 중요할 것이라는 데 동의합니다. 그러나 그것은 꽤 일이 될 것입니다.

여기에 필요한 가장 큰 것은 견고한 테스트 모음입니다. Contributing.md 가이드라인을 보면 어디서 찾을 수 있는지, 아니면 찾을 수 없는지, 어떤 메일링 리스트에 물어봐야 하는지에 대한 몇 가지 지침이 있습니다. 파헤칠 수 있다면 특히 H5F를 시작점으로 사용하여 지적한 것처럼 이를 구현할 기회가 있다고 생각합니다.

실제 구현에서 유일하게 다른 중요한 부분은 DOM 레벨 3 이상을 구현하기 위한 적절한 "level4" 또는 "html5" 폴더가 없다는 것입니다. 그러나 그것은 잠시 동안 필요했기 때문에 시도해 보겠습니다. 빨리 시작하기 위해.

:+1: 훌륭한 기능이 될 것입니다.

지금은 jsdom 설정 후 폴리필로 https://github.com/hyperform/hyperform 을 추가하고 있습니다. 그것은 잘 작동합니다.

야! 저는 Hyperform의 저자입니다. 그리고 운이 좋으면 이미 JSDom을 사용 하여 테스트 환경을 설정했습니다 .

JSDom 관리자에게 흥미로울 수 있는 부분: 적절한 웹 플랫폼 테스트를 다루기 위해 JSDom 내부에서도 Hyperform을 사용했습니다.

$ git diff test/web-platform-tests/create-jsdom.js
diff --git a/test/web-platform-tests/create-jsdom.js b/test/web-platform-tests/create-jsdom.js
index 7009df7..9edcb16 100644
--- a/test/web-platform-tests/create-jsdom.js
+++ b/test/web-platform-tests/create-jsdom.js
@@ -1,5 +1,6 @@
 "use strict";
 const jsdom = require("../..");
+const hyperform = require("hyperform");
 const nodeResolverPromise = require("../util").nodeResolverPromise;

 const globalPool = { maxSockets: 6 };
@@ -35,6 +36,9 @@ module.exports = (urlPrefix, testPath) => {

   return created
   .then(window => {
+    global.window = window;
+    global.document = window.document;
+    hyperform(window);
     return new Promise((resolve, reject) => {
       const errors = [];

test/web-platform-tests/index.js 에서 "html/semantics/forms/constraints/*.html" 테스트의 주석을 제거합니다.

불행히도 나는 녹색으로 변하는 몇 가지 테스트 케이스 만 가지고 있습니다. 그러나 (어떤 식으로든) Hyperform의 기능을 JSDom에 추가하는 데 관심이 있다면

) 해당 테스트를 통과하고
b) 상위 수준 API 를 제외하는 버전 또는 구성을 Hyperform에 제공

FWIW, 나는 이것에 꽤 관심이 있습니다. 저는 JSON 스키마를 기반으로 양식을 렌더링하는 Vue 구성 요소에서 작업 중이며 Validity API에 의존하여 제출 시 유효성 검사 상태를 산출합니다. 내 단위 테스트는 Jest(후드에서 JSDOM 사용)로 실행되었으며 현재로서는 이 부분을 테스트할 수 없습니다.

@Boldewyn 제 경우와 관련하여 제안 사항이 있으면 기꺼이 수락하겠습니다. 시작하는 데 몇 가지 지침이 제공되는 경우 이를 구현하는 데 도움을 줄 수도 있습니다. :)

편집 : 아래에서 @EricHenry 의 솔루션을 사용했는데 작동했습니다. HTMLInputElement , HTMLSelectElement 및 HTMLTextAreaElement 에도 checkValidity 를 설정해야 했습니다 HTMLFormElement ). 건배!

Jest 및 Enzyme을 사용하여 React 구성 요소를 테스트할 때 이 문제가 있는 사람을 위해 위에서 @fernandopasik 및 @Boldewyn 이 언급한 하이퍼폼 패키지를 사용하여 JSDOM 을 폴리필할 수 있었습니다.

테스트 파일에서 하이퍼폼을 설치한 후 다음을 수행할 수 있습니다.

import * as hyperform from 'hyperform';

var global = global;

const defineValidity = {
  get() {
    return hyperform.ValidityState(this);
  },
  configurable: true
};

global.HTMLFormElement.prototype.checkValidity = function() {
  return hyperform.checkValidity(this);
};

Object.defineProperty(global.HTMLFormElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLInputElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLSelectElement.prototype, 'validity', defineValidity);
Object.defineProperty(global.HTMLTextAreaElement.prototype, 'validity', defineValidity);

수정해야 하는 다른 HTMLElement 또는 폴리필에 필요한 다른 속성에 대해 동일한 방법을 따를 수 있습니다.

PR #2142는 폴리필 없이 전체 제약 조건 API를 구현합니다.

Jest 문서는 JSDOM에서 구현되지 않은 모의 방법을 제안합니다. 테스트로 인해 환경을 오염시키는 것보다 이것이 더 깨끗한 솔루션이라고 생각합니다.

제 경우에는 양식의 유효성을 검사한 다음 양식의 classList 에서 특정 클래스가 있는지 검사해야 했습니다. 이 클래스가 있으면 양식의 유효성에 대해 알려줍니다.

내 솔루션은 양식의 속성을 조롱하는 것이었습니다. 예를 들어 classList DOMTokenList 의 기본 구현을 조롱했습니다.

beforeAll(() => {
    window.DOMTokenList = jest.fn().mockImplementation(() => {
        return {
            list: [],
            remove: jest.fn().mockImplementation(function (item) {
                const idx = this.list.indexOf(item);

                if (idx > -1) {
                    this.list.splice(idx, 1)
                }
            }),
            add: jest.fn().mockImplementation(function (item) {
                this.list.push(item);
            }),
            contains: jest.fn().mockImplementation(function (item) {
                return this.list.indexOf(item) > -1;
            })
        };
    });
})

그런 다음 이벤트 핸들러에 속성을 전달하는 데 사용했습니다. event.currentTarget.form 를 사용하여 제출 버튼에서 반응 구성 요소의 양식에 액세스할 수 있습니다.

let mockClassList = new DOMTokenList();

submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    })

이를 통해 양식의 유효성을 false 및 true로 설정하고 매번 was-validated 클래스가 있는지 mockClassList 를 검사할 수 있습니다.

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => false,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeTruthy();

    submitBtn.simulate('click', {
        currentTarget: {
            form: {
                checkValidity: () => true,
                classList: mockClassList
            }
        },
        preventDefault: jest.fn(),
        stopPropagation: jest.fn()
    });

    expect(mockClassList.contains('was-validated')).toBeFalsy();

참고: 저는 이를 위해 Enzyme의 얕은 렌더링을 사용하고 있습니다. 마운트가 이 솔루션에서 작동하지 않는 것 같습니다. 그러나 JSDOM에서 구현되지 않은 모의 메서드에 대한 다른 제안은 테스트된 파일 문에서 메서드가 직접 실행될 때 마운트 렌더링과 함께 작동할 수 있다고 생각하는 경향이 있습니다.

j [email protected] 에서 사용할 수 없는 input.validity 에 문제가 있습니다.

// EditableInput.js:
this.inputElement = React.createRef();
...
const input = this.inputElement.current;
console.error('input.validity: ', input.validity);

// EditableInput.test.js run outcome:
    console.error src/components/Form/Input/EditableInput.js:47
      input.validity:  undefined

// yarn.lock:
jsdom@^11.5.1:
  version "11.12.0"
  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==

유효성 인터페이스가 있는 PR이 병합된 날 릴리스되었으므로 수정했어야 하는 버전이 11.8.0임을 알 수 있습니다. 내가 뭔가를 놓치고 있습니까?