Jsdom: कुछ विधि का पर्दाफाश करें फ़ाइल सूची में फ़ाइलें जोड़ें

input.files = createFileList(file1, file2, ...) अच्छा रहेगा।

@cpojer क्या आप वहां डालने के लिए वास्तविक File ऑब्जेक्ट उत्पन्न कर रहे हैं?

input.files लिखने योग्य बनाना शायद खराब है, हम शायद खुद को भरने के लिए कच्चे सरणी को वापस कर सकते हैं, या कुछ ऐसा कर सकते हैं fillFileList(input.files, [file]) ।

हम वास्तव में केवल नकली डेटा का उपयोग करते हैं, इसलिए हम वस्तुओं की एक सरणी के साथ .files पॉप्युलेट करते हैं। लेकिन मुझे लगता है कि फ़ाइल ऑब्जेक्ट होने की आवश्यकता उचित होगी।

ऐसा लगता है जैसे परिभाषित प्रॉपर्टी यहां ठीक होगी? डीओएम गुण किसी कारण से पुन: कॉन्फ़िगर करने योग्य हैं ...

हालांकि, मैं वास्तविक डेटा के साथ एक वास्तविक फाइललिस्ट बनाना चाहता हूं।

फ़ाइल सूची आइटम को उनके सरणी-सूचकांक का उपयोग करके एक्सेस करना भी संभव होना चाहिए। .item उनके क्षेत्रों तक पहुंचने का एकमात्र तरीका नहीं है।

ठीक है, तो ऐसा लगता है कि कुछ संभावित समस्याएं हैं:

• फाइललिस्ट में ठीक से अनुक्रमित पहुंच काम नहीं कर रही है (बग)
• परीक्षण के लिए फाइललिस्ट ऑब्जेक्ट बनाने का कोई तरीका नहीं है (वेब ​​​​प्लेटफ़ॉर्म फीचर गैप)।

लेकिन inputEl.files को संशोधित करना समस्या नहीं है।

हाँ, मेरा मतलब है कि इंजीनियरों को नियमित असाइनमेंट पर Object.defineProperty का उपयोग करने के लिए कहना कमाल नहीं है, लेकिन मैं इसके साथ रह सकता हूं।

खैर, उन्हें वैसे भी असली ब्राउज़र में करना है, इसलिए यह मेरे लिए उचित लगता है ...

नमस्ते, मैं देख रहा हूं कि यह एक वर्ष से अधिक पुराना है, मैं पूछना चाहता हूं कि क्या इस मुद्दे के संबंध में कोई प्रगति हुई है? मैं अपने रिएक्ट/रेडक्स ऐप का परीक्षण करने के लिए जेस्ट फ्रेमवर्क का उपयोग करता हूं जो आंतरिक रूप से jsdom का उपयोग करता है। मुझे एक समस्या है जहां मुझे एक या अधिक फ़ाइल ऑब्जेक्ट्स के साथ गतिशील रूप से FileList बनाने की आवश्यकता है।

lib/jsdom/living/filelist.js को देखते हुए मैं देख सकता हूं कि फाइललिस्ट के लिए एक कंस्ट्रक्टर है लेकिन इसमें फाइल पास करने का कोई विकल्प नहीं है। मैं समझता हूं कि सुरक्षा कारणों से फ़ाइललिस्ट और फ़ाइल में विनिर्देशों के अनुसार कंस्ट्रक्टर नहीं है, लेकिन क्या कंस्ट्रक्टर को फ़ाइल ऑब्जेक्ट्स की सरणी या कम से कम अतिरिक्त विधि (मान लें _setItem_) को स्वीकार करने की अनुमति देने का कोई इरादा है जो हमें फ़ाइल जोड़ने की अनुमति देगा विशेष रूप से परीक्षण उद्देश्यों के लिए सूची में वस्तुओं?

मैं फाइललिस्ट के साथ एक और मुद्दा भी देखता हूं। अगर मैं गलती नहीं कर रहा हूं तो यह ऐरे जैसी वस्तु होनी चाहिए, जो नोडलिस्ट (lib/jsdom/living/node-list.js) के समान होनी चाहिए, जिसका अर्थ है कि फ़ाइल ऑब्जेक्ट्स को दो तरीकों से एक्सेस करने की संभावना होनी चाहिए:

var fileList = document.getElementById("myfileinput").files;

fileList[0];
fileList.item(0);

वर्तमान में, केवल विधि के माध्यम से ही पहुंचना संभव है। इसका मतलब है कि NodeList के समान तर्क यहां लागू किया जाना चाहिए:

FileList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

और फाइलों को कुछ इस तरह से संग्रहित किया जाना चाहिए यदि हम फाइलों को कंस्ट्रक्टर को पास करने की अनुमति देंगे:

for (let i = 0; i < files.length; ++i) {
  this[i] = files[i];
}

यह कैसे किया जाना चाहिए इसके बारे में मेरी कोई मजबूत राय नहीं है, ये केवल उदाहरण हैं जिनका उपयोग मैं बेहतर तरीके से समझाने के लिए करता हूं जो मैं इंगित करने की कोशिश कर रहा हूं।

अतिरिक्त प्रश्न (मैं यहां पूछने से पहले अनावश्यक मुद्दों को नहीं खोलना चाहता):

1.) क्या स्ट्रिंग के रूप में प्रदान किए गए पथ का उपयोग करके वास्तविक फ़ाइल से फ़ाइल ऑब्जेक्ट बनाने वाले परीक्षण उद्देश्यों के लिए फ़ाइल कंस्ट्रक्टर को जोड़ना फायदेमंद होगा? मुझे पुस्तकालय मिला (मुझे क्षमा करें, मुझे अब लिंक नहीं मिल रहा है) जिसने इसकी अनुमति दी:

const file = new File('../fixtures/files/test-image.png');

इसने मेरे लिए गुणों के साथ फ़ाइल बनाई (आकार, अंतिम संशोधित, प्रकार ...) मेरे बिना इसे मैन्युअल रूप से बनाने के लिए:

const file = new File([''], 'test-image.png', {
  lastModified: 1449505890000,
  lastModifiedDate: new Date(1449505890000),
  name: "ecp-logo.png",
  size: 44320,
  type: "image/png",
});

मुझे नहीं पता कि यह पुस्तकालय कैसे काम करता है मैं केवल इतना जानता हूं कि इसे एक वर्ष से अधिक समय तक नहीं रखा गया था और हमने इसका उपयोग करना बंद कर दिया था। मैं इसे अब और नहीं ढूंढ सकता।

2.) window.URL.createObjectURL jsdom द्वारा समर्थित नहीं है। सुनिश्चित नहीं है कि इसकी सूचना दी जानी चाहिए।

मैं किसी भी jsdom लाइब्रेरी कोड को बदले बिना FileList बनाने में कामयाब रहा:

const createFile = (size = 44320, name = 'ecp-logo.png', type = 'image/png') =>
  new File([new ArrayBuffer(size)], name , {
    type: type,
  });

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  return fileList;
}

const fileList = createFileList(createFile());

इस मामले में मैं jsdom द्वारा प्रदान की गई FileList पर FileList ऑब्जेक्ट कॉलिंग कंस्ट्रक्टर बना रहा हूं। उसके बाद मैं केवल ऐरे नोटेशन का उपयोग करके उस सूची में फ़ाइल जोड़ रहा हूं। मेरे मामले में मुझे सरणी में केवल 1 फ़ाइल की आवश्यकता है, लेकिन फ़ाइल सूची में एकाधिक फ़ाइलों को जोड़ने के लिए इसे लूप के लिए भी बदला जा सकता है। मैं फ़ाइल निर्माता के माध्यम से कस्टम नाम/प्रकार/आकार के साथ फ़ाइल बना रहा हूं जो जेएसडॉम द्वारा प्रदान की गई है जो कार्यक्षमता विनिर्देश का पालन कर रही है।

यह किसी ऐसे व्यक्ति के लिए मददगार हो सकता है जो देख रहा है कि jsdom वातावरण में FileList का मजाक कैसे बनाया जाए, लेकिन एक मुद्दा अभी भी खड़ा है। इस विधि का उपयोग करके फाइलों की सरणी के साथ फाइललिस्ट बनाना FileList.item(index) विधि का उपयोग करके सरणी से आइटम प्राप्त करने की अनुमति नहीं देगा। लेकिन, यहां तक ​​​​कि इसकी विधि को कुछ इस तरह से ओवरराइड करके तय किया जा सकता है:

const createFileList = (file) => {
  const fileList = new FileList();
  fileList[0] = file;
  fileList.item = index => fileList[index]; // override method functionality
  return fileList;
}

मुझे अभी भी लगता है कि यह बेहतर हो सकता है अगर jsdom बॉक्स के बाहर परीक्षण उद्देश्यों के लिए इन कार्यक्षमताओं की पेशकश कर सके।

हाय दोस्तों ,
मुझे $("#selectorID of Upload file")[0].files[0] ऑब्जेक्ट का मज़ाक उड़ाते समय कुछ समस्या का सामना करना पड़ रहा है जो FileList लौटा रहा है।
क्या कोई मुझे फाइललिस्ट ऑब्जेक्ट बनाने में मदद कर सकता है? क्योंकि मुझे WWW में कहीं भी कोई संदर्भ लिंक नहीं मिल रहा है

यह फिलहाल संभव नहीं है।

धन्यवाद डोमिनिक,

मुझे फ़ाइल अपलोड परिवर्तन ईवेंट के लिए एक टेस्ट केस लिखना होगा। उस परीक्षण परिदृश्य को निष्पादित करने का कोई वैकल्पिक तरीका।

इस पर कोई प्रगति?

https://mobile.twitter.com/slicknet/status/782274190451671040

@niksajanjic क्या आपने इस सूत्र में प्रस्तुत सर्वोत्तम समाधान को लागू करने का प्रबंधन किया है?
संदर्भ: const file = new File('../fixtures/files/test-image.png');
या ऐसा ही कुछ?
श्रेष्ठ

@domenic इस मुद्दे पर उस ट्विटर पोस्ट में थोड़ा सा असंतोष है

@domenic ठीक है, मैंने इसके लिए मूल शुरुआत की है। सभी जाँचें नहीं हैं, लेकिन यह अनिवार्य रूप से

फ़ाइल बनाएँ

function createFile(file_path) {
  const { mtimeMs: lastModified, size } = fs.statSync(file_path)

  return new File(
    [new fs.readFileSync(file_path)],
    path.basename(file_path),
    {
      lastModified,
      type: mime.lookup(file_path) || '',
    }
  )
}

फ़ाइल सूची जोड़ें

function addFileList(input, file_paths) {
  if (typeof file_paths === 'string')
    file_paths = [file_paths]
  else if (!Array.isArray(file_paths)) {
    throw new Error('file_paths needs to be a file path string or an Array of file path strings')
  }

  const file_list = file_paths.map(fp => createFile(fp))
  file_list.__proto__ = Object.create(FileList.prototype)

  Object.defineProperty(input, 'files', {
    value: file_list,
    writeable: false,
  })

  return input
}

डेमो फ़ाइल

/*eslint-disable no-console, no-unused-vars */

/*
https://github.com/jsdom/jsdom/issues/1272
*/

const fs = require('fs')
const path = require('path')
const mime = require('mime-types')

const { JSDOM } = require('jsdom')
const dom = new JSDOM(`
<!DOCTYPE html>
<body>
  <input type="file">
</body>
`)

const { window } = dom
const { document, File, FileList } = window


const file_paths = [
  '/Users/williamrusnack/Documents/form_database/test/try-input-file.html',
  '/Users/williamrusnack/Documents/form_database/test/try-jsdom-input-file.js',
]

function createFile(file_path) {
  const { mtimeMs: lastModified, size } = fs.statSync(file_path)

  return new File(
    [new fs.readFileSync(file_path)],
    path.basename(file_path),
    {
      lastModified,
      type: mime.lookup(file_path) || '',
    }
  )
}

function addFileList(input, file_paths) {
  if (typeof file_paths === 'string')
    file_paths = [file_paths]
  else if (!Array.isArray(file_paths)) {
    throw new Error('file_paths needs to be a file path string or an Array of file path strings')
  }

  const file_list = file_paths.map(fp => createFile(fp))
  file_list.__proto__ = Object.create(FileList.prototype)

  Object.defineProperty(input, 'files', {
    value: file_list,
    writeable: false,
  })

  return input
}



const input = document.querySelector('input')

addFileList(input, file_paths)

for (let i = 0; i < input.files.length; ++i) {
  const file = input.files[i]
  console.log('file', file)
  console.log('file.name', file.name)
  console.log('file.size', file.size)
  console.log('file.type', file.type)
  console.log('file.lastModified', file.lastModified)
  console.log()
}

@BebeSparkelSparkel मैंने एक तरह से परीक्षण किया, जिसे मैंने अपनी बाद की पोस्ट में समझाया था। दुर्भाग्य से, कुछ महीने बाद जब मेरे एक सहयोगी ने उस कोड को कॉपी करने की कोशिश की तो उसने jsdom के नए संस्करणों पर काम करना बंद कर दिया। इसलिए, हमें उस समय फाइललिस्ट के परीक्षणों पर टिप्पणी करनी पड़ी। वहां से, हमें उन परीक्षणों को लिखने का कोई तरीका नहीं मिला और पिछले कुछ महीनों में किसी के पास इसे दोबारा देखने और रास्ता खोजने का प्रयास करने का समय नहीं था।

@niksajanjic आपके अपडेट के लिए धन्यवाद। मैं आपके द्वारा प्रस्तावित समाधान पर काम कर रहा हूं और ऐसा लगता है कि यह काम कर रहा है (उपरोक्त कोड देखें), लेकिन मुझे लगता है कि इसे jsdom में जोड़ने की संभावना नहीं है क्योंकि यह पता लगाना बहुत मुश्किल होगा कि इसे कैसे जोड़ा जाए।
बेझिझक एक बार देख लें और अगर आप चाहें तो इसका इस्तेमाल करें

एक साधारण सहायक स्क्रिप्ट बनाई जो इस समस्या को हल करती है जब तक कि jsdom प्रोजेक्ट समाधान के साथ नहीं आता।
https://bitbucket.org/william_rusnack/addfilelist/src/master/

एक फ़ाइल जोड़ें:

const input = document.querySelector('input[type=file]')
addFileList(input, 'path/to/file')

एकाधिक फ़ाइलें जोड़ें:

const input = document.querySelector('input[type=file]')
addFileList(input, [
  'path/to/file',
  'path/to/another/file',
  // add as many as you want
])

स्थापित करें और आवश्यकता है

npm install https://github.com/BebeSparkelSparkel/addFileList.git

```जावास्क्रिप्ट
const {addFileList} = आवश्यकता ('addFileList')

## Functions
**addFileList**(input, file_paths)  
Effects: puts the file_paths as File object into input.files as a FileList  
Returns: input  
Arguments:  
- input: HTML input element  
- file_paths: String or Array of string file paths to put in input.files  
`const { addFileList } = require('addFileList')`  

## Example
Extract from example.js
```javascript
// add a single file
addFileList(input, 'example.js')

// log input's FileList
console.log(input.files)

// log file properties
const [ file ] = input.files
console.log(file)
console.log(
  '\nlastModified', file.lastModified,
  '\nname', file.name,
  '\nsize', file.size,
  '\ntype', file.type,
  '\n'
)

नतीजा

$ node example.js 
FileList [ File {} ]
File {}

lastModified 1518523506000 
name example.js 
size 647 
type application/javascript 

@BebeSparkelSparkel आपका रेपो हटा दिया गया लगता है?

@TheCycoONE https://bitbucket.org/william_rusnack/addfilelist/src/master/

मुझे भी इसी तरह की समस्या थी- मैंने एक फ़ंक्शन लिखा था जो इनपुट के रूप में FileList लेता था और जेस्ट का उपयोग करके इसके लिए एक यूनिट टेस्ट लिखना चाहता था। मैं अपने फ़ंक्शन के साथ काम करने के लिए पर्याप्त FileList ऑब्जेक्ट को खराब करने के लिए नीचे दिए गए सहायक फ़ंक्शन का उपयोग करने में सक्षम था। फ्लो एनोटेशन के साथ सिंटैक्स ES6 है। कोई वादा नहीं है कि यह सभी परिस्थितियों में काम करेगा क्योंकि यह वास्तविक FileList वर्ग की कार्यक्षमता को केवल नकली बना रहा है ...

const createFileList = (files: Array<File>): FileList => {
  return {
    length: files.length,
    item: (index: number) => files[index],
    * [Symbol.iterator]() {
      for (let i = 0; i < files.length; i++) {
        yield files[i];
      }
    },
    ...files,
  };
};

अग्रभाग में, मैं एक 'असली' FileList लिए निम्नलिखित की तरह कुछ कर सकता हूं:

export const makeFileList = files => {
  const reducer = (dataTransfer, file) => {
    dataTransfer.items.add(file)
    return dataTransfer
  }

  return files.reduce(reducer, new DataTransfer()).files
}

संदर्भ: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

दुर्भाग्य से, jsdom वास्तव में अभी तक DataTransfer समर्थन नहीं करता है, इसलिए यह मेरे परीक्षणों में काम नहीं करता है:

• https://github.com/jsdom/jsdom/issues/1568

अन्य रेफरी:

• https://github.com/whatwg/html/issues/3269
• .
• https://developer.mozilla.org/en-US/docs/Web/API/FileList
• https://w3c.github.io/FileAPI/#filelist -section

स्रोत को थोड़ा खोजने पर मुझे exports.FileList = require("./generated/FileList").interface;

• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/index.js#L62

~लेकिन गिटहब से मुझे यह स्पष्ट नहीं था कि ./generated बनाने वाले स्रोत को कहां खोजा जाए ~

• ऐसा लगता है कि यह प्रासंगिक स्थान है: https://github.com/jsdom/jsdom/blob/master/Contributing.md#architecture
  
  
  
  • yarn prepare : https://github.com/jsdom/jsdom/blob/master/package.json#L86
  
  
  • yarn convert-idl : https://github.com/jsdom/jsdom/blob/master/package.json#L104
  
  
  • https://github.com/jsdom/jsdom/blob/master/scripts/webidl/convert.js#L26
  
  
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/file-api/FileList.webidl
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/file-api/FileList-impl.js

एनपीएम पैकेज का मुख्य निर्यात ./lib/api.js और एक बहुत छोटा सार्वजनिक एपीआई निर्यात करता है:

exports.JSDOM = JSDOM;
exports.VirtualConsole = VirtualConsole;
exports.CookieJar = CookieJar;
exports.ResourceLoader = ResourceLoader;
exports.toughCookie = toughCookie;

लेकिन मेरी ./node_modules/jsdom/lib/jsdom निर्देशिका में देख रहे हैं .. मैं देख सकता हूं कि ./node_modules/jsdom/lib/jsdom/living/file-api सहित सभी आंतरिक/कार्यान्वयन फ़ाइलें भी हैं:

Blob-impl.js  File-impl.js  FileList-impl.js  FileReader-impl.js

FileList-impl.js यहां वास्तविक JS कार्यान्वयन है जो jsdom में उजागर FileList api का समर्थन करता है।

अब यदि हम ./node_modules/jsdom/lib/jsdom/living/generated/FileList.js देखें तो हमें वास्तविक उत्पन्न 'सार्वजनिक एपीआई' दिखाई देता है जिसे हम सामान्य उपयोग के माध्यम से देखते हैं, जिसमें हमारे सभी परिचित भी शामिल हैं:

class FileList {
  constructor() {
    throw new TypeError("Illegal constructor");
  }

यह फ़ाइल module.exports = iface; निर्यात करती है, जिसमें 'सामान्य' सार्वजनिक एपीआई एक्सपोजर के माध्यम से हमारे द्वारा प्राप्त की जाने वाली कार्यक्षमता की तुलना में बहुत अधिक कार्यक्षमता होती है, जो केवल iface.interface कुंजी का उपयोग करती है। तो शायद हम कुछ मजेदार कर सकते हैं अगर हम सीधे require("./generated/FileList") करते हैं। कार्यान्वयन विवरण को हटाकर, हमारे पास एक इंटरफ़ेस है जो कुछ इस तरह दिखता है:

const iface = {
  _mixedIntoPredicates: [],
  is(obj) {..snip..},
  isImpl(obj) {..snip..},
  convert(obj, { context = "The provided value" } = {}) {..snip..},
  create(constructorArgs, privateData) {..snip..},
  createImpl(constructorArgs, privateData) {..snip..},
  _internalSetup(obj) {},
  setup(obj, constructorArgs, privateData) {...snip...},
  interface: FileList,
  expose: {
    Window: { FileList },
    Worker: { FileList }
  }
}; // iface

तो अब जबकि हम जानते हैं कि अभी और शक्ति प्राप्त करनी है.. देखते हैं कि jsdom अन्य क्षेत्र इसे कैसे एक्सेस करते हैं..

HTMLInputElement-impl पर एक नज़र डालने पर, ऐसा लगता है कि यह FileList.createImpl() का उपयोग करता है, हालांकि दुर्भाग्य से यह वास्तव में हमें पैराम का उपयोग करने का तरीका नहीं दिखाता है:

• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L4
• https://github.com/jsdom/jsdom/blob/master/lib/jsdom/living/nodes/HTMLInputElement-impl.js#L404 -L411

createImpl निर्यात किए गए iface में setup आसपास सिर्फ एक छोटा आवरण है:

createImpl(constructorArgs, privateData) {
    let obj = Object.create(FileList.prototype);
    obj = this.setup(obj, constructorArgs, privateData);
    return utils.implForWrapper(obj);
  },

कंसोल में इसके साथ खेलने से ऐसा लगता है कि हमारे पास Array तत्व की अभिव्यंजक एपीआई है जो FileListImpl द्वारा समर्थित है। तो हम इस तरह की चीजें कर सकते हैं:

var flist = require('./node_modules/jsdom/lib/jsdom/living/generated/FileList.js')
var myFileListImpl = flist.createImpl()
myFileListImpl.push('aa')

इस पर एक Symbol(wrapper) संपत्ति है, जिसे एक्सेस करने के लिए हमें ./node_modules/jsdom/lib/jsdom/living/generated/utils.js:37 का उपयोग करना होगा:

var utils = require('./node_modules/jsdom/lib/jsdom/living/generated/utils.js')
var wrapper = myFileListImpl[utils.wrapperSymbol]

निर्यात किए गए iface में एक फ़ंक्शन convert , जो throw new TypeError( ${context} 'फाइललिस्ट' प्रकार का नहीं होगा। ); जब प्रदान की गई वस्तु FileList । हम चीजों का परीक्षण करने के लिए इसका इस्तेमाल कर सकते हैं।

अगर हम इसे कच्चे myFileListImpl पर कॉल करते हैं तो यह त्रुटि फेंकता है:

flist.convert(myFileListImpl)

जबकि ऊपर निकाले गए wrapper का उपयोग करते हुए, हम देख सकते हैं कि यह त्रुटि नहीं फेंकता है:

flist.convert(myFileListImpl[utils.wrapperSymbol])

इसके साथ, हम myFileListImpl को संशोधित कर सकते हैं, और एक स्वीकार्य FileList ऑब्जेक्ट वापस प्राप्त कर सकते हैं, जहां हमें इसकी आवश्यकता है। एक पूरी तरह से काम किया उदाहरण (हमारे पिछले कोड के बजाय util.wrapperForImpl() का उपयोग करके):

var _FileList = require('./node_modules/jsdom/lib/jsdom/living/generated/FileList.js')
var utils = require('./node_modules/jsdom/lib/jsdom/living/generated/utils.js')

var myMutableFileListImpl = _FileList.createImpl()

myMutableFileListImpl.length // 0
myMutableFileListImpl.push(new File([], 'a.jpg'))
myMutableFileListImpl.length // 1

var myFileList = utils.wrapperForImpl(myMutableFileListImpl)
_FileList.convert(myFileList) // no error

myFileList.length // 1
myFileList[0] // the File{} object

अब उस ज्ञान के साथ, मैं अपने मूल ब्राउज़र वर्कअराउंड हैक के jsdom परीक्षण संस्करण को लागू कर सकता हूं (आलस्य के लिए ImmutableJS के शीर्ष पर लागू):

import { Map, Record } from 'immutable'

import jsdomFileList from 'jsdom/lib/jsdom/living/generated/FileList'
import { wrapperForImpl } from 'jsdom/lib/jsdom/living/generated/utils'

// Note: relying on internal API's is super hacky, and will probably break
// As soon as we can, we should use whatever the proper outcome from this issue is:
//   https://github.com/jsdom/jsdom/issues/1272#issuecomment-486088445

export const makeFileList = files => {
  const reducer = (fileListImpl, file) => {
    fileListImpl.push(file)
    return fileListImpl
  }

  const fileListImpl = files.reduce(reducer, jsdomFileList.createImpl())

  return wrapperForImpl(fileListImpl)
}

export class DataTransferStub extends Record({ items: Map() }) {
  get files() {
    return makeFileList(this.items.toList().toArray())
  }
}

export const stubGlobalDataTransfer = () => {
  global.DataTransfer = DataTransferStub
}

export const restoreGlobalDataTransfer = () => {
  global.DataTransfer = undefined
}

और फिर इसे मैन्युअल रूप से मेरे वैश्विक युद्धों में तार दें ताकि मेरे एवा परीक्षण इसका उपयोग कर सकें:

import {
  restoreGlobalDataTransfer,
  stubGlobalDataTransfer,
} from ../helpers/jsdom-helpers'

test.before(t => {
  stubGlobalDataTransfer()
})

test.after(t => {
  restoreGlobalDataTransfer()
})

सभी आधुनिक ब्राउज़र (अर्थात IE <= 11 नहीं) अब एक फ़ाइल सूची में input.files सेट करने का समर्थन करते हैं https://stackoverflow.com/a/47522812/2744776

ऐसा लगता है कि हालिया रिलीज में यह बदल गया है। यहाँ मेरे लिए क्या काम किया है:

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

यदि आप जेस्ट के माध्यम से जेएसडीओएम का उपयोग कर रहे हैं, तो आपको यह सुनिश्चित करना होगा कि परीक्षण वीएम के बाहर आंतरिक की आवश्यकता है। मैंने इस तरह एक कस्टम टेस्ट एनवी बनाया है:

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

ताकि मैं 'बाहरी' आयात तक पहुंच सकूं।

ऐसा लगता है कि हालिया रिलीज में यह बदल गया है। यहाँ मेरे लिए क्या काम किया है:

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

यदि आप जेस्ट के माध्यम से जेएसडीओएम का उपयोग कर रहे हैं, तो आपको यह सुनिश्चित करना होगा कि परीक्षण वीएम के बाहर आंतरिक की आवश्यकता है। मैंने इस तरह एक कस्टम टेस्ट एनवी बनाया है:

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

ताकि मैं 'बाहरी' आयात तक पहुंच सकूं।

यह मुझे करीब मिला लेकिन मैं आंतरिक सत्यापन से आगे नहीं बढ़ सकता:

Exports.is = मान => {
वापसी utils.isObject(value) && utils.hasOwn(value, implSymbol) && value[implSymbol] instanceof Impl.implementation;
};

लेखन त्रुटि: 'HTMLInputElement' पर 'फ़ाइलें' गुण सेट करने में विफल: प्रदान किया गया मान 'फ़ाइलसूची' प्रकार का नहीं है।

घंटे बिताए। अति निराशाजनक

ऐसा लगता है कि हालिया रिलीज में यह बदल गया है। यहाँ मेरे लिए क्या काम किया है:

const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
function makeFileList(...files) {
    const impl = jsdomFileList.createImpl(window);
    const ret = Object.assign([...files], {
        item: (ix) => ret[ix],
        [jsdomUtils.implSymbol]: impl,
    });
    impl[jsdomUtils.wrapperSymbol] = ret;
    Object.setPrototypeOf(ret, FileList.prototype);
    return ret;
}

यदि आप जेस्ट के माध्यम से जेएसडीओएम का उपयोग कर रहे हैं, तो आपको यह सुनिश्चित करना होगा कि परीक्षण वीएम के बाहर आंतरिक की आवश्यकता है। मैंने इस तरह एक कस्टम टेस्ट एनवी बनाया है:

const JsdomEnvironment = require('jest-environment-jsdom');

/** See jsdom/jsdom#1272 */
class EnvWithSyntheticFileList extends JsdomEnvironment {
    async setup() {
        await super.setup();
        this.global.jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
        this.global.jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
    }
}

module.exports = EnvWithSyntheticFileList;

ताकि मैं 'बाहरी' आयात तक पहुंच सकूं।

यह मुझे करीब मिला लेकिन मैं आंतरिक सत्यापन से आगे नहीं बढ़ सकता:

Exports.is = मान => {
वापसी utils.isObject(value) && utils.hasOwn(value, implSymbol) && value[implSymbol] instanceof Impl.implementation;
};

लेखन त्रुटि: 'HTMLInputElement' पर 'फ़ाइलें' गुण सेट करने में विफल: प्रदान किया गया मान 'फ़ाइलसूची' प्रकार का नहीं है।

घंटे बिताए। अति निराशाजनक

एक नए दिमाग के साथ फिर से शुरुआत करने के बाद मुझे समस्या का पता चला। किसी तरह मेरे पास 2 अलग-अलग jsdom वातावरण चल रहे थे जो प्रतीकों के संदर्भों को फेंक देते थे।