fix(examples): Pass octane e2e on octane 0.12 (#6630)

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Author: KevinVandy

docs/framework/octane/guide/cell-spanning.md

@@ -68,12 +68,12 @@ A covered cell reports a span of `0`, and the renderer skips it. This is the sam
     const colSpan = cell.getColSpan()
 
     // A span of 0 means the cell is covered by a cell above or to its left.
-    // Skip it. Do not render `rowSpan={0}`: in HTML that means "span to the
+    // Skip it. Do not render `rowspan={0}`: in HTML that means "span to the
     // end of the row group", which merges the cell down the entire tbody.
     if (rowSpan === 0 || colSpan === 0) return null
 
     return (
-      <td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
+      <td key={cell.id} rowspan={rowSpan} colspan={colSpan}>
         <table.FlexRender cell={cell} />
       </td>
     )

docs/framework/octane/guide/column-resizing.md

@@ -119,7 +119,7 @@ How you apply these size styles to your markup is up to you, but it is pretty co
 ```tsx
 <th
   key={header.id}
-  colSpan={header.colSpan}
+  colspan={header.colSpan}
   style={{ width: `${header.getSize()}px` }}
 >
 ```

docs/framework/octane/guide/expanding.md

@@ -146,7 +146,7 @@ const table = useTable({
       {row.getIsExpanded() && (
         <tr>
           {/* span however many columns the expanded data needs if it does not share the parent row's columns */}
-          <td colSpan={row.getAllCells().length}>
+          <td colspan={row.getAllCells().length}>
             {/* Your custom UI goes here */}
           </td>
         </tr>

examples/octane/aggregation/src/main.tsrx

@@ -218,7 +218,7 @@ function App() @{
           {table.getFooterGroups().map((group) => (
             <tr key={group.id}>
               {group.headers.map((header) => (
-                <th key={header.id} colSpan={header.colSpan}>
+                <th key={header.id} colspan={header.colSpan}>
                   {header.isPlaceholder ? null : (
                     <table.FlexRender footer={header} />
                   )}

examples/octane/basic-dynamic-columns/src/main.tsrx

@@ -191,7 +191,7 @@ function App() @{
           @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
             <tr>
               @for (const header of headerGroup.headers; key header.id) {
-                <th colSpan={header.colSpan}>
+                <th colspan={header.colSpan}>
                   {header.isPlaceholder ? null : <>
                     <div
                       className={header.column.getCanSort() ? 'sortable-header' : ''}

examples/octane/basic-external-atoms/src/main.tsrx

@@ -88,7 +88,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <div
                   className={header.column.getCanSort() ? 'sortable-header' : ''}
                   onClick={header.column.getToggleSortingHandler()}

examples/octane/basic-external-atoms/tests/e2e/smoke.spec.ts

@@ -31,9 +31,11 @@ test('updates pagination atom and row model without errors', async ({
     await expect(status).toContainText('1 of 100')
     const timing = await page
       .getByRole('button', { name: '>', exact: true })
-      .evaluate((button) => {
+      .evaluate(async (button) => {
         const started = performance.now()
         ;(button as HTMLButtonElement).click()
+        // Octane commits a click's updates in the next microtask.
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           status: document.querySelector('.controls strong')?.textContent,
@@ -48,9 +50,10 @@ test('updates pagination atom and row model without errors', async ({
     const sortTiming = await page
       .locator('.sortable-header')
       .first()
-      .evaluate((header) => {
+      .evaluate(async (header) => {
         const started = performance.now()
         ;(header as HTMLElement).click()
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           text: header.textContent,

examples/octane/basic-external-state/src/main.tsrx

@@ -93,7 +93,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <div
                   className={header.column.getCanSort() ? 'sortable-header' : ''}
                   onClick={header.column.getToggleSortingHandler()}

examples/octane/basic-external-state/tests/e2e/smoke.spec.ts

@@ -37,9 +37,11 @@ test('advances controlled pagination repeatedly without render-phase errors', as
     const status = page.getByText(/^Page$/).locator('..')
     await expect(status).toContainText('1 of 100')
     const first = await firstRow(page)
-    const timing = await next.evaluate((button) => {
+    const timing = await next.evaluate(async (button) => {
       const started = performance.now()
       ;(button as HTMLButtonElement).click()
+      // Octane commits a click's updates in the next microtask.
+      await Promise.resolve()
       return {
         elapsed: performance.now() - started,
         status: document.querySelector('.controls strong')?.textContent,
@@ -56,9 +58,10 @@ test('advances controlled pagination repeatedly without render-phase errors', as
     const sortTiming = await page
       .locator('.sortable-header')
       .first()
-      .evaluate((header) => {
+      .evaluate(async (header) => {
         const started = performance.now()
         ;(header as HTMLElement).click()
+        await Promise.resolve()
         return {
           elapsed: performance.now() - started,
           text: header.textContent,

examples/octane/basic-subscribe/src/main.tsrx

@@ -139,7 +139,7 @@ function App() @{
         @for (const headerGroup of table.getHeaderGroups(); key headerGroup.id) {
           <tr>
             @for (const header of headerGroup.headers; key header.id) {
-              <th colSpan={header.colSpan}>
+              <th colspan={header.colSpan}>
                 {header.isPlaceholder ? null : <>
                   <table.FlexRender header={header} />
                   {header.column.getCanFilter()
@@ -175,7 +175,7 @@ function App() @{
               />}
             </table.Subscribe>
           </td>
-          <td colSpan={20}>
+          <td colspan={20}>
             Page Rows ({String(table.getRowModel().rows.length)})
           </td>
         </tr>