Add support for handing props to the component in LDRouteGuard (#61)

Co-authored-by: Benjamin Frost <[email protected]>

Author: nathanmyles

README.md

@@ -104,7 +104,7 @@ export default {
 
 ### LDRouteGuard Component
 
-Use this as an intermediary component on a route you need to guard with a feature flag; it is based on the `ldRedirectMixin`. All props are passed to the component rendered.
+Use this as an intermediary component on a route you need to guard with a feature flag; it is based on the `ldRedirectMixin`.
 
 ```javascript
 import { LDRouteGuard } from 'vue-ld';
@@ -115,6 +115,7 @@ const route = {
   component: LDRouteGuard,
   props: {
     component: SecretComponent,
+    componentProps: { exampleProp: true },
     requiredFeatureFlag: 'palantir',
     to: { name: 'away' },
   },
@@ -123,12 +124,13 @@ const route = {
 
 #### Props
 
-| key            | description                                                                                    | type                              |
-| :------------- | ---------------------------------------------------------------------------------------------- | --------------------------------- |
-| `component`    | The component to be rendered given the required feature flag is true.                          | `vue component`                   |
-| `requiredFlag` | If the given feature flag is false, the user will be redirected to the given route.            | `string`                          |
-| `to`           | The path which vue router will push. Functions passed are expected to resolve to a valid path. | `string`, `object`, or `function` |
-| `invertFlag`   | If set to true the the inverse of the requiredFlag's value will be used.                       | `boolean`                         |
+| key              | description                                                                                    | type                              |
+| :--------------- | ---------------------------------------------------------------------------------------------- | --------------------------------- |
+| `component`      | The component to be rendered given the required feature flag is true.                          | `vue component`                   |
+| `componentProps` | The props object to hand to the component above.                                               | `object`                          |
+| `requiredFlag`   | If the given feature flag is false, the user will be redirected to the given route.            | `string`                          |
+| `to`             | The path which vue router will push. Functions passed are expected to resolve to a valid path. | `string`, `object`, or `function` |
+| `invertFlag`     | If set to true the the inverse of the requiredFlag's value will be used.                       | `boolean`                         |
 
 ## Development
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-ld",
-  "version": "0.1.11",
+  "version": "0.2.0",
   "description": "A Vue.js wrapper for the LaunchDarkly SDK for Browser JavaScript",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package.json

@@ -1,5 +1,5 @@
 <template>
-  <component :is="importedComponent" v-if="show" v-bind="$props"></component>
+  <component :is="importedComponent" v-if="show" v-bind="componentProps"></component>
 </template>
 
 <script>
@@ -9,6 +9,7 @@ export default {
   mixins: [ldRedirectMixin()],
   props: {
     component: { type: [Function, Object, Promise], required: true },
+    componentProps: { type: Object, required: false, default: () => {} },
     requiredFeatureFlag: { type: String, required: true },
     to: { type: [String, Object, Function], required: true },
     invertFlag: { type: Boolean, required: false, default: false },

src/components/LDRouteGuard.vue

@@ -11,8 +11,11 @@ const mixins = [ldRedirect('myFlag', '/')];
 
 const EmptyComponent = {
   name: 'empty-component',
-  render(h) {
-    return h('div');
+  props: {
+    title: { type: String, require: false, default: 'title' },
+  },
+  render(createElement) {
+    return createElement('div', this.title);
   },
 };
 
@@ -27,7 +30,7 @@ describe('ldRedirectMixin', () => {
   let localVue;
   let mocks;
   let wrapper;
-  const finishSetup = async (component, invertFlag) => {
+  const finishSetup = async (component, invertFlag, props = {}) => {
     localVue = createLocalVue();
     localVue.use(VueLd, vueLdOptions);
     mocks = {
@@ -39,6 +42,7 @@ describe('ldRedirectMixin', () => {
       mocks,
       propsData: {
         component,
+        componentProps: props,
         requiredFeatureFlag: 'myFlag',
         to: '/',
         invertFlag,
@@ -79,6 +83,19 @@ describe('ldRedirectMixin', () => {
     await finishSetup(EmptyComponent, false);
     expect(wrapper.vm.$router.push).not.toHaveBeenCalled();
     expect(wrapper.findComponent(EmptyComponent).exists()).toBe(true);
+    expect(wrapper.findComponent(EmptyComponent).html()).toBe('<div>title</div>');
+  });
+
+  it('does not redirect with feature flag & contains component with props', async () => {
+    server.respondWith([
+      200,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(flagsResponse),
+    ]);
+    await finishSetup(EmptyComponent, false, { title: 'a different title' });
+    expect(wrapper.vm.$router.push).not.toHaveBeenCalled();
+    expect(wrapper.findComponent(EmptyComponent).exists()).toBe(true);
+    expect(wrapper.findComponent(EmptyComponent).html()).toBe('<div>a different title</div>');
   });
 
   it('redirects with featureflag if invertFlag is set', async () => {