From f6fb32d791c98d564eb7728cd0d588c74fc569d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pierre=20de=20la=20Martini=C3=A8re?=
 <pierre.de.la.martiniere@gmail.com>
Date: Mon, 10 Aug 2020 12:08:26 +0200
Subject: [PATCH 1/2] Add integration test for a TypeScript react component

---
 .../__apps__/_shared-ts/components/Subtitle.tsx          | 9 +++++++++
 .../npm-basic/pages/test-local-typescript-module.tsx     | 8 +++++++-
 .../yarn-workspaces/_shared-ts/components/Subtitle.tsx   | 9 +++++++++
 .../app/pages/test-local-typescript-module.tsx           | 8 +++++++-
 src/__tests__/integrations.test.js                       | 5 ++++-
 5 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 src/__tests__/__apps__/_shared-ts/components/Subtitle.tsx
 create mode 100644 src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx

diff --git a/src/__tests__/__apps__/_shared-ts/components/Subtitle.tsx b/src/__tests__/__apps__/_shared-ts/components/Subtitle.tsx
new file mode 100644
index 0000000..1a460d5
--- /dev/null
+++ b/src/__tests__/__apps__/_shared-ts/components/Subtitle.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {
+  underlined: boolean;
+};
+
+export const Subtitle: React.FC<Props> = (props) => {
+  return <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
+};
diff --git a/src/__tests__/__apps__/npm-basic/pages/test-local-typescript-module.tsx b/src/__tests__/__apps__/npm-basic/pages/test-local-typescript-module.tsx
index 685e634..5a83538 100644
--- a/src/__tests__/__apps__/npm-basic/pages/test-local-typescript-module.tsx
+++ b/src/__tests__/__apps__/npm-basic/pages/test-local-typescript-module.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { add } from 'shared-ts/utils/calc';
+import { Subtitle } from 'shared-ts/components/Subtitle';
 
 const HomePage: React.FC = () => {
-  return <h1>The answer is {add(40, 3)}</h1>;
+  return (
+    <>
+      <h1>The answer is {add(40, 3)}</h1>
+      <Subtitle underlined>And this is a subtitle</Subtitle>
+    </>
+  );
 };
 
 export default HomePage;
diff --git a/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx b/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx
new file mode 100644
index 0000000..b3506e3
--- /dev/null
+++ b/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+type Props = {
+  underlined: boolean;
+};
+
+export const Subtitle: React.FC<Props> = (props) => {
+  <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
+};
diff --git a/src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx b/src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx
index 685e634..108c120 100644
--- a/src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx
+++ b/src/__tests__/__apps__/yarn-workspaces/app/pages/test-local-typescript-module.tsx
@@ -1,8 +1,14 @@
 import React from 'react';
 import { add } from 'shared-ts/utils/calc';
+import { Subtitle } from 'shared-ts/components/Subtitle';
 
 const HomePage: React.FC = () => {
-  return <h1>The answer is {add(40, 3)}</h1>;
+  return (
+    <div>
+      <h1>The answer is {add(40, 3)}</h1>
+      <Subtitle underlined>And this is a subtitle</Subtitle>
+    </div>
+  );
 };
 
 export default HomePage;
diff --git a/src/__tests__/integrations.test.js b/src/__tests__/integrations.test.js
index e9b9a43..d2cd923 100644
--- a/src/__tests__/integrations.test.js
+++ b/src/__tests__/integrations.test.js
@@ -40,7 +40,7 @@ describe.each([
   });
 
   describe('local-typescript-module transpilation', () => {
-    test('pages using transpiled modules should be correctly displayed', async () => {
+    test('pages using transpiled modules (helpers or React components) should be correctly displayed', async () => {
       const page = await browser.newPage();
       const response = await page.goto(`${BASE_URL}/test-local-typescript-module`);
 
@@ -50,6 +50,9 @@ describe.each([
 
       const content = await page.$eval('h1', (e) => e.textContent);
       expect(content).toBe('The answer is 43');
+
+      const content2 = await page.$eval('h2', (e) => e.textContent);
+      expect(content2).toBe('And this is a subtitle');
     });
   });
 

From 45a46c17b7c8e24d7de7be31b39182c572b077a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pierre=20de=20la=20Martini=C3=A8re?=
 <pierre.de.la.martiniere@gmail.com>
Date: Mon, 10 Aug 2020 13:10:11 +0200
Subject: [PATCH 2/2] Fix Subtitle test component

---
 .../__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx b/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx
index b3506e3..1a460d5 100644
--- a/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx
+++ b/src/__tests__/__apps__/yarn-workspaces/_shared-ts/components/Subtitle.tsx
@@ -5,5 +5,5 @@ type Props = {
 };
 
 export const Subtitle: React.FC<Props> = (props) => {
-  <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
+  return <h2 style={{ textDecoration: props.underlined ? 'underline' : 'none' }}>{props.children}</h2>;
 };