test(components): add rtl tests and remove skips (#18319)

references #17012

core/src/components/datetime/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test.skip('datetime: basic', async () => {
+test('datetime: basic', async () => {
   const page = await newE2EPage({
     url: '/src/components/datetime/test/basic?ionic:_testing=true'
   });
@@ -19,7 +19,7 @@ test.skip('datetime: basic', async () => {
   expect(compare).toMatchScreenshot();
 });
 
-test.skip('datetime: basic-rtl', async () => {
+test('datetime: basic-rtl', async () => {
   const page = await newE2EPage({
     url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true'
   });

core/src/components/input/test/spec/e2e.ts

@@ -13,3 +13,17 @@ test('input: spec', async () => {
     expect(compare).toMatchScreenshot();
   }
 });
+
+test('input:rtl: spec', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/input/test/spec?ionic:_testing=true&rtl=true'
+  });
+
+  const compares = [];
+
+  compares.push(await page.compareScreenshot());
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
+});

core/src/components/item-sliding/test/basic/e2e.ts

@@ -8,3 +8,12 @@ test('item-sliding: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('item-sliding:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item-sliding/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/item/test/inputs/e2e.ts

@@ -1,6 +1,6 @@
 import { E2EPage, newE2EPage } from '@stencil/core/testing';
 
-test.skip('item: inputs', async () => {
+test('item: inputs', async () => {
   const page = await newE2EPage({
     url: '/src/components/item/test/inputs?ionic:_testing=true'
   });

core/src/components/radio/test/basic/e2e.ts

@@ -8,3 +8,12 @@ test('radio: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('radio:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/radio/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/range/test/basic/e2e.ts

@@ -8,3 +8,12 @@ test('range: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('range:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/range/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/searchbar/test/basic/e2e.ts

@@ -33,3 +33,37 @@ test('searchbar: basic', async () => {
     expect(compare).toMatchScreenshot();
   }
 });
+
+test('searchbar:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/searchbar/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  await page.waitFor(250);
+
+  const compares = [];
+  compares.push(await page.compareScreenshot());
+
+  let searchbar = await page.find('#basic');
+  await searchbar.callMethod('setFocus');
+
+  await page.waitFor(250);
+  searchbar = await page.find('#basic');
+  expect(searchbar).toHaveClass('searchbar-has-focus');
+
+  compares.push(await page.compareScreenshot('focused'));
+
+  // No Cancel Button Searchbar
+  searchbar = await page.find('#noCancel');
+  await searchbar.callMethod('setFocus');
+
+  await page.waitFor(250);
+  searchbar = await page.find('#noCancel');
+  expect(searchbar).toHaveClass('searchbar-has-focus');
+
+  compares.push(await page.compareScreenshot('no cancel button, focused'));
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
+});

core/src/components/segment/test/basic/e2e.ts

@@ -10,3 +10,14 @@ test('segment: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('segment:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/segment/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/segment/test/spec/e2e.ts

@@ -10,3 +10,14 @@ test('segment: spec', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('segment:rtl: spec', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/segment/test/spec?ionic:_testing=true&rtl=true'
+  });
+
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/select/test/basic/e2e.ts

@@ -1,6 +1,6 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test.skip('select: basic', async () => {
+test('select: basic', async () => {
   const page = await newE2EPage({
     url: '/src/components/select/test/basic?ionic:_testing=true'
   });
@@ -70,3 +70,16 @@ test.skip('select: basic', async () => {
     expect(compare).toMatchScreenshot();
   }
 });
+
+test('select:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/select/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  const compares = [];
+  compares.push(await page.compareScreenshot());
+
+  for (const compare of compares) {
+    expect(compare).toMatchScreenshot();
+  }
+});

core/src/components/tab-bar/test/scenarios/e2e.ts

@@ -8,3 +8,12 @@ test('tab-bar: scenarios', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('tab-bar:rtl: scenarios', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/tab-bar/test/scenarios?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/toggle/test/basic/e2e.ts

@@ -10,3 +10,14 @@ test('toggle: basic', async () => {
   const compare = await page.compareScreenshot();
   expect(compare).toMatchScreenshot();
 });
+
+test('toggle:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toggle/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});

core/src/components/toolbar/test/basic/e2e.ts

@@ -2,7 +2,16 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('toolbar: basic', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/basic'
+    url: '/src/components/toolbar/test/basic?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('toolbar:rtl: basic', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/basic?ionic:_testing=true&rtl=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/toolbar/test/colors/e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('toolbar: colors', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/colors'
+    url: '/src/components/toolbar/test/colors?ionic:_testing=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/toolbar/test/components/e2e.ts

@@ -1,8 +1,8 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-test('toolbar: scenarios', async () => {
+test('toolbar: components', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/scenarios'
+    url: '/src/components/toolbar/test/components?ionic:_testing=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/toolbar/test/scenarios/e2e.ts

@@ -2,7 +2,16 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('toolbar: scenarios', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/scenarios'
+    url: '/src/components/toolbar/test/scenarios?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('toolbar:rtl: scenarios', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/scenarios?ionic:_testing=true&rtl=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/toolbar/test/spec/e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('toolbar: spec', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/spec'
+    url: '/src/components/toolbar/test/spec?ionic:_testing=true'
   });
 
   const compare = await page.compareScreenshot();

core/src/components/toolbar/test/standalone/e2e.ts

@@ -2,7 +2,7 @@ import { newE2EPage } from '@stencil/core/testing';
 
 test('toolbar: standalone', async () => {
   const page = await newE2EPage({
-    url: '/src/components/toolbar/test/standalone'
+    url: '/src/components/toolbar/test/standalone?ionic:_testing=true'
   });
 
   const compare = await page.compareScreenshot();