I have been trying to use pdf-parse plugin on cypress to validate the context of some pdfs but I get the error "Fs.readFileSync is not a function". I am on version 12.4.1 but I did try other cypress versions with the same results (6.0.0, 7.5.0, 8.5.0, 9.0.0, 10.0.0). How do I use cypress pdf-parse? If you know any other way to parse the pdf content, please guide me as I have used pdfjs-dist and pdf2json with no success. Bellow is my code on one of my tries:
/// \<reference types="Cypress" /\>
import PdfParse from 'pdf-parse';
import Loader from './loader.js';
import Login from './login.js'
import PageActions from './pageActions.js';
import Validations from './validations.js';
describe('', () =\> {
const login = new Login()
const loader = new Loader()
const pageActions = new PageActions()
const validations = new Validations()
it('', () =\> {
cy.visit('/')
login.userName()
login.password();
login.clickSignIn()
loader.waitForLoaderToFinish()
pageActions.clickView();
loader.waitForLoaderToFinish();
Actions.clickLibrary();
loader.waitForLoaderToFinish()
pageActions.clickDownload();
loader.waitForLoaderToFinish();
validations.validatePDFHasBeenDownloaded();
cy.readFile('./cypress/downloads/Application Form.pdf')
.then(pdfBuffer =\> {
const options = {}; // optional options object
return pdfParse.pdf2json(pdfBuffer, options);
}).then(pdfData =\> {
cy.log(pdfData)
});
});
})
The problem seems to be with the "import PdfParse from 'pdf-parse';" but I have no clue what to do. Thank you in advance!!
I have tried to install it on versions 6.0.0, 7.5.0, 8.5.0, 9.0.0, 10.0.0 and I also have tried to use pdf2json and pdf-dist
Related
I am working on an app that before upgrading to Laravel 9 was working fine. I used Laravel Shift for the Laravel 9 upgrade and that bumped laravel-mix to the latest version 6.x and the problems started. I had some problems compiling which was weird but I fixed it. Now, I compile but I get the following error when I try to run the frontend:
Uncaught TypeError: Cannot read properties of undefined (reading 'silent')
this is the code that causes it:
VueI18n.prototype._initVM = function _initVM (data) {
var silent = Vue.config.silent;
Vue.config.silent = true;
this._vm = new Vue({ data: data, __VUE18N__INSTANCE__: true });
Vue.config.silent = silent;
};
I have no idea what this code is for?
I am running Vue version 2.5.22 with Laravel 9. Also, vue-i18n 8.28.2.
Here is my app.js:
import Vue from 'vue';
import router from './router';
import App from "./components/App";
import {store} from './store';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import { messages } from './locales/de';
const i18n = new VueI18n({
locale: 'de', // default and only locale
messages,
});
Vue.use(Vuelidate);
const app = new Vue({
el: '#app',
i18n,
router,
store,
components: {
App
},
});
Googling reveals nothing. Any ideas?
Try to include VueI18n as a component first before creating an instance:
Vue.use(VueI18n);
const il8n = new VueI18n({});
Following the official documentation: https://vuejs.org/api/sfc-script-setup.html#top-level-await
I'm trying to create an async component like that:
<template>
<p>Async data: {{asyncData}}</p>
</template>
<script setup>
import {ref} from 'vue'
const asyncData = ref(null)
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
await sleep(2000);
asyncData.value = 'abcd1234'
</script>
The component works fine.
The problem is: Eslint detects that error:
Parsing error: Cannot use keyword 'await' outside an async function
How can I deal with that?
In fact it's Vue who is forcing me to write an invalid code...
I see it can be solved updating Eslint config:
.eslintrc.cjs
module.exports = {
root: true,
parserOptions: {
sourceType: "module",
ecmaVersion: 2022,
},
...
};
But shouldn't be as default?
I'm trying to add Ckeditor5 to Sveltekit.
Using the node module works perfectly. I import the library onMount and use it.
// Works flawlessly
<script>
import { onMount } from 'svelte';
let Editor;
onMount(async () => {
const module = await import('#ckeditor/ckeditor5-build-balloon-block');
Editor = module.default;
Editor.create(document.querySelector('#editor'), {}).then((editor) => {
console.log(editor);
});
});
</script>
If I try to import a local build, however, module.default is always undefined. The same happens even when I just copy the node_module.
<script>
import { onMount } from 'svelte';
let Editor;
onMount(async () => {
// Import changed to local build
const module = await import('src/lib/ckeditor');
Editor = module.default;
Editor.create(document.querySelector('#editor'), {}).then((editor) => {
console.log(editor);
});
});
</script>
It's also worth noting that logging the local module just prints:
Module {Symbol(Symbol.toStringTag): 'Module'} to the console.
Can you share your /src/lib/ckeditor file contents?
Sidenote. when accessing DOM elements, you can do the folowing instead of using document.querySelector
<script>
let editorEl;
onMount(()=>{
Editor.create(editorEl, {})
})
</script>
<div bind:this={editorEl}></div>
I was finally able to get TypeQL working with Netlify Functions / AWS Lambda after a day of work, going over the docs and examples, and in the end desperate brute force.
I'm sharing my working code here for others (or for future reference of my own :P ) as it contains some counterintuitive keyword usage.
Normal Approach
The error I kept getting when using the simple example was:
Your function response must have a numerical statusCode. You gave: $ undefined
I searched of course in the issues, but none of the suggested solutions worked for me.
Working Code
import 'reflect-metadata'
import { buildSchema } from 'type-graphql'
import { ApolloServer } from 'apollo-server-lambda'
import { RecipeResolver } from 'recipe-resolver'
async function lambdaFunction() {
const schema = await buildSchema({
resolvers: [RecipeResolver],
})
const server = new ApolloServer({
schema,
playground: true,
})
// !!! NOTE: return (await ) server.createHandler() won't work !
exports.handler = server.createHandler()
}
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// !!! NOTE: weird but only way to make it work with
// AWS lambda and netlify functions (netlify dev)
// also needs a reload of the page (first load of playground won't work)
lambdaFunction()
// exports.handler = lambdaFunction wont work
// export { lambdaFunction as handler } wont work
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Also I got some reflection errors from the simple example
Unable to infer GraphQL type from TypeScript reflection system. You need to provide explicit type for argument named 'title' of 'recipe' of 'RecipeResolver
So I had to figure out how to add explicit type to #Arg:
// previous:
// recipe(#Arg('title') title: string)
// fixed:
recipe( #Arg('title', (type) => String) title: string
I share the code that works for me
// File: graphql.ts
import 'reflect-metadata'
import { buildSchema } from 'type-graphql'
import { ApolloServer } from 'apollo-server-lambda'
import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core'
import { RecipeResolver } from './recipe-resolver'
export const createHandler = async function(){
const schema = await buildSchema({
resolvers: [RecipeResolver],
})
const server = new ApolloServer({
schema,
introspection: true,
plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
})
return server.createHandler()
}
export const handler = async function(event, context, callback) {
const graphqlHandler = await createHandler()
return await graphqlHandler(event, context, callback)
}
// Lambda: graphql.handler
node16.x
type-graphql ^1.1.1
graphql ^15.3.0
apollo-server-lambda: ^3.10.2
I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)
I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?
Here is the test:
import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'
describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)
const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})
And PasswordResetContainer looks like this:
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'
export const validate = (values) => {
const errors = {}
if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}
export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))
Output from test is following:
PasswordResetContainer › should render only one ReduxForm
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
2
Edit (partial solution found):
When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.
Why do I need to do such a magic?
A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that
wrapper.find('ReduxForm')
looks like:
wrapper.find('ReduxForm').first()