test('Uploading', async t => {
await t
.setFilesToUpload('#upload-input', [
'./uploads/1.svg',
'./uploads/2.svg',
'./uploads/3.svg',
])
.click('#upload-button');
Can you try following?
test("Uploading files", async (t) => {
await t.setFilesToUpload("#upload-input", [
"./uploads/1.svg",
"./uploads/2.svg",
"./uploads/3.svg",
])
.click("#upload-button");
});
Do you see any errors ?
Do you see the files are put into the input element ?
Do you have the files in the given location from the test file?
Reference : Test File Upload
Related
i have one form with two inputs
context('Include contains from json file', function () {
beforeEach(() => {
cy.server()
cy.fixture("example.json")
.as('data')
.then((data) => {
cy.route('GET', 'example.json', data)
})
})
it('Výběr klienta', function () {
cy.visit('/info')
cy.get('[data-cy=username]').type(JSON.stringify(this.data)
cy.get('[data-cy=surname]').type(JSON.stringify(this.data)
})
})
How to type contains for two or more inputs from external file .json
My .json file
{
"name": "Jane"
"surname": "Doe"
}
The .json file should be in the fixtures folder as cypress will automatically search for test data inside this folder by default until and unless the path is specified otherwise.
You have to load the fixtures file in your tests in beforeEach() cy.fixture('example.json').as('data')
Then your code would be:
cy.get('[data-cy=username]').type(data.name)
cy.get('[data-cy=surname]').type(data.surname)
Works for me perfectly in single fixture JSON with multiple data and not stub API
before describe('Test Single Input Field Form', function() declare :
const testData = require("../../fixtures/multipleInputFields.json")
and then
`testData.forEach((data) => {
const message = data.message
it('Test Case', function(){
cy.log("data is:" + data)
cy.get('#user-message').type(message).should('have.value', message)
cy.get('#get-input > button').click()
cy.wait(200)
cy.get('span#display').should('have.text', message)
})
});`
I have the following json file. Right now, i have kept this in my ReactJS project itself locally. Later on planning to move in a server location.
abtestconfig.json
[
{
"abtestname": "expAButton",
"traffic": 1,
"slices":
[
"orange",
"blue"
]
},
{
"abtestname": "expTextArea",
"traffic": 0.5,
"slices":
[
"lightgrey",
"yellow"
]
}
]
I want to read and get data and parse it and apply in a function. I got some reference sample code and trying to use fetch api to react json file with the following code.
After reading this json file, i will have to pass the data in abtest function, as you can see now it's sending with hard coded value abtest('expAButton', 0.75).slices('orange', 'blue').run(function ()
I have the following doubts and wanted to get your guidance / clarification.
1. Is it correct way to read json file using fetch api? Is there any other best approach?
2. When I use fetch api like mentioned below, console log displays GET http://localhost:8080/abtesting/abtestconfig.json 404 (Not Found)
app.jsx file:
import './abtesting/abtestconfig.json';
class App extends React.Component {
constructor() {
super();
this.onClick = this.handleClick.bind(this);
this.onClickNewUser = this.handleNewUser.bind(this);
this.state = {
bgColor: '',
data: []
}
};
handleNewUser (event) {
abtest.clear();
window.location.reload();
}
render() {
return (
<Helmet
/>
<p><b>A/B Testing Experience</b></p>
<div className="DottedBox">
<p><button id = "newUserButton" onClick = {this.onClickNewUser} style={{backgroundColor:"red"}}>Welcome and click here</button></p>
</div>
);
}
handleClick () {
abtest('expAButton', 0.75).slices('orange', 'blue').run(function () {
expAButton.style.backgroundColor = this.slice.name;
});
}
setStyle (stylecolor) {
this.setState({
bgColor: stylecolor
})
}
componentDidMount () {
this.handleClick();
fetch('./abtesting/abtestconfig.json').then(response => {
console.log(response);
return response.json();
}).then(data => {
// Work with JSON data here
console.log(data);
}).catch(err => {
// Do something for an error here
console.log("Error Reading data " + err);
});
}
}
export default hot(module)(App);
I can't seem to figure out how to load a local .json file and read the content - so I can dump it into some ´state´.
The code looks like this so far:
import React, { Component } from 'react'
import Files from 'react-files'
class LoadFile extends Component {
render() {
return (
<div className="files">
<Files
className="files-dropzone"
onChange={file => {
console.log(file)
}}
onError={err => console.log(err)}
accepts={['.json']}
multiple
maxFiles={3}
maxFileSize={10000000}
minFileSize={0}
clickable
>
Drop files here or click to upload
</Files>
</div>
)
}
}
export default LoadFile
The logged object does not have any of the data buried inside of it..
[Object]
0: Object
id: "files-1"
extension: "json"
sizeReadable: "288B"
preview: Object
type: "file"
Like #dkniffin said, what behind react-files is DataTransfer.
You could utilize the FileReader API to get the file content and parse it in JSON format, you could see the result in the console section of CodeSandbox below:
constructor() {
super();
this.state = {
jsonFile: {}
};
this.fileReader = new FileReader();
this.fileReader.onload = (event) => {
// or do whatever manipulation you want on JSON.parse(event.target.result) here.
this.setState({ jsonFile: JSON.parse(event.target.result) }, () => {
console.log(this.state.jsonFile);
});
};
}
...
render() {
return (
<div className="files">
<Files
...
onChange={file => {
// we choose readAsText() to load our file, and onload
// event we rigister in this.fileReader would be triggered.
this.fileReader.readAsText(file[0]);
}}
>
Drop files here or click to upload
</Files>
</div>
);
}
Unfortunately, I don't have a complete answer for you. However, after digging into the source code of react-files for a bit, I found this line:
let filesAdded = event.dataTransfer ? event.dataTransfer.files : event.target.files
It appears that filesAdded will be a FileList, which is basically just an array of File objects. Unfortunately, I don't see a way to get the content from a File object. Maybe someone else can help out with that.
Trying to fetch data from a json file in ionic 2 application, I am using the below piece of code within constructor for fetching json from assets folder, but getting error "Supplied parameters do not match any signature of call target." What i am missing, Please suggest.
this.http.get('assets/sample.json')
.map((res) => res.json().records)
.subscribe(data => {
this.data = data;
console.log("json data"+ data);
}, (rej) => {console.error("Could not load local data",rej)});
So I solved it, the path of json file from assets folder used as below help me to get the answer that displayed the data on device.
this.http.get('/android_asset/www/assets/data/subjects.json').map(res => res.json()).subscribe(
response => {
this.posts = response;
console.log(this.posts);
},
err => {
console.log("Oops!");
});
While if we use /assets/data/subjects.json, this will display the data on browser, though we can not use a single path that could be able to get the data on both browser as well as on device, because both have the different file system so we need different way to access the data on the devices.
this.http.get("assets/sample.json")
.subscribe(res =>{
this.data=res.json();
this.data=Array.of(this.data);
console.log(this.data);
}, error =>{
console.log(error);
});
Try this.
I want to make a pdf of the current page so the user can print it out but every page is dynamic so I will need a sort of a text to pdf generator to make it work.
It is an ionic2 app and is for like a recipe page so you can click on a button and it just makes a pdf out of the text.
Do you guys know how I can achieve that?
Your best bet is probably this plugin:
https://github.com/cesarvr/pdf-generator
give your dynamic page section an id like 'pdf-area' and then select it in your .ts file like this:
let content = document.getElementById('pdf-area').innerHTML
you can then turn that into a file or print it like this
cordova.plugins.pdf.htmlToPDF({
data: content,
type: "base64"
},
(success) => {
// you might have to turn the base64 into a binary blob to save it
// to a file at this point
},
(error) => console.log('error:', error);
);
}
put your html in assets folder and give the html path like this.
In my case this path is working:
var file = 'file:///android_asset/www/assets/lolc.html';
generatePdf(){
const before = Date.now();
document.addEventListener('deviceready', () => {
console.log('DEVICE READY FIRED AFTER', (Date.now() - before), 'ms');
var file = 'file:///android_asset/www/assets/lolc.html';
cordova.plugins.pdf.fromURL(file,{
documentSize: "A4",
landscape: "portrait",
type: "share"
}),
(sucess) => console.log('sucess: ', sucess),
(error) => console.log('error:', error);
});
}