@skyscanner/backpack-web 10.0.0 → 11.1.1

package/bpk-component-graphic-promotion/src/BpkGraphicPromo-test.tsx

@@ -1,134 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-
-// @ts-expect-error Untyped import. Not added as a stub declaration so consumers still have the suppression in their node_modules when shipped untranspiled.
-import { cssModules } from '../../bpk-react-utils';
-
-import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
-import type { Props } from './BpkGraphicPromo';
-import STYLES from './BpkGraphicPromo.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-const props: Props = {
-  buttonText: 'Learn more',
-  headline: 'Ride your wave',
-  invertVertically: false,
-  onClick: jest.fn(),
-  sponsor: {
-    label: 'Sponsored',
-    logo: 'path/to/logo.png',
-    altText: 'Airline Name',
-  },
-  subheading:
-    'Portugal and 6 more countries have just been added to the UK travel green list',
-  tagline: 'Tagline',
-  textAlign: TEXT_ALIGN.start,
-  contentId: 'mock-content-id',
-};
-
-describe('BpkGraphicPromo', () => {
-  beforeEach(() => {
-    (props.onClick as jest.MockedFunction<Props['onClick']>).mockReset();
-  });
-
-  it('should render correctly with all properties set', () => {
-    const { asFragment } = render(<BpkGraphicPromo {...props} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should support custom class names', () => {
-    const { asFragment } = render(
-      <BpkGraphicPromo className="custom-classname" {...props} />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when centre aligned', () => {
-    const customProps = { ...props, textAlign: TEXT_ALIGN.center };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when right aligned', () => {
-    const customProps = { ...props, textAlign: TEXT_ALIGN.end };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when inverted portrait', () => {
-    const customProps = { ...props, invertVertically: true };
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should not display tagline or subheading when not provided', () => {
-    const customProps = { ...props };
-    delete customProps.tagline;
-    delete customProps.subheading;
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should display the tagline and no sponsor for non-sponsored ad', () => {
-    const customProps = { ...props };
-    delete customProps.sponsor;
-    const { asFragment } = render(<BpkGraphicPromo {...customProps} />);
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should redirect us to link when card is clicked', () => {
-    render(<BpkGraphicPromo {...props} />);
-
-    const graphicPromo = document.getElementsByClassName(
-      getClassName('bpk-graphic-promo'),
-    )[0];
-    fireEvent.click(graphicPromo);
-
-    expect(props.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should redirect us to link when button is clicked', () => {
-    render(<BpkGraphicPromo {...props} />);
-
-    const graphicPromoCTA = document.getElementsByClassName(
-      getClassName('bpk-graphic-promo__cta'),
-    )[0];
-    fireEvent.click(graphicPromoCTA);
-
-    expect(props.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should render as expected without a content ID', () => {
-    const { asFragment } = render(
-      <BpkGraphicPromo {...props} contentId={null} />,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/bpk-component-graphic-promotion/src/accessibility-test.tsx

@@ -1,147 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { axe } from 'jest-axe';
-
-import BpkGraphicPromo, { TEXT_ALIGN } from './BpkGraphicPromo';
-
-const sponsor = {
-  label: 'Sponsored',
-  logo: 'path/to/logo.png',
-  altText: 'Airline Name',
-};
-const buttonText = 'Learn more';
-const onClick = () => {
-  window.location.href = 'https://www.skyscanner.net';
-};
-
-const tagline = 'Tagline';
-const headline = 'Ride your wave';
-const subheading =
-  'Portugal and 6 more countries have just been added to the UK travel green list';
-
-describe('BpkGraphicPromo accessibility tests', () => {
-  // TODO: Temporarily disabling tests due to a newer version of jest-axe which causes tests to fail when using nested interactive elements
-
-  it('should not have programmatically-detectable accessibility issues', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        className="test"
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in centre aligned', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.center}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in right aligned', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.end}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in inverted portrait', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically
-        onClick={onClick}
-        sponsor={sponsor}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues when optional text is missing', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        sponsor={sponsor}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-
-  it('should not have programmatically-detectable accessibility issues in non-sponsored', async () => {
-    const { container } = render(
-      <BpkGraphicPromo
-        buttonText={buttonText}
-        headline={headline}
-        invertVertically={false}
-        onClick={onClick}
-        subheading={subheading}
-        tagline={tagline}
-        textAlign={TEXT_ALIGN.start}
-      />,
-    );
-
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});