fix: fix e2e tests and minor visual glitches

gemini-testing · Aug 30, 2024 · 3bd38ac · 3bd38ac
1 parent c9176ea
commit 3bd38ac
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 41 deletions.
diff --git a/lib/static/components/modals/screenshot-accepter/meta.jsx b/lib/static/components/modals/screenshot-accepter/meta.jsx
@@ -23,6 +23,7 @@ export default class ScreenshotAccepterMeta extends Component {
                 <div className="screenshot-accepter__meta container">
                     <MetaInfoContent
                         resultId={image.parentId}
+                        qa={'meta-info'}
                     />
                 </div>
                 <hr className='tab__separator' />

diff --git a/lib/static/components/section/body/meta-info/index.jsx b/lib/static/components/section/body/meta-info/index.jsx
@@ -23,7 +23,7 @@ class MetaInfo extends Component {
 
         return <Details
             title='Meta'
-            content={<Card className='details__card' view='filled'><MetaInfoContent resultId={resultId}/></Card>}
+            content={<Card className='details__card' view='filled'><MetaInfoContent resultId={resultId} qa={'meta-info'}/></Card>}
             onClick={this.onToggleMetaInfo}
         />;
     }

diff --git a/lib/static/new-ui/components/MetaInfo/index.module.css b/lib/static/new-ui/components/MetaInfo/index.module.css
@@ -1,3 +1,11 @@
 .meta-info {
     padding-right: 30px;
 }
+
+.meta-info-value {
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+}
diff --git a/lib/static/new-ui/components/MetaInfo/index.tsx b/lib/static/new-ui/components/MetaInfo/index.tsx
@@ -29,6 +29,7 @@ interface MetaInfoItem {
 
 export interface MetaInfoProps {
     resultId: string,
+    qa?: string;
 }
 
 interface MetaInfoInternalProps extends MetaInfoProps {
@@ -108,12 +109,12 @@ function MetaInfoInternal(props: MetaInfoInternalProps): ReactNode {
         });
     }
 
-    return <DefinitionList className={styles.metaInfo} items={
+    return <DefinitionList className={styles.metaInfo} qa={props.qa} items={
         metaInfoItemsWithResolvedUrls.map((item) => {
             if (item.url) {
                 return {
                     name: item.label,
-                    content: <a data-suite-view-link={item.url} target="_blank" href={item.url} rel="noreferrer">
+                    content: <a className={styles.metaInfoValue} data-suite-view-link={item.url} target="_blank" href={item.url} rel="noreferrer">
                         {item.content}
                     </a>,
                     copyText: item.copyText ?? item.content
@@ -122,7 +123,7 @@ function MetaInfoInternal(props: MetaInfoInternalProps): ReactNode {
 
             return {
                 name: item.label,
-                content: item.content,
+                content: <span className={styles.metaInfoValue}>{item.content}</span>,
                 copyText: item.copyText ?? item.content
             };
         })

diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -24,22 +24,28 @@ interface SuitesPageProps {
 
 function SuitesPageInternal(props: SuitesPageProps): ReactNode {
     return <SplitViewLayout>
-        <Flex direction={'column'} spacing={{p: '2'}} style={{height: '100vh'}}>
-            <h2 className="text-display-1">Suites</h2>
-            <Flex gap={2}>
-                <TestNameFilter/>
-                <BrowsersSelect/>
+        <div>
+            <Flex direction={'column'} spacing={{p: '2'}} style={{height: '100vh'}}>
+                <h2 className="text-display-1">Suites</h2>
+                <Flex gap={2}>
+                    <TestNameFilter/>
+                    <BrowsersSelect/>
+                </Flex>
+                <Flex spacing={{mt: 2}}>
+                    <TestStatusFilter/>
+                </Flex>
+                <SuitesTreeView/>
             </Flex>
-            <Flex spacing={{mt: 2}}>
-                <TestStatusFilter/>
+        </div>
+        <div>
+            <Flex direction={'column'} spacing={{p: '2'}} style={{height: '100vh'}} gap={4}>
+                <SuiteTitle/>
+                <AttemptPicker onChange={(browserId, _, retryIndex): unknown => props.actions.changeTestRetry({browserId, retryIndex})} />
+                <CollapsibleSection title={'Overview'} body={props.currentResultId && <div className={styles['collapsible-section__body']}>
+                    <MetaInfo resultId={props.currentResultId} />
+                </div>} id={'overview'}/>
             </Flex>
-            <SuitesTreeView/>
-        </Flex>
-        <Flex direction={'column'} spacing={{p: '2'}} style={{height: '100vh'}} gap={4}>
-            <SuiteTitle/>
-            <AttemptPicker onChange={(browserId, _, retryIndex): unknown => props.actions.changeTestRetry({browserId, retryIndex})} />
-            <CollapsibleSection title={'Overview'} body={props.currentResultId && <div className={styles['collapsible-section__body']}><MetaInfo resultId={props.currentResultId}/></div>} id={'overview'}/>
-        </Flex>
+        </div>
     </SplitViewLayout>;
 }
 

diff --git a/test/func/tests/common/test-results-appearance.testplane.js b/test/func/tests/common/test-results-appearance.testplane.js
@@ -133,14 +133,16 @@ describe('Test results appearance', () => {
             }
         });
 
-        it('should show message without ansi markup', async ({browser}) => {
-            const expectedErrorText = 'expect(received).toMatchObject(expected)';
-            const testElem = await browser.$(getTestSectionByNameSelector('failed test with ansi markup'));
+        if (process.env.TOOL === 'testplane') {
+            it('should show message without ansi markup', async ({browser}) => {
+                const expectedErrorText = 'expect(received).toMatchObject(expected)';
+                const testElem = await browser.$(getTestSectionByNameSelector('failed test with ansi markup'));
 
-            const errorText = await testElem.$('.tab .error__item.details__summary').getText();
+                const errorText = await testElem.$('.tab .error__item.details__summary').getText();
 
-            assert.equal(errorText, `message: ${expectedErrorText}`);
-        });
+                assert.equal(errorText, `message: ${expectedErrorText}`);
+            });
+        }
     });
 
     describe('Test with successful assertView and error', () => {

diff --git a/test/func/tests/common/tests-details.testplane.js b/test/func/tests/common/tests-details.testplane.js
@@ -9,14 +9,13 @@ describe('Test details', function() {
         const selector = getTestSectionByNameSelector('test with long error message');
         await browser.$(selector).waitForDisplayed();
 
-        const erroredTestSection = await browser.$(selector).$('../..');
+        await browser.$(selector).$('.details__summary').scrollIntoView();
+        await browser.$(selector).$('.details__summary').click();
 
-        await erroredTestSection.$('.details__summary').click();
+        const metaInfo = await browser.$(selector).$('dl[data-qa="meta-info"]');
 
-        const fileMetaInfo = await erroredTestSection.$('div.meta-info__item*=failed-describe').$('..');
-
-        await expect(fileMetaInfo).toBeDisplayed();
-        await expect(await fileMetaInfo.$('span*=file')).toBeDisplayed();
+        await expect(metaInfo.$('dt*=file')).toBeDisplayed();
+        await expect(metaInfo.$('dd*=failed-describe.testplane.js')).toBeDisplayed();
     });
 
     it('should prevent details summary overflow', async ({browser}) => {

diff --git a/test/func/tests/package.json b/test/func/tests/package.json
@@ -3,18 +3,18 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "gui:testplane-common": "PROJECT_UNDER_TEST=testplane npx testplane --set common gui",
-    "gui:testplane-eye": "PROJECT_UNDER_TEST=testplane-eye npx testplane --no --set eye gui",
-    "gui:testplane-gui": "PROJECT_UNDER_TEST=testplane-gui npx testplane --no --set common-gui gui",
+    "gui:testplane-common": "TOOL=testplane PROJECT_UNDER_TEST=testplane npx testplane --set common gui",
+    "gui:testplane-eye": "TOOL=testplane PROJECT_UNDER_TEST=testplane-eye npx testplane --no --set eye gui",
+    "gui:testplane-gui": "TOOL=testplane PROJECT_UNDER_TEST=testplane-gui npx testplane --no --set common-gui gui",
     "gui:playwright": "PROJECT_UNDER_TEST=playwright npx testplane --set common gui",
-    "gui:plugins": "PROJECT_UNDER_TEST=plugins SERVER_PORT=8084 npx testplane --set plugins gui",
-    "gui:testplane-tinder": "PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8084 npx testplane --set common-tinder gui",
-    "testplane:testplane-common": "PROJECT_UNDER_TEST=testplane SERVER_PORT=8061 npx testplane --set common",
-    "testplane:testplane-eye": "PROJECT_UNDER_TEST=testplane-eye SERVER_PORT=8062 npx testplane --set eye",
-    "testplane:testplane-gui": "PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8063 npx testplane --no --set common-gui",
+    "gui:plugins": "TOOL=testplane PROJECT_UNDER_TEST=plugins SERVER_PORT=8084 npx testplane --set plugins gui",
+    "gui:testplane-tinder": "TOOL=testplane PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8084 npx testplane --set common-tinder gui",
+    "testplane:testplane-common": "TOOL=testplane PROJECT_UNDER_TEST=testplane SERVER_PORT=8061 npx testplane --set common",
+    "testplane:testplane-eye": "TOOL=testplane PROJECT_UNDER_TEST=testplane-eye SERVER_PORT=8062 npx testplane --set eye",
+    "testplane:testplane-gui": "TOOL=testplane PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8063 npx testplane --no --set common-gui",
     "testplane:playwright": "PROJECT_UNDER_TEST=playwright SERVER_PORT=8065 npx testplane --set common",
-    "testplane:plugins": "PROJECT_UNDER_TEST=plugins SERVER_PORT=8064 npx testplane --set plugins",
-    "testplane:testplane-tinder": "PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8084 npx testplane --set common-tinder",
+    "testplane:plugins": "TOOL=testplane PROJECT_UNDER_TEST=plugins SERVER_PORT=8064 npx testplane --set plugins",
+    "testplane:testplane-tinder": "TOOL=testplane PROJECT_UNDER_TEST=testplane-gui SERVER_PORT=8084 npx testplane --set common-tinder",
     "test": "run-s testplane:*"
   },
   "devDependencies": {

diff --git a/test/unit/lib/static/components/section/body/meta-info/index.jsx b/test/unit/lib/static/components/section/body/meta-info/index.jsx
@@ -40,7 +40,7 @@ describe('<MetaInfo />', () => {
 
             assert.calledOnceWith(
                 MetaInfoContent,
-                {resultId: 'some-result'}
+                {qa: 'meta-info', resultId: 'some-result'}
             );
         });
     });