feat: add component tests module

Author: kuroidoruido

demo-app/src/assets/ReactLanguageSwitch.js

@@ -0,0 +1,18 @@
+import { ReactSelect } from '/assets/ReactSelect.js';
+
+function App() {
+  const languageCookie = document.cookie
+    .split(';')
+    .map((c) => c.trimStart())
+    .find((c) => c.startsWith('language='));
+  const languageCookieValue = languageCookie?.split('=')[1];
+  return ReactSelect({
+    value: languageCookieValue,
+    options: ['en', 'fr'],
+    onChange: (newLang) => {
+      document.location.href = `${document.location.pathname}?lang=${newLang}`;
+    },
+  });
+}
+
+ReactDOM.render(App(), document.querySelector('#vue-language-switch'));

demo-app/src/assets/ReactSelect.js

@@ -0,0 +1,14 @@
+const e = React.createElement;
+
+export function ReactSelect({ value, options, onChange }) {
+  return e(
+    'select',
+    {
+      value,
+      onChange: (event) => {
+        onChange(event.target.value);
+      },
+    },
+    options.map((option) => e('option', { key: option, value: option }, option))
+  );
+}

demo-app/src/components/header.tsx

@@ -23,6 +23,7 @@ export function Header() {
         <li>
           <a href="/about">{aboutLink}</a>
         </li>
+        <li id="vue-language-switch"></li>
       </ul>
     </nav>
   );

demo-app/src/index.tsx

@@ -29,7 +29,13 @@ app
   // middlewares
   .use('/favicon.ico', serveStatic({ path: './src/assets/favicon.ico' }))
   .use('/assets/*', serveStatic({ root: './src/' }))
-  .use(languageDetector({ supportedLanguages: ['en', 'fr'], fallbackLanguage: 'en' }))
+  .use(
+    languageDetector({
+      supportedLanguages: ['en', 'fr'],
+      fallbackLanguage: 'en',
+      cookieOptions: { httpOnly: false },
+    })
+  )
   // html pages
   .get('/', (c) => c.html(withContexts(Home, c)))
   .get('/about', (c) => c.html(withContexts(About, c)))

demo-app/src/layouts/base.tsx

@@ -26,6 +26,9 @@ export function BaseLayout({ children, title }: BaseLayoutProps) {
         <Header />
         {children}
         <Footer />
+        <script src="https://unpkg.com/react@17/umd/react.development.js" defer></script>
+        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" defer></script>
+        <script src="/assets/ReactLanguageSwitch.js" type="module" defer></script>
       </body>
     </html>
   );

docs/markdown/09-components-tests/10-component-test-reminder.md

@@ -0,0 +1,12 @@
+<!-- .slide: class="transition" -->
+
+# Component Tests reminder
+
+##==##
+
+# Component Tests reminder
+
+- Test a UI brick
+- Simulate realistic behaviors
+- Isolation
+<!-- .element: class="list-fragment" -->

docs/markdown/09-components-tests/20-mount-a-component.md

@@ -0,0 +1,26 @@
+<!-- .slide: class="transition" -->
+
+# Mount a component
+
+Notes:
+
+- Next we will work with React component because we need to choose
+- It works only for React, Svelte and Vue for now
+- It's experimental
+
+##==##
+
+<!-- .slide: class="with-code" -->
+
+# Mount a React component
+
+```TypeScript [1|2|4,6|5|1-6]
+import { test, expect } from '@playwright/experimental-ct-react';
+import LearnReactButton from './LearnReactButton';
+
+test('should work', async ({ mount }) => {
+  const component = await mount(<LearnReactButton />);
+});
+```
+
+<!-- .element: class="big-code" -->

docs/markdown/09-components-tests/30-patterns.md

@@ -0,0 +1,3 @@
+<!-- .slide: class="transition" -->
+
+# Patterns

docs/markdown/09-components-tests/31-check-component-content.md

@@ -0,0 +1,17 @@
+<!-- .slide: class="with-code" -->
+
+# Check component content
+
+```TypeScript [3]
+test('should work', async ({ mount }) => {
+  const component = await mount(<LearnReactButton />);
+  await expect(component).toContainText('Learn React');
+});
+```
+
+<!-- .element: class="big-code" -->
+
+Notes:
+
+- we can use every assertions we used to use with Playwright
+- we no more use the page fixture but directly the component instance

docs/markdown/09-components-tests/32-listen-events.md

@@ -0,0 +1,19 @@
+<!-- .slide: class="with-code" -->
+
+# Listen to event
+
+```TypeScript
+test('should work', async ({ mount }) => {
+  let clicked = false;
+  const component = await mount(<LearnReactButton onClick={() => clicked = true} />);
+  expect(clicked).toBeTruthy();
+});
+```
+
+<!-- .element: class="big-code" -->
+
+Notes:
+
+- to get event from a component we can listen events
+- we need to save the emitted value in the variable
+- then we can make any assertion