LinkedIn Post - Validating CI changes using Cookie

src/App.test.tsx

@@ -25,6 +25,12 @@ test('home page counter', async () => {
     expect(screen.getByText(/count is 3/i)).not.toBeNull()
 })
 
+test('should have a card with a link to a LinkedIn post', () => {
+
+    const link = screen.getByText(/LinkedIn Post about this/i)
+    expect(link).not.toBeNull()
+})
+
 test.each(links)('should have a link to %s', (linkText) => {
 
     const link = screen.getByAltText(linkText)

src/App.tsx

@@ -17,6 +17,16 @@ function App() {
         </a>
       </div>
       <h1>Vite + React</h1>
+      <div className="card">
+        <p>
+          This is an example of a change in code that can be validated in a testing framework in a CI pipeline
+        </p>
+        <small>
+          <a href="https://www.linkedin.com/posts/daniel-wh_github-daniel-whcommithashdeploy-activity-7213178505499475968-JjVs?utm_source=share&utm_medium=member_desktop" target="_blank">
+            LinkedIn Post about this
+          </a>
+        </small>
+      </div>
       <div className="card">
         <button name='count' onClick={() => setCount((count) => count + 1)}>
           count is {count}

tests/example.spec.ts

@@ -8,5 +8,9 @@ test('has title', async ({ page, context }) => {
   await page.goto('/')
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle("Vite + React + TS");
-});
 
+  await page.goto('/')
+  const link = await page.getByRole('link', { name: /LinkedIn Post about this/i });
+  await expect(link).toBeDefined();
+  await expect(link).toHaveAttribute('href', 'https://www.linkedin.com/posts/daniel-wh_github-daniel-whcommithashdeploy-activity-7213178505499475968-JjVs?utm_source=share&utm_medium=member_desktop')
+});