test(input, textarea): verify the inheritted watch attribute

Author: thetaPC

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

@@ -44,6 +44,24 @@ describe('input: rendering', () => {
     const bottomContent = page.body.querySelector('ion-input .input-bottom');
     expect(bottomContent).toBe(null);
   });
+
+  it('should inherit watched attributes', async () => {
+    const page = await newSpecPage({
+      components: [Input],
+      html: '<ion-input label="Input" dir="ltr"></ion-input>',
+    });
+
+    const inputEl = page.body.querySelector('ion-input')!;
+    const nativeEl = inputEl.querySelector('input')!;
+
+    expect(nativeEl.getAttribute('dir')).toBe('ltr');
+
+    inputEl.setAttribute('dir', 'rtl');
+
+    await page.waitForChanges();
+
+    expect(nativeEl.getAttribute('dir')).toBe('rtl');
+  });
 });
 
 /**

core/src/components/textarea/test/textarea.spec.ts

@@ -14,6 +14,24 @@ it('should inherit attributes', async () => {
   expect(nativeEl.getAttribute('data-form-type')).toBe('password');
 });
 
+it('should inherit watched attributes', async () => {
+  const page = await newSpecPage({
+    components: [Textarea],
+    html: '<ion-textarea dir="ltr"></ion-textarea>',
+  });
+
+  const textareaEl = page.body.querySelector('ion-input')!;
+  const nativeEl = textareaEl.querySelector('textarea')!;
+
+  expect(nativeEl.getAttribute('dir')).toBe('ltr');
+
+  textareaEl.setAttribute('dir', 'rtl');
+
+  await page.waitForChanges();
+
+  expect(nativeEl.getAttribute('dir')).toBe('rtl');
+});
+
 /**
  * Textarea uses emulated slots, so the internal
  * behavior will not exactly match IonSelect's slots.