$sanitize / ngsanitize in angular1 + meteor - angular-meteor

I'm working on a prototype for migrating my angularJs app to meteor + angularJs.
My old controller code uses $rootScope, $anchorScroll, $sanitize, $sce.
But confused how to use them in the meteor + angular 1 class.
I want to use these in the methods defined in the class which are accessed from the template.
Followed the tutorial and created class and in the constructor, provided all the services used in my old app. Example code:
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import { Meteor } from 'meteor/meteor';
import uiRouter from 'angular-ui-router';
import './SampleTest.html'
import {SampleData} from '../api/data';
class SampleTest {
constructor($stateParams,$scope,$reactive){
.....
}
const name = 'sampleTest';
// create a module
export default angular.module(name, [
angularMeteor,
uiRouter,
sanitize,
]).component(name, {
templateUrl: `imports/ui/apps/test/${name}/${name}.html`,
controllerAs: name,
controller: SampleTest
}).config(config);
..
..

Related

Use next-intl outside of a react component

Is there any way to use next-intl outside of a react component?
For now I get t by calling the hook useTranslations, and then pass its instance to my function:
function formatFoo(t, foo) {
if ....
t('bar');
}
export default function MyComponent() {
const t = useTranslations();
return <div>{formatFoo(t, "bar")}</div>
}
I wish I could just import t from next-intl as i18next permits for example.

Unable to achieve expected transaction in karate-gatling for load testing [duplicate]

I am trying to reuse karate scripts and perform load testing using gatling. The scenario defined is to load constant 50 users per second for 10 seconds. (To load test 500 users) However the number of requests per second does not exceed 20 requests per second in the gatling report. Please let me know if i am doing anything wrong.
ExampleTest.java code which executes Karate scripts
//package examples;
import com.intuit.karate.Results;
import com.intuit.karate.Runner;
import static org.junit.jupiter.api.Assertions.*;
import org.junit.jupiter.api.Test;
import java.io.File;
import java.util.ArrayList;
import java.util.Collection;
import java.util.List;
import net.masterthought.cucumber.Configuration;
import net.masterthought.cucumber.ReportBuilder;
import org.apache.commons.io.FileUtils;
class ExamplesTest {
#Test
void testParallel() {
//System.setProperty("karate.env", "demo"); // ensure reset if other tests (e.g. mock) had set env in CI
Results results = Runner.path("classpath:examples").tags("~#ignore").parallel(10);
generateReport(results.getReportDir());
assertEquals(0, results.getFailCount(), results.getErrorMessages());
}
public static void generateReport(String karateOutputPath) {
Collection<File> jsonFiles = FileUtils.listFiles(new File(karateOutputPath), new String[] {"json"}, true);
List<String> jsonPaths = new ArrayList<String>(jsonFiles.size());
jsonFiles.forEach(file -> jsonPaths.add(file.getAbsolutePath()));
Configuration config = new Configuration(new File("target"), "demo");
ReportBuilder reportBuilder = new ReportBuilder(jsonPaths, config);
reportBuilder.generateReports();
}
}
Scala Code to define load test scenarios.
package perf
import com.intuit.karate.gatling.PreDef._
import io.gatling.core.Predef._
import scala.concurrent.duration._
class KarateSimulate extends Simulation {
val protocol = karateProtocol(
"/v2/" -> Nil,
"/v2/" -> pauseFor("get" -> 0, "post" -> 25)
)
val userfeeder = csv("data/Token.csv").circular
val getScores = scenario("Get Scores for Students").feed(userfeeder).exec(karateFeature("classpath:examples/scores/student.feature"))
setUp(
getScores.inject(constantUsersPerSec(50) during (10 seconds)).protocols(protocol)
)
}
We updated the docs (in the develop branch) with tips on how to increase the thread-pool size if needed: https://github.com/intuit/karate/tree/develop/karate-gatling#increasing-thread-pool-size
Add a file called gatling-akka.conf to the root of the classpath (typically src/test/resources). Here is an example:
akka {
actor {
default-dispatcher {
type = Dispatcher
executor = "thread-pool-executor"
thread-pool-executor {
fixed-pool-size = 100
}
throughput = 1
}
}
}
Since we made some fixes recently, please try to build from source if the above does not work for 0.9.6.RC4, it is easy, here are the instructions: https://github.com/intuit/karate/wiki/Developer-Guide
If that does not work, it is important that you follow this process so that we can replicate: https://github.com/intuit/karate/wiki/How-to-Submit-an-Issue
Please see these links below for good examples of how others have worked with the Karate project team to replicate issues so that they can be fixed:
https://github.com/intuit/karate/issues/1668
https://github.com/intuit/karate/issues/845

Override registration decorator for Aurelia container in Jasmine test

We have a component that is registered as a transient service in the Aurelia DI container using a decorator, like this:
#transient()
export class EntityGraphObserver {
...
}
So that whenever it is injected, it is a new instance.
However when used in Jasmine specs, we want to override this default registration by passing a spy which is registered as an instance, so that we can mock the component, but it never works - the instance received by the test is always a new instance of the real component, not the spy, for example:
import { Container, Aurelia } from "aurelia-framework";
import { bootstrap } from "aurelia-bootstrapper";
import { StageComponent, ComponentTester } from "aurelia-testing";
import { Bootstrapper } from "...";
import { EntityGraphObserver } from "...";
describe("shareholder-step", () => {
let component: ComponentTester;
let observer: any;
let container: Container;
beforeEach(() => {
observer = jasmine.createSpyObj("EntityGraphObserver", ["attach"]);
component = StageComponent
.withResources("modules/business-details/shareholder-step")
.inView("<shareholder-step></shareholder-step>");
component.bootstrap((aurelia: Aurelia) => {
Bootstrapper.configure(aurelia);
container = aurelia.container;
container.registerInstance(EntityGraphObserver, observer);
});
});
afterEach(() => {
component.dispose();
});
it("initializes with shareholder data", async done => {
// arrange / act
await component.create(bootstrap);
const vm = component.viewModel as ShareholderStep;
await vm.activate(...); // some activation data
// assert
expect(vm.shareholders.length).toBe(1);
expect(observer.attach).toHaveBeenCalledTimes(1); // NEVER WORKS
done();
});
};
It looks like the transient decorator always overrides the registration we specify when bootstrapping the component for testing, which stops us from being able to isolate components with decorators.
The child container injected into the component is not available during the bootstrap phase, but I suspect that's where the transient registration is occurring, however I would expect it to only use that as the default registration where there is no existing registration in the container hierarchy, so maybe it's a bug in the Aurelia framework.
Is there a way to control the container setup so that registrations from decorators can be ignored or overridden, or is this a bug?

Do I need to bind to a component to use the apollo react client even if it has no UI?

I'm doing some business logic around an implementation of the Auth0 lock widget and need to call some graphql mutations to sign in. In this case there is no UI to render since it's simply a call to Auth0's lock.show() method. However, looking at all the apollo client examples with react - the graphql method seems to bind the functions to a component.
Can I call a gql mutation directly without binding it to a react component?
What's the best way to get the client from the ApolloProvider if I'm not in a component? Is there a static singleton instance i can reference from ApolloProvider or do I need to pass the client reference from the root application compoment?
You can use the withApollo() decorator exported from apollo-client to access the client as a prop inside a component. The ApolloProvider exposes the client to its child components through context. The withApollo() higher-order component accesses the client on context and passes it to its child as a prop.
So, if the auth.lock() function is being triggered by some type of UI interaction or one of the React lifecycle methods, you can access the client in that component and either call the mutation directly in the component or pass it as an argument through to the function that calls auth.lock().
However, since you want to access the client outside of the React tree, you have to access the client in a different way.
Alternatively, you can export the same client that you pass as a prop to ApolloProvider and import it wherever you need to use it in the app. Note, this singleton pattern won't work with server-side rendering. Example:
root.jsx
import React from 'react';
import { Router, browserHistory } from 'react-router';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { syncHistoryWithStore } from 'react-router-redux';
import routes from './routes';
const networkInterface = createNetworkInterface({
uri: '/graphql',
opts: {
credentials: 'same-origin'
}
});
export const client = new ApolloClient({
networkInterface
});
export const store = configureStore(browserHistory, client);
export const history = syncHistoryWithStore(browserHistory, store);
export default function Root() {
<ApolloProvider client={client} store={store}>
<Router
history={history}
routes={routes}
/>
</ApolloProvider>
}
some-other-module.js
import { client } from 'app/root';
export default function login(username, password) {
return client.mutate({
// ...mutationStuff
});
}
You can import ApolloProvider like this:
import { ApolloProvider } from "#apollo/client";

Call a method of a web component and respond to events

I'm working on a Dart project where I have created a custom element with the Web_ui package that has some animation. What I was hoping to do is to have within the dart code for the element something like this....
class MyElement extends WebComponent {
...
void StartAnimation() { ... }
...
}
and then in the main() function of the dart app itself I have something like this...
void main() {
MyElement elm = new MyElement();
elm.StartAnimation(); // Kicks off the animation
}
The Dart editor tells me that Directly constructing a web component is not currently supported. It then says to use WebComponent.forElement -- but I'm not clear on how to use that to achieve my goal.
While you can't yet import web components into a Dart file, you can access them via query() and .xtag. xtag gives you a reference the web component instance that the element is associated with. You do have to be careful that you allow the Web UI setup to complete so that xtag is given a value.
Here's an example:
import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
main() {
Timer.run(() {
var myElement = query('#my-element').xtag;
myElement.startAnimation();
});
}
This will get better with the ability to import components, directly subclass Element and maybe some lifecycle events that guarantee that you get the correct class back from a query(). This is what the exemple should look like in the future:
import 'dart:async';
import 'dart:html';
import 'package:web_ui/web_ui.dart';
import 'package:my_app/my_element.dart';
main() {
MyElement myElement = query('#my-element');
myElement.startAnimation();
}

Resources