Remove cypress (#962)

* chore: move tabs cypress test to playwright * test(tabs): skip tabs inside of tabs * chore: remove cypress * removed cypress e2e --------- Co-authored-by: Shai Reznik <[email protected]> Co-authored-by: Jack Shelton <[email protected]>
qwikifiers · Sep 17, 2024 · a3b55c6 · a3b55c6
1 parent f1ea4f3
commit a3b55c6
Show file tree

Hide file tree

Showing 44 changed files with 788 additions and 2,708 deletions.
diff --git a/.github/actions/test/action.yml b/.github/actions/test/action.yml
@@ -28,11 +28,6 @@ runs:
       env:
         NODE_OPTIONS: --experimental-vm-modules
 
-    - name: Test Headless
-      uses: cypress-io/github-action@v5
-      with:
-        command: 'pnpm test.headless.ci'
-
     # - name: Build
     #   shell: bash
     #   run: npx nx affected:build --base=last-release --exclude=website

diff --git a/apps/website-e2e/.eslintrc.json b/apps/website-e2e/.eslintrc.json
diff --git a/apps/website-e2e/cypress.config.ts b/apps/website-e2e/cypress.config.ts
diff --git a/apps/website-e2e/project.json b/apps/website-e2e/project.json
diff --git a/apps/website-e2e/src/e2e/app.cy.ts b/apps/website-e2e/src/e2e/app.cy.ts
diff --git a/apps/website-e2e/src/fixtures/example.json b/apps/website-e2e/src/fixtures/example.json
diff --git a/apps/website-e2e/src/support/app.po.ts b/apps/website-e2e/src/support/app.po.ts
diff --git a/apps/website-e2e/src/support/commands.ts b/apps/website-e2e/src/support/commands.ts
diff --git a/apps/website-e2e/src/support/e2e.ts b/apps/website-e2e/src/support/e2e.ts
diff --git a/apps/website-e2e/tsconfig.json b/apps/website-e2e/tsconfig.json
diff --git a/apps/website/src/routes/docs/headless/tabs/examples/disabled.tsx b/apps/website/src/routes/docs/headless/tabs/examples/disabled.tsx
@@ -1,32 +1,33 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$, useStore, useStyles$ } from '@builder.io/qwik';
 import { Tabs } from '@qwik-ui/headless';
 import styles from '.././index.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
+
+  const store = useStore({
+    tabs: [
+      { tab: 'Tab 1', disabled: true },
+      { tab: 'Tab 2' },
+      { tab: 'Tab 3', disabled: true },
+      { tab: 'Tab 4' },
+    ],
+  });
   return (
     <>
-      <div class="tabs-example mr-auto w-full">
+      <div class="four-tabs-example mr-auto w-full">
         <h3>Dad jokes</h3>
         <Tabs.Root>
           <Tabs.List>
-            <Tabs.Tab
-              style={{ width: '110px' }}
-              class="aria-disabled:cursor-not-allowed"
-              disabled={true}
-            >
-              Disabled Tab
-            </Tabs.Tab>
-            <Tabs.Tab style={{ width: '110px' }}>Joke 2</Tabs.Tab>
-            <Tabs.Tab style={{ width: '110px' }}>Joke 3</Tabs.Tab>
-            <Tabs.Tab style={{ width: '110px' }}>Joke 4</Tabs.Tab>
+            {store.tabs.map((tab, i) => (
+              <Tabs.Tab key={i} disabled={tab.disabled}>
+                {tab.tab}
+              </Tabs.Tab>
+            ))}
           </Tabs.List>
-          <Tabs.Panel>
-            "What did the coffee report to the police", " A mugging."
-          </Tabs.Panel>
-          <Tabs.Panel>"What's brown and sticky", " A stick."</Tabs.Panel>
-          <Tabs.Panel>"How do the trees get on the internet?", "They log on."</Tabs.Panel>
-          <Tabs.Panel>"What did the fish say when he hit the wall", " Dam."</Tabs.Panel>
+          {store.tabs.map((tab, i) => (
+            <Tabs.Panel key={i}>{tab.tab} Panel</Tabs.Panel>
+          ))}
         </Tabs.Root>
       </div>
     </>

diff --git a/apps/website/src/routes/docs/headless/tabs/examples/dynamic.tsx b/apps/website/src/routes/docs/headless/tabs/examples/dynamic.tsx
@@ -4,32 +4,55 @@ import styles from '.././index.css?inline';
 
 export default component$(() => {
   useStyles$(styles);
-  const tabsState = useStore(['Dynamic Tab 1', 'Dynamic Tab 2', 'Dynamic Tab 3']);
+  const store = useStore({
+    tabs: ['Tab 1', 'Tab 2', 'Tab 3'],
+  });
   return (
     <>
-      <div class="tabs-example mr-auto">
-        <Tabs.Root>
-          <Tabs.List>
-            {tabsState.map((tab) => (
-              <Tabs.Tab key={tab}>{tab}</Tabs.Tab>
+      <div class="vertical-tabs-example mr-auto">
+        <button
+          class={cn('mb-4 w-48', buttonVariants({ look: 'outline', size: 'sm' }))}
+          onClick$={() => {
+            store.tabs.unshift(`Added Tab`);
+          }}
+        >
+          Add Tab before
+        </button>
+        <br />
+        <Tabs.Root vertical class="flex space-x-6">
+          <Tabs.List class="flex w-fit flex-col">
+            {store.tabs.map((tab, i) => (
+              <Tabs.Tab key={i}>
+                {tab}{' '}
+                <span
+                  onClick$={() => {
+                    if (store.tabs.length > 1) {
+                      store.tabs.splice(i, 1);
+                    }
+                  }}
+                >
+                  x
+                </span>
+              </Tabs.Tab>
             ))}
           </Tabs.List>
-          {tabsState.map((tab) => (
-            <Tabs.Panel key={tab}>{tab} Panel</Tabs.Panel>
-          ))}
-        </Tabs.Root>
 
+          {store.tabs.map((tab, i) => {
+            return <Tabs.Panel key={i}>{tab} Panel</Tabs.Panel>;
+          })}
+        </Tabs.Root>
         <button
-          class="mt-4 font-bold text-red-600"
+          class={cn('w-48', buttonVariants({ look: 'outline', size: 'sm' }))}
           onClick$={() => {
-            if (tabsState.length > 1) {
-              tabsState.splice(0, 1);
-            }
+            store.tabs.push(`Added Tab`);
           }}
         >
-          Remove First Tab
+          Add Tab after
         </button>
       </div>
     </>
   );
 });
+
+import { buttonVariants } from '@qwik-ui/styled';
+import { cn } from '@qwik-ui/utils';
diff --git a/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx b/apps/website/src/routes/docs/headless/tabs/examples/on-click.tsx
@@ -9,9 +9,15 @@ export default component$(() => {
       <div class="tabs-example mr-auto">
         <h3>Danish Composers</h3>
         <h4 class="mb-4">(Hover over the tabs - they should not be selected)</h4>
-        <Tabs.Root behavior="manual">
+        <Tabs.Root>
           <Tabs.List>
-            <Tabs.Tab>Maria</Tabs.Tab>
+            <Tabs.Tab
+              onClick$={(_, el) => {
+                el.innerHTML = 'Jack';
+              }}
+            >
+              Maria
+            </Tabs.Tab>
             <Tabs.Tab>Carl</Tabs.Tab>
             <Tabs.Tab>Ida</Tabs.Tab>
           </Tabs.List>

diff --git a/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx b/apps/website/src/routes/docs/headless/tabs/examples/on-selected-index-change.tsx
@@ -29,8 +29,8 @@ export default component$(() => {
             <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...</p>
           </Tabs.Panel>
         </Tabs.Root>
-
-        <p class="mt-4 text-white">Selected Index: {selectedIndexSig.value}</p>
+        <br />
+        <p class="mt-4">Selected Index: {selectedIndexSig.value}</p>
       </div>
     </>
   );

diff --git a/apps/website/src/routes/docs/headless/tabs/examples/programmatic.tsx b/apps/website/src/routes/docs/headless/tabs/examples/programmatic.tsx
@@ -0,0 +1,39 @@
+import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
+import { Tabs } from '@qwik-ui/headless';
+import styles from '.././index.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const selectedIndex = useSignal(0);
+
+  return (
+    <>
+      <div class="tabs-example">
+        <h3>Danish Composers</h3>
+        <Tabs.Root behavior="automatic" selectedIndex={selectedIndex.value}>
+          <Tabs.List>
+            <Tabs.Tab>Maria</Tabs.Tab>
+            <Tabs.Tab>Carl</Tabs.Tab>
+            <Tabs.Tab>Ida</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel>
+            <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...</p>
+          </Tabs.Panel>
+          <Tabs.Panel>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...</p>
+          </Tabs.Panel>
+          <Tabs.Panel>
+            <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...</p>
+          </Tabs.Panel>
+        </Tabs.Root>
+        <br />
+        <button onClick$={() => (selectedIndex.value = 0)}>Select Tab 0</button>
+        <br />
+        <button onClick$={() => (selectedIndex.value = 1)}>Select Tab 1</button>
+        <br />
+        <button onClick$={() => (selectedIndex.value = 2)}>Select Tab 2</button>
+      </div>
+    </>
+  );
+});
diff --git a/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx b/apps/website/src/routes/docs/headless/tabs/examples/selected-tab-id.tsx
@@ -11,9 +11,9 @@ export default component$(() => {
         <h3>Danish Composers</h3>
         <Tabs.Root bind:selectedTabId={selectedTabIdSig}>
           <Tabs.List>
-            <Tabs.Tab tabId="Maria">Maria</Tabs.Tab>
-            <Tabs.Tab tabId="Carl">Carl</Tabs.Tab>
-            <Tabs.Tab tabId="Ida">Ida</Tabs.Tab>
+            <Tabs.Tab tabId="id-0">Maria</Tabs.Tab>
+            <Tabs.Tab tabId="id-1">Carl</Tabs.Tab>
+            <Tabs.Tab tabId="id-2">Ida</Tabs.Tab>
           </Tabs.List>
           <Tabs.Panel>
             <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...</p>

diff --git a/apps/website/src/routes/docs/headless/tabs/examples/test-tabs-inside-of-tabs.tsx b/apps/website/src/routes/docs/headless/tabs/examples/test-tabs-inside-of-tabs.tsx
@@ -0,0 +1,45 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { Tabs } from '@qwik-ui/headless';
+import styles from '.././index.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <>
+      <div class="tabs-example">
+        <h3>Danish Composers</h3>
+        <Tabs.Root behavior="automatic">
+          <Tabs.List>
+            <Tabs.Tab>Maria</Tabs.Tab>
+            <Tabs.Tab>Carl</Tabs.Tab>
+            <Tabs.Tab>Ida</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel>
+            <Tabs.Root behavior="automatic">
+              <Tabs.List>
+                <Tabs.Tab>Maria</Tabs.Tab>
+                <Tabs.Tab>Carl</Tabs.Tab>
+                <Tabs.Tab>Ida</Tabs.Tab>
+              </Tabs.List>
+              <Tabs.Panel>
+                <p>Maria Theresia Ahlefeldt (16 January 1755 - 20 December 1810) ...</p>
+              </Tabs.Panel>
+              <Tabs.Panel>
+                <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...</p>
+              </Tabs.Panel>
+              <Tabs.Panel>
+                <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...</p>
+              </Tabs.Panel>
+            </Tabs.Root>
+          </Tabs.Panel>
+          <Tabs.Panel>
+            <p>Carl Joachim Andersen (29 April 1847 - 7 May 1909) ...</p>
+          </Tabs.Panel>
+          <Tabs.Panel>
+            <p>Ida Henriette da Fonseca (July 27, 1802 - July 6, 1858) ...</p>
+          </Tabs.Panel>
+        </Tabs.Root>
+      </div>
+    </>
+  );
+});