test(tabs): add rtl test, checking reversed scrolling

elements/rh-tabs/test/rh-tabs.spec.ts

@@ -1,6 +1,6 @@
 import type { ReactiveElement } from 'lit';
 
-import { expect, html, nextFrame } from '@open-wc/testing';
+import { expect, html, nextFrame, aTimeout } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { setViewport, sendKeys } from '@web/test-runner-commands';
 
@@ -147,5 +147,36 @@ describe('<rh-tabs>', function() {
       const tabsOverflow = getComputedStyle(tabs).overflowX === 'auto';
       expect(tabsOverflow).to.be.equal(true);
     });
+
+    describe('reversed right to left language overflow actions', function() {
+      let body: HTMLElement;
+      let clone: RhTabs;
+      beforeEach(async function() {
+        body = document.querySelector('body')!;
+        body.setAttribute('dir', 'rtl');
+        /* TODO: find a better way then this nasty hack to get the
+        element to re-render after adding dir attr to body */
+        clone = element.cloneNode(true) as RhTabs;
+        element.remove();
+        document.body.appendChild(clone);
+        await allUpdates(element);
+      });
+
+      it('previousTab should be disabled', async function() {
+        const previousTab: HTMLButtonElement = clone.shadowRoot!.querySelector('#previousTab')!;
+        expect(previousTab.disabled).to.be.equal(true);
+      });
+
+      it('click on nextTab should scroll Left', async function() {
+        const nextTab: HTMLButtonElement = clone.shadowRoot!.querySelector('#nextTab')!;
+        const firstTab = clone.querySelector('rh-tab')!;
+        const preClickPosition = firstTab.getBoundingClientRect().x;
+        nextTab?.click();
+        await aTimeout(50);
+        // get first tab and check its x position
+        const afterClickPosition = firstTab.getBoundingClientRect().x;
+        expect(afterClickPosition).to.be.greaterThan(preClickPosition);
+      });
+    });
   });
 });