How to configure visual regression testing using Loki for Angular and Web components in Storybook - automated-tests

We have a design system with the core components built on Stencil and cross-compiled across React and Angular frameworks. Ideally we have all the components in React, Angular and Web-components. We use storybook as Component explorer. Now that we have a need for visual regression testing, I have been going through many visual regression test tools that there and found Loki to be most suitable.
I was able to successfully configure Loki for React components alone by passing the command line arguments
yarn loki test -- --port 6003
where my react components in storybook run on port 6003. Angular and web components in storybook run on ports 6004 and 6002 respectively.
The documentation for Loki, has configurations for react and native react only. Not sure if I have missed for the rest.
But I am clueless about how this has to be done for Angular and Web-components. Any leads on this is much appreciated!

Related

Adding template to existing React Application

I have a medium experience in developing applications with React, and up to study and experience I have always used very basic layouts, creating components and styling with a .css file
Currently I want to start using the various react templates that I find online, such as:
"Connect Plus React Free Admin Template" etc.
This is the first time I try to integrate a template into an existing application.
So I tried to copy from the template what I needed and then bring it back to my application.
Then update package.json and package-lock.json and run npm install.
Unfortunately, then starting the app with npm start it broke and did not start anymore.
Do you have any tips, advice or guides on how to do this?

React Native and using npm modules

So this is the case: we developed a web application. Now we are developing an app in React Native with Firebase, for iOS and Android... Is there a way to make use of the npm private module that we developed for the web application? Do we need to initialise firebase/app as well in typescript? Or is it really needed to develop a seperate module for android and a separate module for iOS?
So in this npm private module there are standardized ways for our company to get and set data in firestore.
Regards, Peter
As far as I understand it, every package from npm is mapped or linked to one in the respective operating system, that is Android and iOS in your case.
Is there a way to make use of the npm private module that we developed
for the web application?
Or is it really needed to develop a seperate module for android and a
separate module for iOS?
When there is no respective implementation for the operating system, that "translates" your npm package, it will not work.
Do we need to initialise firebase/app as well in typescript?
Yes indeed, also in react native you need to initialise firebase app.
So in this npm private module there are standardised ways for our
company to get and set data in firestore.
I cannot say why you did this in a custom way, if you use the "normal" firestore methods then maybe there is still a way to reuse some code? But that is hard to say from the outside.

class names in React production

I am using create-react-app-2, I've recently deployed my app to production (building the react app using npm run build).
I have a number of issues/questions.
My class names are being converted to a form jssxxx. Can you tell me why this is, and which part of the create-react-app is responsible for this? The css-loader?
I'm styling material UI with styled components, and sometimes my styles aren't applied. Where would one start when debugging this in production?
BTW, all the styles seem to be applied in development.

does anyone have a real web-project working with Flow types?

I have a simple web-project with React, webpac-dev-server, eslint, prettier, jest which is not acceptably working with Flow.
Any changes make Flow to calculate new decision during 4-5 minutes!
I made configurations for WebStorm and VSCode - situation with Flow in VSCode is better but not enough for developing code
I want to ensure that it's only my project's problem or it's a global situation
You can try my simple project in WebStorm and VSCode here
try to star client then server and then test-watch task and try to edit App.css

Giving native look to a meteor/cordova app with css, conditioning it to the platform build

I am developing an hybrid mobile app with Meteor and Cordova, and in order to have a native look I want to use two different stylesheets: Bootstrap material design for android and Ratchet for IOS.
What is the simplest way to conditionally include the respective css and javascript files? i.e. the command:
meteor run ios
should generate an app with the ios css, while:
meteor run android
should generate the app with android css.
If there is no simple way, is the Meteor team working on this issue?
This is what the merges-folder is for. Take a look at the documentation. Just search for Using merges to Customize Each Platform...

Resources