Telegram uses a script to embed messages on the site, I made a custom provider, but when rendering, the script is replaced by <span data-ck-unsafe-element="script".....>, how can I allow the script? External users do not have access to the editor and therefore there will be no danger from this.
My extraProvider:
{
name: 'telegram',
url: /^t\.me\/(\w+)\/(\w+)/,
html: match => `<div class="telegram-embed"><script async src="https://telegram.org/js/telegram-widget.js?19" data-telegram-post="${ match[ 1 ] }/${ match[ 2 ] }" data-width="100%"></script></div>`
}
Related
I'm trying to test an application using react-dropzone. I'm using something like the following code:
const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop, noClick: true})
return (
<div
{...getRootProps()}
aria-label='file-upload-dropzone'
>
<input
{...getInputProps()}
/>
<div>
{(isDragActive) ?
<span>Drop the files here...</span> :
<span>Drag and drop the files here</span>
}
</div>
</div>
)
The problem here is that:
When trying to test with the following cypress test:
cy.get('[aria-label=file-upload-dropzone]')
.selectFile(
{
contents: Cypress.Buffer.from('file contents'),
fileName: 'file.e37',
mimeType: 'text/plain',
lastModified: Date.now(),
},
{action: 'drag-drop'},
)
// the test fails here
cy.contains('div', /Drag and drop the files here/).should('exist')
the UI is stuck with "Drop the files here...". The reason seems to be that isDragActive never goes back to false, after cy.get(...).selectFile(...) has been called.
This is different from when I test the exact same code from the browser - there, isDragActive is false AND "Drag and drop the files here" is displayed when I'm finished dragging the file.
Is there any way I can get the cypress test and a real user test to behave the same for this scenario?
Since you're using a hook, try adding cy.wait(0) or setTimeout(() =>{},0) before the failing line.
This would allow the hook to complete any background action - presuming the problem is that Cypress is hogging the thread
Triggering "change" or "drop"
The following seems to be a working sequence of events.
cy.get('[aria-label=file-upload-dropzone]')
.selectFile(
{
contents: Cypress.Buffer.from('file contents'),
fileName: 'file.e37',
mimeType: 'text/plain',
lastModified: Date.now(),
},
{action: 'drag-drop'},
)
cy.contains('div', /Drop the files here.../) // passes
cy.get('[aria-label=file-upload-dropzone]')
.find('input').trigger('change', {force:true}) // without this trigger
// the next line fails
cy.contains('div', /Drag and drop the files here/) // passes
I added a simple onDrop()
const onDrop = useCallback(acceptedFiles => {
console.log('acceptedFiles', acceptedFiles)
}, [])
and from this can see two console logs - the first has the file in acceptedFiles, the second has an empty array in acceptedFiles.
I have a simple test I want to create in cypress that would require a test where using a settings file I would create 1 test that executes for each entry in the settings file. The file would contain user/pwd/url/elementID and be used to login for each user at a custom URL, and validate that a specific elementID is displayed, logout, and do it again - iterating through the settings file until each is tested.
I want to do something like:
forEach(URL,uname,pwd,elementID) do
cy.request(URL)
cy.get('input:uname').btn.click
cy.get('input:pwd').btn.click
cy.get(data-cy=elementID).should(be present)
cy.get(btn.logout).btn.click
I highly doubt the above code is correct - but hopefully you get the idea. Main goal is to create a simple and quick script that will quickly iterate through an array to smoke test the functionality.
You can still iterate over your test data and create a test case out of each:
[
{
url,
uname,
pwd,
elementID,
}
].forEach(testData => {
it(`Test ${testData.uname} on ${testData.url}`, () => {
// your test code
});
});
Of course the array:
[
{
url,
uname,
pwd,
elementID,
}
]
does not need to be there in the same file, you can have it somewhere separate and import it into your spec file.
Caveat: You can only visit URLs from the same origin in one test! This code will only work if all URLs you want to test are from the same origin (i.e. same
Save your data in json format and put them in Cypress folder "fixtures"
[
{"user":"username1","pwd":"pwuser1","url":"url1","elementID":"#element_name1"},
{"user":"username2","pwd":"pwuser2","url":"url2","elementID":"#element_name2"}
]
(Don't forget the # in front of the element_name id)
Then this is your smoke_test.spec.js
//fetch the parameters from the file and save them as constant "login"
const login_data = require('../fixtures/login_data.json')
//Now you can fetch the parameters using "login_data"
describe('smoke test', () => {
it('loop through login list', () => {
//we call each entry "param" and loop through the lines of the json file
cy.get(login_data).each((param) => {
cy.visit(param.url)
cy.get('#id_of_username_field').type(param.user)
cy.get('#id_of_pw_field').type(param.pwd)
//The next line is only if you have a login button
cy.get('#id_of_login_button').click()
cy.get(param.elementID).should('be.visible')
cy.get('#id_of_logout_button)
})
})
})
I am trying to show a popup message to user using the task module. I have sent a attachment with type invoke. Here is the code
content.sendActivity(MessageFactory.attachment(CardFactory.heroCard('Task Module Invocation from Hero Card',
'This is a hero card with a Task Module Action button',
null, // No images
[{ type: 'invoke', title: 'Task Module', value: { type: 'task/fetch' } }])));
When I click on the Button I have received a request to my messaging end point and the response I have sent is
reply({
task: {
type: 'continue',
value: {
"title": "Task module title",
"height": 'large',
"width": 'large',
"url": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content",
"fallbackUrl": "https://67aa9b57.ngrok.io/api/internal/teams/tabs/content"
}
}
});
But in the popup message is blank. My ngrok url is not even being hit for the HTML page. This is what I see in popup. But the title was updated. I have no idea why it is not working.
Ant help would be thankful
This is pretty much always caused by the domain of the page not being listed in the valid domains for the application (you set this in your manifest json file, inside App Studio if you're using it). Because you've not listed this as a valid and "safe" domain, Teams won't even make any call at all, that's why there's nothing visible in the NGrok log even.
Just to be clear, we're talking about this section of the schema.
I need to change the name of [chat] header bot to Askme.
may i know how to change it in Microsoft bot.
Image is attched
Alternatively, if you want to set it at the time of initialization and are using the Botchat.App() setup rather than the iframed version of webchat, you can set this in the parameter object sent to webchat:
BotChat.App({
botConnection: botConnection,
user: { id: '1234', name: 'user'},
bot: { id: 'bot' },
chatTitle: "I'm a custom chat title"
}, document.getElementById("bot"));
The key parameter in this case being chatTitle; other options that can be sent to webchat can be found in the source code right here.
If you are not using the iframe'd webchat, you can just modify the header's .innerHTML like this:
var header = document.getElementsByClassName("wc-header");
header[0].innerHTML = "<span>Askme</span>"
Hi I have an app that is basically a html page.
I have a problem though as the html page is longer than the viewable screen and the page wont scroll.
Ive added this div:
<div id="scrollerId" style="width:320px; height:100px" x-mojo-element="Scroller">
<div >scrolling content</div>
</div>
but it doesn't do anything.
Please can someone help explain how to add one. or if i need to add anything to my javascript file or anything else ?
source/helloworld.js
enyo.kind({
name: "HelloWorld",
kind: enyo.VFlexBox,
components: [
{kind: "PageHeader", components: [
{content: "Page Header"}
]},
{flex: 1, kind: "Pane", components: [
{flex: 1, kind: "Scroller", components: [
//Insert your components here
]}
]},
{kind: "Toolbar", components: [
]}
]
});
Im a newbie to webos dev so go easy on me.
It might help to know what device(s) you're targeting. You've got a mix of a Mojo app and an Enyo app there, it looks like. Mojo is for the phones. If you're targeting the TouchPad, you should probably switch entirely to Enyo.
For the Mojo scroller to work in webOS you need to enable it as follows:
this.controller.setupWidget("myScroller",
this.attributes = {
},
this.model = {
scrollbars: true,
mode: "free"
});
You can read more about scrollers in Mojo here:
http://webos101.com/Scroller
However, I think you want an Enyo scroller so you get rid of the HTML in your app and use the method described above by XRay Enabler.
It is possible to use JavaScript functions to pull in content from a DIV in your HTML into an Enyo kind. Here's an example using jQuery:
this.$.myContent.setContent($("#someDiv").html());
Keep in mind you'll have to set allowHtml to true to allow HTML content.
First of all welcome to Enyo and webOS! Try to remember that Enyo is your framework that will create the elements of your HTML (the app). You generally do not manipulate it (HTML) directly.
As a simple example, you can create your content after the kind 'HelloWorld' has been rendered:
** your previous code **
{flex: 1, kind: "Scroller", components: [
//Insert your components here
{content: "", name:"myContent"}
]}
]},
{kind: "Toolbar", components: []}
],
create: function() {
this.inherited(arguments);
},
rendered: function() {
this.$.myContent.setContent("I can now add Content!");
}
});
Notice the added content container called myContent in the Scoller. Also, remove the previously created div's in your HTML file.
The content is then added in the rendered function.