diff --git a/packages/altair-app/src/app/modules/altair/components/action-bar/__snapshots__/action-bar.component.spec.ts.snap b/packages/altair-app/src/app/modules/altair/components/action-bar/__snapshots__/action-bar.component.spec.ts.snap
index 7b0cdd720d..f02be32e97 100644
--- a/packages/altair-app/src/app/modules/altair/components/action-bar/__snapshots__/action-bar.component.spec.ts.snap
+++ b/packages/altair-app/src/app/modules/altair/components/action-bar/__snapshots__/action-bar.component.spec.ts.snap
@@ -6,27 +6,27 @@ exports[`ActionBarComponent should render correctly 1`] = `
     class="action-bar"
   >
     <button
-      class="app-button"
+      class="app-button prettify-button"
     >
         
     </button>
     <button
-      class="app-button"
+      class="app-button clear-editor-button"
     >
         
     </button>
     <button
-      class="app-button"
+      class="app-button set-headers-button"
     >
         
     </button>
     <button
-      class="app-button"
+      class="app-button set-variables-button"
     >
         
     </button>
     <button
-      class="app-button"
+      class="app-button set-subscription-url-button"
     >
         
     </button>
@@ -34,12 +34,12 @@ exports[`ActionBarComponent should render correctly 1`] = `
       class="actions-right right"
     >
       <button
-        class="app-button"
+        class="app-button reload-docs-button"
       >
           
       </button>
       <button
-        class="app-button"
+        class="app-button show-docs-button"
       >
           
       </button>
diff --git a/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.html b/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.html
index 8eccac14cc..214ecafb38 100644
--- a/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.html
+++ b/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.html
@@ -1,25 +1,25 @@
 <div class="action-bar">
-  <button class="app-button" (click)="this.prettifyCodeChange.next()">
+  <button class="app-button prettify-button" (click)="this.prettifyCodeChange.next()">
     {{ 'PRETTIFY_BUTTON' | translate }}
   </button>
-  <button class="app-button" (click)="this.clearEditorChange.next()">
+  <button class="app-button clear-editor-button" (click)="this.clearEditorChange.next()">
     {{ 'CLEAR_BUTTON' | translate }}
   </button>
-  <button class="app-button" (click)="this.toggleHeaderDialog.next()">
+  <button class="app-button set-headers-button" (click)="this.toggleHeaderDialog.next()">
     {{ 'SET_HEADERS_BUTTON' | translate }}
   </button>
-  <button class="app-button" (click)="this.toggleVariableDialog.next()">
+  <button class="app-button set-variables-button" (click)="this.toggleVariableDialog.next()">
     {{ 'SET_VARIABLES_BUTTON' | translate }}
   </button>
-  <button class="app-button" (click)="this.toggleSubscriptionUrlDialog.next()">
+  <button class="app-button set-subscription-url-button" (click)="this.toggleSubscriptionUrlDialog.next()">
     {{ 'SUBSCRIPTION_URL_TEXT' | translate }}
   </button>
   <div class="actions-right right">
-    <button class="app-button" (click)="reloadDocsChange.next()">
+    <button class="app-button reload-docs-button" (click)="reloadDocsChange.next()">
       {{ 'RELOAD_DOCS_BUTTON' | translate }}
     </button>
     <button
-      class="app-button"
+      class="app-button show-docs-button"
       (click)="toggleDocsChange.next()"
       [ngClass]="{ 'active-grey': showDocs }"
     >
diff --git a/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.spec.ts b/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.spec.ts
index b80e95833c..07fb08bbeb 100644
--- a/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.spec.ts
+++ b/packages/altair-app/src/app/modules/altair/components/action-bar/action-bar.component.spec.ts
@@ -24,4 +24,47 @@ describe('ActionBarComponent', () => {
   it('should render correctly', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
+
+  it('should emit prettifyCodeChange event when Prettify button is clicked', () => {
+    const prettifyButton = wrapper.find('.prettify-button');
+    prettifyButton.emit('click');
+    expect(wrapper.emitted('prettifyCodeChange')).toBeTruthy();
+  });
+
+  it('should emit clearEditorChange event when Clear Editor button is clicked', () => {
+    const clearButton = wrapper.find('.clear-editor-button');
+    clearButton.emit('click');
+    expect(wrapper.emitted('clearEditorChange')).toBeTruthy();
+  });
+
+  it('should emit toggleHeaderDialog event when Set Headers button is clicked', () => {
+    const setHeadersButton = wrapper.find('.set-headers-button');
+    setHeadersButton.emit('click');
+    expect(wrapper.emitted('toggleHeaderDialog')).toBeTruthy();
+  });
+
+  it('should emit toggleVariableDialog event when Set Variables button is clicked', () => {
+    const setVariablesButton = wrapper.find('.set-variables-button');
+    setVariablesButton.emit('click');
+    expect(wrapper.emitted('toggleVariableDialog')).toBeTruthy();
+  });
+
+  it('should emit toggleSubscriptionUrlDialog event when Set Subscription URL button is clicked', () => {
+    const setSubscriptionUrlButton = wrapper.find('.set-subscription-url-button');
+    setSubscriptionUrlButton.emit('click');
+    expect(wrapper.emitted('toggleSubscriptionUrlDialog')).toBeTruthy();
+  });
+
+  it('should emit reloadDocsChange event when Reload Docs button is clicked', () => {
+    const reloadDocsButton = wrapper.find('.reload-docs-button');
+    reloadDocsButton.emit('click');
+    expect(wrapper.emitted('reloadDocsChange')).toBeTruthy();
+  });
+
+  it('should emit toggleDocsChange event when Show Docs button is clicked', () => {
+    const showDocsButton = wrapper.find('.show-docs-button');
+    showDocsButton.emit('click');
+    expect(wrapper.emitted('toggleDocsChange')).toBeTruthy();
+  });
+
 });