gatsby-core-theme 35.0.3 → 35.0.4

package/.storybook/main.js

@@ -1,31 +1,32 @@
-const path = require('path');
+const path = require("path");
 module.exports = {
   stories: [
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
-    '../../**/**/src/**/*.stories.@(js|jsx|ts|tsx)',
+    "../src/**/*.stories.@(js|jsx|ts|tsx)",
+    "../../**/**/src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  framework: '@storybook/react',
+  staticDirs: ["../static"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: "@storybook/react",
   core: {
-    builder: 'webpack5',
+    builder: "webpack5",
   },
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.scss$/,
       use: [
-        require.resolve('style-loader'),
+        require.resolve("style-loader"),
         {
-          loader: require.resolve('css-loader'),
+          loader: require.resolve("css-loader"),
           options: {
             importLoaders: 1,
             modules: true,
           },
         },
-        require.resolve('sass-loader'),
+        require.resolve("sass-loader"),
         {
-          loader: require.resolve('sass-resources-loader'),
+          loader: require.resolve("sass-resources-loader"),
           options: {
-            resources: [path.resolve(__dirname, '../src/styles/globals.scss')],
+            resources: [path.resolve(__dirname, "../src/styles/globals.scss")],
           },
         },
       ],
@@ -33,26 +34,29 @@ module.exports = {
     config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
     // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
     config.module.rules[0].use[0].options.plugins.push(
-      require.resolve('babel-plugin-remove-graphql-queries')
+      require.resolve("babel-plugin-remove-graphql-queries")
     );
     config.resolve.alias = {
-      '~atoms': path.resolve(__dirname, '../src/components/atoms/'),
-      '~molecules': path.resolve(__dirname, '../src/components/molecules'),
-      '~organisms': path.resolve(__dirname, '../src/components/organisms'),
-      '~pages': path.resolve(__dirname, '../src/components/pages'),
-      '~helpers': path.resolve(__dirname, '../src/helpers'),
-      '~hooks': path.resolve(__dirname, '../src/hooks'),
-      '~tests': path.resolve(__dirname, '../tests'),
-      '~context': path.resolve(__dirname, '../src/context'),
-      '~constants': path.resolve(__dirname, '../src/constants'),
-      'gatsby-page-utils': path.resolve(__dirname, '../../node_modules/gatsby-page-utils/dist'),
+      "~atoms": path.resolve(__dirname, "../src/components/atoms/"),
+      "~molecules": path.resolve(__dirname, "../src/components/molecules"),
+      "~organisms": path.resolve(__dirname, "../src/components/organisms"),
+      "~pages": path.resolve(__dirname, "../src/components/pages"),
+      "~helpers": path.resolve(__dirname, "../src/helpers"),
+      "~hooks": path.resolve(__dirname, "../src/hooks"),
+      "~tests": path.resolve(__dirname, "../tests"),
+      "~context": path.resolve(__dirname, "../src/context"),
+      "~constants": path.resolve(__dirname, "../src/constants"),
+      "gatsby-page-utils": path.resolve(
+        __dirname,
+        "../../node_modules/gatsby-page-utils/dist"
+      ),
     };
 
-    config.resolve.alias['$virtual/lazy-client-sync-requires'] = path.resolve(
+    config.resolve.alias["$virtual/lazy-client-sync-requires"] = path.resolve(
       `./__mocks__/virtual-lazy-client-sync-requires.js`
     );
 
-    config.resolve.mainFields = ['browser', 'module', 'main'];
+    config.resolve.mainFields = ["browser", "module", "main"];
     return config;
   },
 };

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [35.0.4](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.0.3...v35.0.4) (2024-07-25)
+
+
+### Bug Fixes
+
+* added market dropdown + tests + storybook ([11a66e9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/11a66e91b1a9a52ea4120bdf331f3a9b7fc0557e))
+* added mega menu ([6a5dfd9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6a5dfd9d48aa8d9cf3cd3126b78c183c1fbc379a))
+* added mega menu ([db4622b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/db4622b69a6ca01d85989d2869e63c4b7f9ca261))
+* conflict ([8840bf9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/8840bf96bca6cdedcc75c04c853e65b9b795e7a2))
+* icons and default svg name ([6ebd98c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6ebd98c482f3537103c9ec787865f021f296bdeb))
+* icons and default svg name ([6f66265](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6f66265ed344b8dc85cc363e257f702ee6c4d9bd))
+* lighthouse pipeline ([a112a48](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/a112a48ff5d15644f315648445fb06e25f05af26))
+* lint ([d282f74](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/d282f741e85634984caaa37ffc8e19f2081e2b7e))
+* lint ([113351b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/113351b995bdaac2424eef7c32fd80030bcc7663))
+* lint ([c68f342](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c68f342128b690de1be99b67a939eb779ebec823))
+* lint and storybook images ([45846e8](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/45846e85c70cfc6183db3913343049ee74e6473f))
+* lint fixes ([07941f2](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/07941f24875c877f37b47dfb927cf462b8fab408))
+* mega menu on tablet ([957728f](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/957728f32903c33eff7e259c51a91e76985c54d0))
+* mega menu on tablet ([2ad76b9](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/2ad76b9c129adbe594293e5b0fe2b99722a287e5))
+* remove noreferrer from cta links ([6e6b4e6](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/6e6b4e63afd2eec161d2f002c22d0486d610e695))
+* remove noreferrer from cta links ([c4e0270](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/c4e0270322fae6f99e38051f62651446848ae1a9))
+* storybook and lint ([507c93c](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/507c93c375607c19ad3a8153fa5ceee71d4d5141))
+* storybook and lint ([072948b](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/072948b57fee5ad4d359760c1ff0728ae13169c6))
+* update stylesheet ([159e102](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/159e102252c3192c469efdeed103ebf48269fd55))
+
+
+* Merge branch 'tm-4071-market-dropdown' into 'master' ([fe55f5e](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/fe55f5ec4ca94be811f6521cc4eaadddc105c6e4))
+* Merge branch 'tm-4598-mega-menu' into 'master' ([ae141ba](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/ae141baa429717f4f65910b12067bd744ae51b30))
+* Merge branch 'tm-4578-remove-noreferre' into 'master' ([63987fd](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/commit/63987fd39fd6afb655d6d4959d7e9e3c15bbd421))
+
 ## [35.0.3](https://git.ilcd.rocks/team-floyd/themes/gatsby-themes/compare/v35.0.2...v35.0.3) (2024-07-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-core-theme",
-  "version": "35.0.3",
+  "version": "35.0.4",
   "description": "Gatsby Theme NPM Package",
   "author": "",
   "license": "ISC",
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "test": "jest --coverage",
-    "storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name start-storybook -s ../storybook-images -p 6006",
+    "storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name start-storybook -p 6006",
     "build-storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name build-storybook"
   },
   "dependencies": {

package/package.old.json

@@ -13,7 +13,7 @@
     },
     "scripts": {
       "test": "jest --coverage",
-      "storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name start-storybook -s ../storybook-images -p 6006",
+      "storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name start-storybook -p 6006",
       "build-storybook": "cross-env STORYBOOK_IMAGE_CDN_URL=https://cdn.irishluck.ie STORYBOOK_GATSBY_SITE_NAME=norskespilleautomater.com STORYBOOK_TRACKER_LINK_FORMAT_NON_MAIN=[no],[visit],short_name STORYBOOK_TRACKER_LINK_FORMAT_MAIN=[no],[visit],short_name build-storybook"
     },
     "peerDependencies": {

package/src/components/atoms/button/button.js

@@ -41,7 +41,7 @@ function Button({
       title={btnTitle}
       aria-label={btnTitle}
       target={targetBlank ? '_blank' : ''}
-      rel="nofollow noreferrer"
+      rel="nofollow"
       className={`${classes || ''}`}
       {...linkAttr}
       {...extraProps}

package/src/components/atoms/button/operator-cta.js

@@ -27,7 +27,7 @@ const OperatorCtaButton = ({
     inactive: { translationKey: 'inactive', defaultValue: 'Not Accepting New Players' },
     blacklisted: { translationKey: 'blacklisted', defaultValue: 'Blacklisted' },
   },
-  rel = 'nofollow noreferrer sponsored',
+  rel = 'nofollow sponsored',
 }) => {
   const status = operator?.status || '';
   const trackerType = tracker?.toLowerCase()?.replace(' ', '_');

package/src/components/atoms/market-dropdown/index.js

@@ -0,0 +1,149 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useState, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { IoMdClose } from "@react-icons/all-files/io/IoMdClose";
+import Link from "gatsby-core-theme/src/hooks/link";
+import LazyImage from "gatsby-core-theme/src/hooks/lazy-image";
+import useTranslate from "~hooks/useTranslate/useTranslate";
+import styles from "./market-dropdown.module.scss";
+
+const MarketDropdown = ({ pageContext, defaultMarket = "US (English)" }) => {
+  const { allMarkets, page } = pageContext;
+  const containerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [isActive, setIsActive] = useState(false);
+  const selectMarketText = useTranslate("select_market", "Select Market");
+  const activeMarket = allMarkets[page.market] || "gb_en";
+  const marketOptions = Object.keys(allMarkets).map((key) => [
+    key,
+    allMarkets[key],
+  ]);
+  const onClick = () => {
+    setIsActive(!isActive);
+  };
+
+  activeMarket.market = page.market;
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target)
+      ) {
+        setIsActive(false);
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [containerRef]);
+
+  return (
+    marketOptions.length > 1 && (
+      <div
+        className={`${styles.dropdownContainer} ${
+          isActive && styles.RemoveBorder
+        }`}
+        ref={containerRef}
+      >
+        <div
+          className={`${styles.dropdown}`}
+          onKeyDown={() => onClick()}
+          onClick={() => onClick()}
+        >
+          <div
+            className={`${isActive && styles.dropdownActive} ${
+              styles.dropdownInner
+            }`}
+          >
+            <LazyImage
+              width={18}
+              height={18}
+              src={`/images/markets/${
+                activeMarket.path_prefix === null
+                  ? "marketdefault"
+                  : activeMarket.market
+              }.svg`}
+              loading="eager"
+              alt={activeMarket.market}
+            />
+          </div>
+        </div>
+        <div
+          ref={dropdownRef}
+          className={`${styles.dropdownOptions}  ${
+            isActive && styles.RemoveBorderOptions
+          } ${isActive ? styles.active : ""}`}
+        >
+          <span className={styles.marketText}>
+            {selectMarketText}
+            <IoMdClose onClick={() => onClick()} />
+          </span>
+
+          <div className={styles.triangle} />
+          {marketOptions.map((item) => {
+            if (item[0] !== activeMarket.market) {
+              const langPage = page.hreflangs
+                ? page.hreflangs.filter((lang) => {
+                    const nonActiveMarket = item[0].split("_");
+                    return (
+                      lang.language === nonActiveMarket[1] &&
+                      lang.country === nonActiveMarket[0]
+                    );
+                  })
+                : [];
+
+              const path =
+                langPage.length > 0
+                  ? langPage[0].path
+                  : item[1].path_prefix || "/";
+
+              return (
+                <Link
+                  aria-label={item[0]}
+                  to={path}
+                  className={styles.marketLink}
+                >
+                  <LazyImage
+                    width={24}
+                    height={24}
+                    src={`/images/markets/${
+                      item[1].path_prefix === null ? "marketdefault" : item[0]
+                    }.svg`}
+                    loading="eager"
+                    alt={item[1].path_prefix}
+                  />
+                  <span>
+                    {item[1].path_prefix === null
+                      ? defaultMarket
+                      : item[1].path_prefix}
+                  </span>
+                </Link>
+              );
+            }
+            return <></>;
+          })}
+        </div>
+      </div>
+    )
+  );
+};
+
+MarketDropdown.propTypes = {
+  pageContext: PropTypes.shape({
+    allMarkets: PropTypes.shape({}),
+    page: PropTypes.shape({
+      market: PropTypes.string,
+      hreflangs: PropTypes.arrayOf(PropTypes.shape({})),
+    }),
+  }),
+  section: PropTypes.shape({}),
+  defaultMarket: PropTypes.string,
+};
+
+export default MarketDropdown;

package/src/components/atoms/market-dropdown/market-dropdown.module.scss

@@ -0,0 +1,169 @@
+.dropdownContainer {
+  @include min(tablet){ position: relative;}
+
+  z-index: 3;
+}
+
+.dropdown {
+  cursor: pointer;
+  background-color: #fff;
+  padding: .45rem;
+  border-radius:.8rem;
+  box-shadow: 0 20px 24px -4px rgb(27 27 28 / 5%);
+}
+
+.dropdownInner{
+  cursor: pointer;
+  background-color: #F4F4F4;
+  padding: .4rem;
+
+  @include flex-direction(row);
+  @include flex-align(center, center);
+
+  gap: .4rem;
+  border-radius:.8rem;
+
+  &::after{
+    @include arrow(rgba(27, 27, 28, 1), 0.8rem, down, false, translateY(-50%));
+
+    margin: .8rem .4rem .4rem;
+  }
+}
+
+.dropdownActive::after{
+  @include arrow(rgba(27, 27, 28, 1), 0.8rem, up, false, translateY(50%));
+
+  margin: .4rem .4rem .8rem;
+}
+
+.dropdownOptions {
+  position: absolute;
+  background-color: #fff;
+  top: 100%;
+  padding: 1.6rem;
+  border-radius: 0.4rem;
+  gap: 0.6rem;
+  flex-direction: column;
+  height: 100dvh;
+  width: 100%;
+  right: 0;
+  display: none !important;
+  box-shadow: 0 20px 24px -4px rgb(27 27 28 / 5%);
+
+  @include flex-align(start, start);
+
+  @include min(tablet) {
+    min-width: 18.2rem;
+    margin-top: 2.6rem;
+
+    @include flex-align(start, center);
+
+    height: unset;
+    padding: .4rem;
+  }
+
+  @include min(desktop) {
+    margin-right: 0;
+  }
+}
+
+.marketText{
+  @include min(tablet){display: none;}
+
+  color: rgb(27 27 28 / 100%);
+  font-size: 1.8rem;
+  font-weight: 700;
+  width: 100%;
+  line-height: 2.9rem;
+
+  @include flex-direction(row);
+  @include flex-align(center, center);
+
+  svg{
+    cursor: pointer;
+    margin-left: auto
+  }
+}
+
+.marketLink {
+  @include flex-align(center, flex-start);
+
+  width: 100%;
+  background-color: rgb(244 244 244 / 100%);
+  padding: .9rem .4rem;
+  border-radius: .8rem;
+  color: #0f172a;
+  text-transform: capitalize;
+  gap: .4rem;
+
+  &:hover{
+    background-color: #fff;
+  }
+
+  > img {
+    width: 1.8rem;
+    height: 1.8rem;
+  }
+
+  > span {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+
+  &::after{
+    @include arrow(rgba(27, 27, 28, 1), 0.8rem, right, false, translateY(-50%));
+
+    margin-top: .8rem;
+    margin-right: 1.287rem;
+    margin-left: auto;
+  }
+}
+
+
+.active {
+  display: flex !important;
+}
+
+.RemoveBorder {
+  > div::after {
+    transform: rotate(0deg);
+  }
+}
+
+.triangle {
+  @include min(tablet) {
+    display: block;
+    position: absolute;
+    bottom: 99%;
+    right: 1.5rem;
+    margin-top: -9px;
+    background-color: #fff;
+    width: 20px;
+    height: 20px;
+    border-top-right-radius: 5px;
+    transform: rotate(300deg) skewX(-30deg) scale(1, 0.866);
+    z-index: -1;
+    box-shadow: 0 20px 24px -4px rgb(27 27 28 / 5%);
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      background-color: inherit;
+      width: 20px;
+      height: 20px;
+      border-top-right-radius: 5px;
+      box-shadow: 0 20px 24px -4px rgb(27 27 28 / 5%);
+    }
+
+    &::before {
+      transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
+    }
+
+    &::after {
+      transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
+    }
+  }
+}

package/src/components/atoms/market-dropdown/market-dropdown.stories.js

@@ -0,0 +1,105 @@
+import React from "react";
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from "@storybook/addon-docs/blocks";
+
+import MarketDropdown from ".";
+
+export default {
+  title: "Theme/Layout/Navigation/Market Dropdown",
+  component: MarketDropdown,
+  argTypes: {
+    pageContext: {
+      name: "pageContext",
+      type: { name: "object", required: true },
+      defaultValue: "",
+      description: "The Context object for the current page.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "" },
+      },
+    },
+    showIcons: {
+      name: "showIcons",
+      type: { name: "boolean", required: false },
+      defaultValue: true,
+      description: "Choose whether SVG icons are shown.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "true" },
+      },
+    },
+    defaultMarket: {
+      name: "defaultMarket",
+      type: { name: "string", required: false },
+      defaultValue: true,
+      description: "Choose what is the default market text.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "US (English)" },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A component that renders a market dropdown for multimarket sites",
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => (
+  <div style={{ width: "62px", margin: "0 auto" }}>
+    <MarketDropdown {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  pageContext: {
+    allMarkets: {
+      latam_es: {
+        path_prefix: null,
+        timezone: "UTC",
+        market: "latam_es",
+      },
+      ar_es: {
+        path_prefix: "argentina",
+        timezone: "UTC",
+      },
+      bo_es: {
+        path_prefix: "bolivia",
+        timezone: "UTC",
+      },
+    },
+    page: {
+      market: "latam_es",
+      hreflangs: [
+        {
+          language: "latam",
+          country: "latam",
+        },
+        {
+          language: "test",
+          country: "test",
+        },
+      ],
+    },
+  },
+  showIcons: true,
+  defaultMarket: "US (English)",
+};

package/src/components/atoms/market-dropdown/market-dropdown.test.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, cleanup, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import MarketDropdown from '.';
+
+const pageContext = {
+  allMarkets: {
+    latam_es: {
+      path_prefix: null,
+      timezone: 'UTC',
+      market: 'latam_es',
+    },
+    ar_es: {
+      path_prefix: 'argentina',
+      timezone: 'UTC',
+    },
+  },
+  page: {
+    market: 'latam_es',
+    hreflangs: [
+      {
+        language: 'latam',
+        country: 'latam',
+      },
+      {
+        language: 'test',
+        country: 'test',
+      },
+    ],
+  },
+};
+const emptyPageContext = {
+  allMarkets: {
+    gb_en: {
+      path_prefix: 'english',
+      timezone: 'UTC',
+    },
+  },
+  page: { market: 'gb_en' },
+};
+
+describe('Label Component', () => {
+  test('render market dropdown with markets', () => {
+    const { container } = render(<MarketDropdown pageContext={pageContext} />);
+    expect(container.querySelector('div.dropdownContainer')).toBeTruthy();
+  });
+  test('render market dropdown without markets', () => {
+    const { container } = render(<MarketDropdown pageContext={emptyPageContext} />);
+    expect(container.querySelector('div.dropdownContainer')).toBeFalsy();
+  });
+  test('render market dropdown without icons', () => {
+    const { container } = render(<MarketDropdown pageContext={pageContext} showIcons={false} />);
+    expect(container.querySelector('div.dropdown svg')).toBeFalsy();
+  });
+  test('click market dropdown element', () => {
+    const { container } = render(<MarketDropdown pageContext={pageContext} />);
+    const marketDropdown = container.querySelector('div.dropdownContainer > div');
+    const body = document.querySelector('body');
+    fireEvent.click(marketDropdown);
+    fireEvent.keyDown(marketDropdown);
+    expect(container.querySelector('div.dropdownOptions')).toBeVisible();
+    fireEvent.click(body);
+    expect(container.querySelector('div.dropdownOptions')).not.toHaveClass('active');
+  });
+  test('render market dropdown on mobile', () => {
+    Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 450 });
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 700,
+    });
+    window.dispatchEvent(new Event('resize'));
+    const { container } = render(<MarketDropdown pageContext={pageContext} />);
+    const marketDropdown = container.querySelector('div.dropdownContainer > div');
+    const closeIcon = container.querySelector('div.dropdownOptions .marketText svg');
+    fireEvent.click(marketDropdown);
+    expect(container.querySelector('div.dropdownOptions')).toBeVisible();
+    fireEvent.click(closeIcon);
+    expect(container.querySelector('div.dropdownOptions')).not.toHaveClass('active');
+  });
+});
+afterEach(() => {
+  cleanup();
+});