chore: adjust the get started checkboxes slightly

2023-08-24 12:02:26 -07:00
3 changed files with 295 additions and 34 deletions
@@ -0,0 +1,239 @@
+import { aliasGQLQuery, checkSorting } from '@vegaprotocol/cypress';
+import type { ProposalsListQuery } from '@vegaprotocol/proposals';
+
+const rowSelector =
+  '[data-testid="tab-proposed-markets"] .ag-center-cols-container .ag-row';
+const colMarketId = '[col-id="market"] [data-testid="market-code"]';
+
+describe('markets proposed table', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+  });
+
+  it('can see table headers', () => {
+    const headers = [
+      'Market',
+      'Description',
+      'Settlement asset',
+      'State',
+      'Parent market',
+      'Voting',
+      'Closing date',
+      'Enactment date',
+      '',
+    ];
+    cy.getByTestId('tab-proposed-markets').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+  });
+
+  it('renders markets correctly', () => {
+    // 6001-MARK-049
+    cy.get(rowSelector).first().find(colMarketId).should('have.text', 'ETHUSD');
+
+    //  6001-MARK-050
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="description"]')
+      .should('have.text', 'ETHUSD');
+
+    //  6001-MARK-074
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
+    //  6001-MARK-051
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="asset"]')
+      .should('have.text', 'tDAI TEST');
+
+    //  6001-MARK-052
+    //  6001-MARK-053
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="state"]')
+      .should('have.text', 'Open');
+
+    //  6001-MARK-054
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="voting"]')
+      .should('have.text', '');
+
+    //  6001-MARK-056
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="closing-date"]')
+      .should('not.be.empty');
+
+    //  6001-MARK-057
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="enactment-date"]')
+      .should('not.be.empty');
+  });
+
+  it('can open row actions', () => {
+    // 6001-MARK-058
+    cy.get('.ag-pinned-right-cols-container')
+      .find('[col-id="proposal-actions"]')
+      .first()
+      .find('button')
+      .click();
+
+    const dropdownContent = '[data-testid="proposal-actions-content"]';
+    const dropdownContentItem = '[role="menuitem"]';
+
+    // 6001-MARK-059
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(0)
+      .find('a')
+      .should('have.text', 'View proposal')
+      .and(
+        'have.attr',
+        'href',
+        `${Cypress.env(
+          'VEGA_TOKEN_URL'
+        )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
+      );
+  });
+
+  // 6001-MARK-060
+  it('can see proposed market link', () => {
+    cy.getByTestId('tab-proposed-markets')
+      .find('[data-testid="external-link"]')
+      .should('have.length', 11)
+      .last()
+      .should('have.text', 'Propose a new market')
+      .and(
+        'have.attr',
+        'href',
+        `${Cypress.env('VEGA_TOKEN_URL')}/proposals/propose/new-market`
+      );
+  });
+  it('proposed markets tab should be sorted properly', () => {
+    // 6001-MARK-062
+    cy.get('[data-testid="Proposed markets"]').click({ force: true });
+    const marketColDefault = [
+      'ETHUSD',
+      'LINKUSD',
+      'ETHUSD',
+      'ETHDAI.MF21',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'TSLA.QM21',
+      'AAVEDAI.MF21',
+      'ETHBTC.QM21',
+      'UNIDAI.MF21',
+    ];
+    const marketColAsc = [
+      'AAPL.MF21',
+      'AAVEDAI.MF21',
+      'BTCUSD.MF21',
+      'ETHBTC.QM21',
+      'ETHDAI.MF21',
+      'ETHUSD',
+      'ETHUSD',
+      'LINKUSD',
+      'TSLA.QM21',
+      'UNIDAI.MF21',
+    ];
+    const marketColDesc = [
+      'UNIDAI.MF21',
+      'TSLA.QM21',
+      'LINKUSD',
+      'ETHUSD',
+      'ETHUSD',
+      'ETHDAI.MF21',
+      'ETHBTC.QM21',
+      'BTCUSD.MF21',
+      'AAVEDAI.MF21',
+      'AAPL.MF21',
+    ];
+    checkSorting(
+      'market',
+      marketColDefault,
+      marketColAsc,
+      marketColDesc,
+      ' [data-testid="market-code"]'
+    );
+
+    const stateColDefault = [
+      'Open',
+      'Passed',
+      'Waiting for Node Vote',
+      'Open',
+      'Passed',
+      'Open',
+      'Passed',
+      'Open',
+      'Waiting for Node Vote',
+      'Open',
+    ];
+    const stateColAsc = [
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Passed',
+      'Passed',
+      'Passed',
+      'Waiting for Node Vote',
+      'Waiting for Node Vote',
+    ];
+    const stateColDesc = [
+      'Waiting for Node Vote',
+      'Waiting for Node Vote',
+      'Passed',
+      'Passed',
+      'Passed',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+    ];
+    checkSorting('state', stateColDefault, stateColAsc, stateColDesc);
+  });
+
+  it('can drag and drop columns', () => {
+    // 6001-MARK-063
+    cy.get(colMarketId).realMouseDown().realMouseMove(700, 15).realMouseUp();
+    cy.get(colMarketId).should(($element) => {
+      const attributeValue = $element.attr('aria-colindex');
+      expect(attributeValue).not.to.equal('1');
+    });
+  });
+});
+
+describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    const proposal: ProposalsListQuery = {};
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ProposalsList', proposal);
+    });
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+  });
+
+  it.skip('can see no markets message', () => {
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+
+    // 6001-MARK-061
+    cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
+  });
+});
@@ -105,38 +105,29 @@ export const GetStarted = ({ lead }: Props) => {
        {lead && <h2>{lead}</h2>}
        <h3 className="text-lg">{t('Get started')}</h3>
        <div>
-          <ul className="list-inside -ml-5" role="list">
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">1. {t('Get a Vega wallet')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP ||
-                  pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />}
-              </div>
-              <div className="ml-1">2. {t('Connect')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">3. {t('Deposit funds')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">4. {t('Open a position')}</div>
-            </li>
+          <ul className="list-none">
+            <Step
+              step={1}
+              text={t('Get a Vega wallet')}
+              complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
+            />
+            <Step
+              step={2}
+              text={t('Connect')}
+              complete={Boolean(
+                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+              )}
+            />
+            <Step
+              step={3}
+              text={t('Deposit funds')}
+              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+            />
+            <Step
+              step={4}
+              text={t('Open a position')}
+              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
+            />
          </ul>
        </div>
        <div>
@@ -165,7 +156,7 @@ export const GetStarted = ({ lead }: Props) => {
  if (!pubKey) {
    return (
      <div className={wrapperClasses}>
-        <p className="text-sm mb-1">
+        <p className="mb-1 text-sm">
          You need a{' '}
          <ExternalLink href="https://vega.xyz/wallet">
            Vega wallet
@@ -186,3 +177,34 @@ export const GetStarted = ({ lead }: Props) => {

  return null;
 };
+
+const Step = ({
+  step,
+  text,
+  complete,
+}: {
+  step: number;
+  text: string;
+  complete: boolean;
+}) => {
+  return (
+    <li
+      className={classNames('flex', {
+        'text-vega-clight-200 dark:text-vega-cdark-200': complete,
+      })}
+    >
+      <div className="flex justify-center w-5">
+        {complete ? <Tick /> : <span>{step}.</span>}
+      </div>
+      <div className="ml-1">{text}</div>
+    </li>
+  );
+};
+
+const Tick = () => {
+  return (
+    <span className="relative right-[2px]">
+      <VegaIcon name={VegaIconNames.TICK} size={18} />
+    </span>
+  );
+};
@@ -5,7 +5,7 @@ import { VegaIconNameMap } from './vega-icon-record';

 export interface VegaIconProps {
  name: VegaIconNames;
-  size?: 8 | 10 | 12 | 13 | 14 | 16 | 20 | 24 | 32;
+  size?: 8 | 10 | 12 | 13 | 14 | 16 | 18 | 20 | 24 | 32;
 }

 export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {