v2.13.1 Release

jest.config.ts

@@ -29,6 +29,8 @@ const config: Config.InitialOptions = {
     // Exclude cypress files
     ...cypressExclusionGlobs,
   ],
+  // Avoid some long-running test giving false-positive
+  testTimeout: 20000,
   // Setup / Teardown
   setupFiles: [
     'dotenv/config',

package.json

@@ -2,7 +2,7 @@
   "name": "dragalia-site-front",
   "description": "Frontend of DL info website by OM.",
   "repository": "https://github.com/RaenonX-DL/dragalia-site-front",
-  "version": "2.13.0",
+  "version": "2.13.1",
   "engines": {
     "node": "14.x",
     "npm": "^7.12.0"
@@ -33,7 +33,7 @@
     "mime": "^2.5.2",
     "mongodb": "^3.6.9",
     "newrelic": "^7.4.0",
-    "next": "^11.0.1",
+    "next": "^11.1.0",
     "next-auth": "^3.25.0",
     "node-fetch": "^2.6.1",
     "pm2": "^5.1.0",
@@ -49,12 +49,12 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.13.0",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "^13.1.9",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/user-event": "^13.2.1",
     "@types/color": "^3.0.1",
-    "@types/jest": "^26.0.23",
+    "@types/jest": "^27.0.1",
     "@types/mime": "^2.0.3",
     "@types/mongodb": "^3.6.18",
     "@types/node": "^14.14.44",
@@ -65,7 +65,7 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
-    "babel-jest": "^26.6.3",
+    "babel-jest": "^27.0.6",
     "babel-preset-react-app": "^10.0.0",
     "camelcase": "^6.2.0",
     "cypress": "^7.5.0",
@@ -79,9 +79,9 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^4.6.0",
     "eslint-plugin-unused-imports": "^1.1.1",
-    "jest": "^26.6.3",
+    "jest": "^27.0.6",
     "jest-junit": "^12.2.0",
-    "msw": "^0.29.0",
+    "msw": "^0.35.0",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",
     "pino-pretty": "^4.8.0",
@@ -90,7 +90,7 @@
     "stylelint": "^13.12.0",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-scss": "^3.19.0",
-    "ts-jest": "^26.5.6",
+    "ts-jest": "^27.0.5",
     "ts-node": "^9.1.1",
     "typeorm": "^0.2.34",
     "typescript": "^4.3.2",

server/tests/game/info/lookup.test.tsx

@@ -58,13 +58,13 @@ describe('Unit info searching page', () => {
     expect(lookupLandingFunc).toHaveBeenCalledTimes(1);
   });
 
-  it('shows at least 3 ads', () => {
+  it('shows ads', () => {
     renderReact(
       () => <AnalysisLookup/>,
       {user: {isAdmin: true}},
     );
 
-    expect(screen.queryAllByTestId('ads-post-list').length).toBeGreaterThanOrEqual(1);
+    expect(screen.queryAllByTestId('ads-page-top').length).toBeGreaterThanOrEqual(1);
     expect(lookupLandingFunc).toHaveBeenCalledTimes(1);
   });
 
@@ -74,7 +74,7 @@ describe('Unit info searching page', () => {
       {user: {adsFreeExpiry: new Date()}},
     );
 
-    expect(screen.queryByTestId('ads-post-list')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('ads-page-top')).not.toBeInTheDocument();
     expect(lookupLandingFunc).toHaveBeenCalledTimes(1);
   });
 });

src/components/elements/common/ads/const.ts

@@ -0,0 +1 @@
+export const AdsClientId = 'ca-pub-1535004092052078';

src/components/elements/common/ads/main.module.scss

@@ -0,0 +1,5 @@
+div {
+  &.adsTest {
+    border: 1px solid green;
+  }
+}

src/components/elements/common/ads/main.tsx

@@ -1,37 +1,64 @@
 import React from 'react';
 
-import {Adsense} from '@ctrl/react-adsense';
-
-import {AdsWrapper} from './wrapper';
-
-
-export const AdsInPost = () => {
-  return (
-    <AdsWrapper>
-      <Adsense
-        client="ca-pub-1535004092052078"
-        slot="1322282773"
-        style={{display: 'block'}}
-        layout="in-article"
-        format="fluid"
-        data-testid="ads-in-post"
-      />
-    </AdsWrapper>
-  );
-};
-
-export const AdsInPostList = () => {
-  return (
-    <AdsWrapper>
-      <Adsense
-        client="ca-pub-1535004092052078"
-        slot="3962363338"
-        style={{display: 'block'}}
-        layout="in-article"
-        layoutKey="-f7+5u+4t-da+6l"
-        format="fluid"
-        data-testid="ads-post-list"
-      />
-    </AdsWrapper>
-  );
-};
+import {AdsUnitDisplay} from './unit/display';
+import {AdsUnitInArticle} from './unit/inArticle';
+import {AdsUnitInFeed} from './unit/inFeed';
+import {AdsUnitMatchedContent} from './unit/matched';
+
+
+export const AdsInPost = () => (
+  <AdsUnitInArticle
+    slot="1322282773"
+    testId="ads-in-post"
+  />
+);
+
+export const AdsPostList = () => (
+  <AdsUnitInFeed
+    slot="3962363338"
+    layoutKey="-f7+5u+4t-da+6l"
+    testId="ads-post-list"
+  />
+);
+
+export const AdsPageTop = () => (
+  <AdsUnitMatchedContent
+    slot="4904550853"
+    testId="ads-page-top"
+  />
+);
+
+export const AdsUnitSearchBottom = () => (
+  <AdsUnitDisplay
+    slot="4716848598"
+    testId="ads-unit-search-bottom"
+  />
+);
+
+export const AdsTierResultsEnd = () => (
+  <AdsUnitMatchedContent
+    slot="9965305840"
+    testId="ads-tier-results-end"
+  />
+);
+
+export const AdsUnitKeyPointTop = () => (
+  <AdsUnitDisplay
+    slot="8652224172"
+    testId="ads-unit-key-point-top"
+  />
+);
+
+export const AdsUnitKeyPointIndexEnd = () => (
+  <AdsUnitDisplay
+    slot="8260507781"
+    testId="ads-unit-key-point-index-end"
+  />
+);
+
+export const AdsUnitKeyPointInfo = () => (
+  <AdsUnitDisplay
+    slot="9366061111"
+    testId="ads-unit-key-point-info"
+  />
+);

src/components/elements/common/ads/unit.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {screen} from '@testing-library/react';
+
+import {renderReact} from '../../../../../test/render/main';
+import {AdsUnitDisplay} from './unit/display';
+import {AdsUnitInArticle} from './unit/inArticle';
+import {AdsUnitInFeed} from './unit/inFeed';
+import {AdsUnitMatchedContent} from './unit/matched';
+
+
+describe('Ads unit element', () => {
+  it('shows display ads', async () => {
+    renderReact(() => <AdsUnitDisplay slot="1" testId="adsDisplay"/>);
+
+    expect(screen.queryByTestId('adsDisplay')).toBeInTheDocument();
+  });
+
+  it('hides display ads', async () => {
+    renderReact(
+      () => <AdsUnitDisplay slot="1" testId="adsDisplay"/>,
+      {user: {adsFreeExpiry: new Date(Date.now() + 3600)}},
+    );
+
+    expect(screen.queryByTestId('adsDisplay')).not.toBeInTheDocument();
+  });
+
+  it('shows in-article ads', async () => {
+    renderReact(() => <AdsUnitInArticle slot="1" testId="adsInArticle"/>);
+
+    expect(screen.queryByTestId('adsInArticle')).toBeInTheDocument();
+  });
+
+  it('hides in-article ads', async () => {
+    renderReact(
+      () => <AdsUnitInArticle slot="1" testId="adsInArticle"/>,
+      {user: {adsFreeExpiry: new Date(Date.now() + 3600)}},
+    );
+
+    expect(screen.queryByTestId('adsInArticle')).not.toBeInTheDocument();
+  });
+
+  it('shows in-feed ads', async () => {
+    renderReact(() => <AdsUnitInFeed slot="1" layoutKey="a" testId="adsInFeed"/>);
+
+    expect(screen.queryByTestId('adsInFeed')).toBeInTheDocument();
+  });
+
+  it('hides in-feed ads', async () => {
+    renderReact(
+      () => <AdsUnitInFeed slot="1" layoutKey="a" testId="adsInFeed"/>,
+      {user: {adsFreeExpiry: new Date(Date.now() + 3600)}},
+    );
+
+    expect(screen.queryByTestId('adsInFeed')).not.toBeInTheDocument();
+  });
+
+  it('shows matched content ads', async () => {
+    renderReact(() => <AdsUnitMatchedContent slot="1" testId="adsMatched"/>);
+
+    expect(screen.queryByTestId('adsMatched')).toBeInTheDocument();
+  });
+
+  it('hides matched content ads', async () => {
+    renderReact(
+      () => <AdsUnitMatchedContent slot="1" testId="adsMatched"/>,
+      {user: {adsFreeExpiry: new Date(Date.now() + 3600)}},
+    );
+
+    expect(screen.queryByTestId('adsMatched')).not.toBeInTheDocument();
+  });
+});

src/components/elements/common/ads/unit/display.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {Adsense} from '@ctrl/react-adsense';
+
+import {AdsClientId} from '../const';
+import {AdsWrapper} from '../wrapper';
+import {AdsUnitProps} from './types';
+
+
+type Props = AdsUnitProps
+
+export const AdsUnitDisplay = ({slot, testId}: Props) => (
+  <AdsWrapper>
+    <Adsense
+      client={AdsClientId}
+      slot={slot}
+      style={{display: 'block'}}
+      format="horizontal"
+      responsive="true"
+      data-testid={testId}
+    />
+  </AdsWrapper>
+);

src/components/elements/common/ads/unit/inArticle.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {Adsense} from '@ctrl/react-adsense';
+
+import {AdsClientId} from '../const';
+import {AdsWrapper} from '../wrapper';
+import {AdsUnitProps} from './types';
+
+
+type Props = AdsUnitProps
+
+export const AdsUnitInArticle = ({slot, testId}: Props) => (
+  <AdsWrapper>
+    <Adsense
+      client={AdsClientId}
+      slot={slot}
+      style={{display: 'block', textAlign: 'center'}}
+      layout="in-article"
+      format="fluid"
+      data-testid={testId}
+    />
+  </AdsWrapper>
+);