Here is my testing code with testing-library with angular. Here I am using title variable for regexp.
import { render, screen } from '#testing-library/angular';
import '#testing-library/jest-dom';
import { AppComponent } from './app.component';
describe('App component', () => {
it('app should render', async () => {
const title = "Hello there " + new Date() + 'app is running!';
const app = await render(AppComponent, {
componentProperties: {
title: title
}
});
expect(app).toBeTruthy();
expect(screen.getByText(new RegExp(title, "i"))).toBeInTheDocument();
screen.debug();
});
})
But getting an error as :
TestingLibraryElementError: Unable to find an element with the text: /Hello there Fri Mar 11 2022 20:07:42 GMT+0530 (India Standard Time)app is running!/i. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, <script />, <style />
<body>
<div
id="root0"
ng-version="13.1.3"
>
<h1>
Hello there Fri Mar 11 2022 20:07:42 GMT+0530 (India Standard Time)app is running! app is running!
</h1>
<router-outlet />
</div>
</body>
17 | });
18 | expect(app).toBeTruthy();
> 19 | expect(screen.getByText(new RegExp(title, "i"))).toBeInTheDocument();
| ^
20 | screen.debug();
21 | });
22 | })
Any one help me to understand the issue here? how to handle this scenario?
You have to escape the title before creating the RegExp because it contains regexp specific chars (+, (, )).
const title = "Hello there " + new Date() + 'app is running!';
new RegExp(title, 'i').test(title)
// false
Related
I am building a svelte browser extension, and in order to load images, I found out that I can use chrome.runtime.getURL(relative_path), which is well supported across browsers.
So, I wrote this code:
<img
src={chrome.runtime.getURL("image.png")}
alt={"an image"}
/>
When trying to build, I get:
transforming (8) node_modules/.pnpm/svelte#3.55.1/node_modules/svelte/transition/ind13:09:26 [vite-plugin-svelte] /MyComponent.svelte:17:9 'chrome' is not defined
15: <button on:click={handleOnClick}>
16: <img
17: src={chrome.runtime.getURL("image.png")}
^
18: alt={"an image"}
19: />
✓ 25 modules transformed.
I tried to polyfill this using webextension-polyfill and #types/chrome npm packages with no success.
My workaround:
I created this function
const polifillImg = (img: string) => {
// At build time this will be replaced by chrome.runtime.getURL(imgSrcBase + img)
return (
"__REPLACE_WITH_CHROME__" + imgSrcBase + img + "__CLOSING_PARENTESIS__"
);
};
Which I can now use like so:
<img
src={polifillImg("image.png")}
alt={"an image"}
/>
And in my vite.config.ts:
import { defineConfig } from "vite";
import { svelte } from "#sveltejs/vite-plugin-svelte";
import { replaceCodePlugin } from "vite-plugin-replace";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
replaceCodePlugin({
replacements: [
{ from: '"__REPLACE_WITH_CHROME__" + ', to: "chrome.runtime.getURL(" },
{ from: ' + "__CLOSING_PARENTESIS__"', to: ")" },
],
}),
svelte(),
],
});
Which, you know, works, but it is not great.
I would like to know how to correctly use the chrome object the right way. Can someone show me the way?
Thanks
I am using Rotativa v1.7.3 with Asp.Net MVC.
I am getting the below error when i try to use views for header and footer page.
Qt: Could not initialize OLE (error 80070005)
Error: Failed loading page https://mywebsite.com/SomeArea/SomeController/ReportHeader (sometimes it will work just to ignore this error with --load-error-handling ignore)
Exit with code 1 due to network error: HostNotFoundError
| ExceptionSource - Rotativa | ExceptionStackTrace: at Rotativa.WkhtmlDriver.Convert(String wkhtmlPath, String switches, String html, String wkhtmlExe)
at Rotativa.WkhtmltopdfDriver.ConvertHtml(String wkhtmltopdfPath, String switches, String html)
at Rotativa.ViewAsPdf.CallTheDriver(ControllerContext context)
at Rotativa.AsResultBase.BuildFile(ControllerContext context)
at SomeProject.Areas.SomeArea.Controllers.SomeController.d__30.MoveNext() in E:\MyApplication\SomeProject\Areas\SomeArea\Controllers\SomeController.cs:line 1623
On local its working fine and the PDF is getting generated successfully, but is Server its not working.
Code Used
// Working
customSwitches = "--dpi 150 " +
"--footer-left \"" + Session["Name"] + " printed report on: " + centralTimeZone.ToString("dddd, dd MMMM yyyy hh:mm tt") + "\" " +
"--footer-right \"Page: [page] of [toPage]\" " +
"--footer-line " +
"--footer-font-size \"9\" " +
"--footer-spacing 5 " +
"--footer-font-name \"calibri light\"";
// Not Working
customSwitches = string.Format("--allow {0} " +
"--header-html {0}",
Url.Action("ReportHeader", "Some", new { area = "SomeArea" }, Request.Url.Scheme));
var pdfResult = new Rotativa.ViewAsPdf("../Survey/FinalReport")
{
FileName = pdfname,
Model = reportModel,
Cookies = cookieCollection,
CustomSwitches = customSwitches,
FormsAuthenticationCookieName = FormsAuthentication.FormsCookieName, // Removing this and adding anonymous authentication in header/footer action also does not work.
};
public ActionResult ReportHeader()
{
ViewBag.LogoPath = Session["HeaderFileEntryString"] as string;
return View("~/Areas/SomeArea/Views/Some/ReportHeader.cshtml");
}
Report Header View
#{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Header</title>
</head>
<body>
<img src="#ViewBag.LogoPath" height="185" width="1420"/>
</body>
</html>
When running without view for header/footer, pdf is getting generated successfully, but when using view for header/footer, pdf is not getting generated.
On using "--load-error-handling ignore", the PDF gets generated, but the header/footer are not coming.
Github Link - https://github.com/webgio/Rotativa/issues/231
import React from "react";
import GoogleMapReact from "google-map-react";
const AnyReactComponent = ({ text }) => <div>{text}</div>;
export default function AppMapPage() {
const defaultProps = {
center: {
lat: 10.99835602,
lng: 77.01502627,
},
zoom: 11,
};
return (
<div style={{ height: "100vh", width: "100%" }}>
<GoogleMapReact
bootstrapURLKeys={{ key: "my key" }}
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
>
<AnyReactComponent lat={59.955413} lng={30.337844} text="My Marker" />
</GoogleMapReact>
</div>
);
}
I have been trying to solve it for a while. I am trying to run simple example of google-map-react. But, This does not load maps. Instead gives following errors and the page is blank.
google_map_markers.js:100 Uncaught TypeError: Cannot read properties of undefined (reading 'getChildren')
at o._getState (google_map_markers.js:100:1)
at new o (google_map_markers.js:248:1)
at constructClassInstance (react-dom.development.js:13522:1)
at updateClassComponent (react-dom.development.js:20497:1)
at beginWork (react-dom.development.js:22440:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)
at performUnitOfWork (react-dom.development.js:26513:1)
To resolve these issues, you have to remove *<React.StrictMode>* in the index.js file.
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>);
To
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
it's due to versioning. I downgraded from 18 to 17 and it worked. Man sometimes open source code consumes your all day.
I Just removed the <React.StrictMode> in the index.js file and it worked for me.
I'm just getting started with Playwright so I don't know if there is something I'm missing. I do not have any other testing framework wired up to it. I'm using #playwright/test v1.14.1.
This test:
import { test, expect } from "#playwright/test";
test("focus sets tab indexes appropriately", async ({ page }) => {
await page.goto("http://localhost:3000/test");
const inputs = page.locator("input");
await expect(inputs).toHaveCount(5);
await inputs.evaluateAll(async (nodes) => {
console.log(nodes);
for (const node of nodes) {
console.log(node);
await expect(node.tabIndex).toBe(0);
}
});
});
is producing the following error:
locator.evaluateAll: Evaluation failed: ReferenceError: _test is not defined
at eval (eval at evaluate (:3:1339), <anonymous>:6:7)
at t.default.evaluate (<anonymous>:3:1362)
at t.default.<anonymous> (<anonymous>:1:44)
5 | const inputs = page.locator("input");
6 | await expect(inputs).toHaveCount(5);
> 7 | await inputs.evaluateAll(async (nodes) => {
| ^
8 | console.log(nodes);
9 | for (const node of nodes) {
10 | console.log(node);
If I remove the call to expect, the test passes but the console.log still will not fire off.
input.evaluateAll gets executed inside the browser which is a different execution context in which expect is not available (Node.js vs. e.g. Chromium).
See here: https://playwright.dev/docs/evaluating
I am trying to run the Saxon CE example on the IBM Developerworks
It raises this error:
SaxonCE.XSLT20Processor 23:04:41.615
SEVERE: XPathException in invokeTransform: Either a source document or an initial template must be specified
http://localhost:8984/static/SaxonceDebug/7FFD07C49946B3F4B1DE49E72F7E85FA.cache.html
Line 876
I can run other Saxon CE examples. Is this some API change?
As the error suggest you need to supply a source document or an initial template.
Something like:
<script>
var onSaxonLoad = function() {
Saxon.run( {
stylesheet: "books.xsl",
source: "books.xml"
});
or
<script type="text/javascript"> var onSaxonLoad = function() { proc = Saxon.run( {
stylesheet: 'scripts/stylesheet.xsl', initialTemplate: 'main' } ); };
</script>
Take a look at:
http://www.saxonica.com/ce/user-doc/1.1/index.html#!starting/running