Merge pull request #178 from glorious-codes/edit_playground_link_impr…

…ovements Edit playground link improvements
glorious-codes · Jan 29, 2021 · 20f3a6e · 20f3a6e
2 parents 1a1550b + 629cc69
commit 20f3a6e
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@glorious/pitsby",
-  "version": "1.30.1",
+  "version": "1.30.2",
   "description": "Docs generator for AngularJS, React, Vue and Vanilla components",
   "author": "Rafael Camargo <hello@rafaelcamargo.com>",
   "repository": {
@@ -71,7 +71,7 @@
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {
-    "angular": "^1.8.0",
+    "angular": "^1.8.2",
     "angular-mocks": "^1.7.5",
     "babel-eslint": "^10.0.3",
     "codecov": "^3.1.0",

diff --git a/src/cli/services/cdn.test.js b/src/cli/services/cdn.test.js
@@ -12,14 +12,14 @@ describe('CDN Service', () => {
 
   it('should build scripts tag for Angular 1.8.0 by default', () => {
     expect(service.buildAngularScriptTag()).toEqual(
-      '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>'
+      '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.js"></script>'
     );
   });
 
   it('should build Angular scripts tag for production when node env is production', () => {
     mockNodeEnv('production');
     expect(service.buildAngularScriptTag()).toEqual(
-      '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>'
+      '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>'
     );
   });
 

diff --git a/...components/external-component-example-edit-link/external-component-example-edit-link.html b/...components/external-component-example-edit-link/external-component-example-edit-link.html
@@ -1,5 +1,5 @@
 <span class="p-external-component-example-edit-link">
-  <a ng-href="{{ $ctrl.playgroundLinkHref }}">
+  <button ng-click="$ctrl.goToPlayground()">
     Edit on Playground
-  </a>
+  </button>
 </span>
diff --git a/...s/components/external-component-example-edit-link/external-component-example-edit-link.js b/...s/components/external-component-example-edit-link/external-component-example-edit-link.js
@@ -4,21 +4,22 @@ import codeIndentationService from '@scripts/services/code-indentation';
 import vueControllerSyntaxService from '@scripts/services/vue-controller-syntax';
 import template from './external-component-example-edit-link.html';
 
-function controller(){
+function controller(routeService){
   const $ctrl = this;
 
-  $ctrl.$onInit = () => {
-    setPlaygroundLinkHref(buildPlaygroundLinkHref($ctrl.engine, $ctrl.example));
+  $ctrl.goToPlayground = () => {
+    routeService.go('app.external-components.playground', {
+      code: buildPlaygroundCode($ctrl.engine, $ctrl.example),
+      source: 'edit-link'
+    });
   };
 
-  function buildPlaygroundLinkHref(engine, { template, controller, styles } = {}){
-    const baseHref = `#!/components/${engine}/playground`;
-    const code = playgroundCodeSearchParamService.stringify(
+  function buildPlaygroundCode(engine, { template, controller, styles }){
+    return playgroundCodeSearchParamService.stringify(
       formatCode(template),
       getControllerFormatter(engine)(controller),
       formatCode(styles)
     );
-    return `${baseHref}?code=${code}&source=edit-link`;
   }
 
   function getControllerFormatter(engine){
@@ -78,15 +79,13 @@ function controller(){
   function formatCode(code){
     return code && codeIndentationService.normalize(code) || '\n';
   }
-
-  function setPlaygroundLinkHref(href){
-    $ctrl.playgroundLinkHref = href;
-  }
 }
 
+controller.$inject = ['routeService'];
+
 export default {
   bindings: {
-    engine: '<',
+    engine: '@',
     example: '<'
   },
   controller,

diff --git a/...ponents/external-component-example-edit-link/external-component-example-edit-link.test.js b/...ponents/external-component-example-edit-link/external-component-example-edit-link.test.js
@@ -1,13 +1,14 @@
 describe('External Component Example Edit Link', () => {
-  let compile;
+  let compile, routeService;
 
   beforeEach(() => {
     angular.mock.module('pitsby-app');
-    inject(($rootScope, $compile) => {
+    inject(($rootScope, $compile, $injector) => {
+      routeService = $injector.get('routeService');
       const scope = $rootScope.$new(true);
       compile = (bindings = {}) => {
         const template = `<p-external-component-example-edit-link
-                            data-engine="$ctrl.engine"
+                            data-engine="{{ $ctrl.engine }}"
                             data-example="$ctrl.example">
                           </p-external-component-example-edit-link>`;
         scope.$ctrl = bindings;
@@ -16,14 +17,15 @@ describe('External Component Example Edit Link', () => {
         return element;
       };
     });
+    routeService.go = jest.fn();
   });
 
   it('should have appropriate css class', () => {
     const element = compile();
     expect(element.find('span').attr('class')).toEqual('p-external-component-example-edit-link');
   });
 
-  it('should contain a link to playground with proper Vue code search param value', () => {
+  it('should go to Vue playground on button click', () => {
     const engine = 'vue';
     const example = {
       controller: {
@@ -44,11 +46,34 @@ describe('External Component Example Edit Link', () => {
       '3LmFsZXJ0KFwiSGV5IVwiKTtcbiAgICB9XG4gIH1cbn07Iiwic3R5bGVzIjoiLnRlc3QtYn',
       'RuIHsgY29sb3I6IHJlZDsgfSJ9'
     ].join('');
-    const expectedHref = `#!/components/vue/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
+  });
+
+  it('should go to Vue-template-only playground on button click', () => {
+    const engine = 'vue';
+    const example = {
+      template: '<pd-banner class="test-btn">Success!</pd-banner>',
+      styles: '.test-btn { color: red; }'
+    };
+    const element = compile({engine, example});
+    const expectedCodeSearchParam = [
+      'eyJ0ZW1wbGF0ZSI6IjxwZC1iYW5uZXIgY2xhc3M9XCJ0ZXN0LWJ0blwiPlN1Y2Nlc3MhPC9',
+      'wZC1iYW5uZXI%2BIiwiY29udHJvbGxlciI6InJldHVybiB7XG4gIGRhdGEoKXtcbiAgICBy',
+      'ZXR1cm4ge307XG4gIH0sXG4gIFwibWV0aG9kc1wiOnt9XG59OyIsInN0eWxlcyI6Ii50ZXN',
+      '0LWJ0biB7IGNvbG9yOiByZWQ7IH0ifQ%3D%3D'
+    ].join('');
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 
-  it('should contain a link to playground with proper React code search param value', () => {
+  it('should go to React playground on button click', () => {
     const engine = 'react';
     const example = {
       controller: `function(){
@@ -69,11 +94,14 @@ describe('External Component Example Edit Link', () => {
       '3QtYnRuXCIgb25DbGljaz17b25DbGlja30%2BQ2xpY2sgSGVyZTwvYnV0dG9uPlxuICAgIC',
       'lcbiAgfVxufSIsInN0eWxlcyI6Ii50ZXN0LWJ0biB7IGNvbG9yOiByZWQ7IH0ifQ%3D%3D'
     ].join('');
-    const expectedHref = `#!/components/react/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 
-  it('should contain a link to playground with proper AngularJS with depedencies code search param value', () => {
+  it('should go to Angular-with-dependencies playground on button click', () => {
     const engine = 'angular';
     const example = {
       controller: `function($window){
@@ -92,11 +120,14 @@ describe('External Component Example Edit Link', () => {
       'bnRyb2xsZXIuJGluamVjdCA9IFsnJHdpbmRvdyddO1xuXG5yZXR1cm4gY29udHJvbGxlcjs',
       'iLCJzdHlsZXMiOiIudGVzdC1idG4geyBjb2xvcjogcmVkOyB9In0%3D'
     ].join('');
-    const expectedHref = `#!/components/angular/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 
-  it('should contain a link to playground with proper AngularJS template-only code search param value', () => {
+  it('should go to Angular-template-only playground on button click', () => {
     const engine = 'angular';
     const example = {
       template: '<p class="test-p">Hello!</button>',
@@ -109,11 +140,14 @@ describe('External Component Example Edit Link', () => {
       'B0aGlzO1xufVxuXG5jb250cm9sbGVyLiRpbmplY3QgPSBbXTtcblxucmV0dXJuIGNvbnRyb',
       '2xsZXI7Iiwic3R5bGVzIjoiLnRlc3QtYnRuIHsgY29sb3I6IHJlZDsgfSJ9'
     ].join('');
-    const expectedHref = `#!/components/angular/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 
-  it('should contain a link to playground with proper Vanilla code search param value', () => {
+  it('should go to Vanilla playground on button click', () => {
     const engine = 'vanilla';
     const example = {
       controller: `function(element){
@@ -130,11 +164,14 @@ describe('External Component Example Edit Link', () => {
       'ydChcIkhleSFcIikpO1xufVxuXG5yZXR1cm4gY29udHJvbGxlcjsiLCJzdHlsZXMiOiIudG',
       'VzdC1idG4geyBjb2xvcjogcmVkOyB9In0%3D'
     ].join('');
-    const expectedHref = `#!/components/vanilla/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 
-  it('should contain a link to playground with proper Vanilla template-only code search param value', () => {
+  it('should go to Vanilla-template-only playground on button click', () => {
     const engine = 'vanilla';
     const example = {
       template: '<button class="test-btn">Click Here</button>',
@@ -147,7 +184,10 @@ describe('External Component Example Edit Link', () => {
       '5cbnJldHVybiBjb250cm9sbGVyOyIsInN0eWxlcyI6Ii50ZXN0LWJ0biB7IGNvbG9yOiByZ',
       'WQ7IH0ifQ%3D%3D'
     ].join('');
-    const expectedHref = `#!/components/vanilla/playground?code=${expectedCodeSearchParam}&source=edit-link`;
-    expect(element.find('a').attr('href')).toEqual(expectedHref);
+    element.find('button').triggerHandler('click');
+    expect(routeService.go).toHaveBeenCalledWith('app.external-components.playground', {
+      code: expectedCodeSearchParam,
+      source: 'edit-link'
+    });
   });
 });
diff --git a/src/webapp/scripts/components/external-component-example/external-component-example.html b/src/webapp/scripts/components/external-component-example/external-component-example.html
@@ -35,7 +35,7 @@
     </p-tab>
   </p-tabs>
   <p-external-component-example-edit-link
-    data-engine="$ctrl.engine"
+    data-engine="{{ $ctrl.engine }}"
     data-example="$ctrl.example">
   </p-external-component-example-edit-link>
 </div>
diff --git a/src/webapp/styles/external-component-example-edit-link.styl b/src/webapp/styles/external-component-example-edit-link.styl
@@ -2,14 +2,20 @@
 @require '_variables'
 
 .p-external-component-example-edit-link
-  a
+  button
     padding-right 20px
     color $color-blue
     font-size $font-size-xxs
     font-weight 600
     text-decoration none
+    background-color transparent
     background-position right center
     background-repeat no-repeat
     background-image('open.svg')
-    &:hover
+    border 0
+    cursor pointer
+    webkit-appearance(none)
+    &:hover,
+    &:active,
+    &:focus
       text-decoration underline