วิธีตรวจสอบ window.location.href ในการทดสอบแบบล้อเล่น

ฉันมีวิธีการใน vue ซึ่งทำการเรียกใช้บริการและรับ URL กลับจากนั้นจึงเปลี่ยนเส้นทางไปยังสิ่งนั้น มันเกือบจะดูเหมือนเป็นอย่างนั้น

mounted () {
  StudentServices.getCollegeurl(this.studentId)
    .then(response => {
      window.location.href = response.data.collegeurl
    })
    .catch(response => {
      this.errorMessage = 'errr'
    })
}

ฉันเยาะเย้ย StudentServices และฉันสามารถปลอม URL ได้.. แต่ในการทดสอบแบบล้อเล่น ฉันต้องการตรวจสอบว่า window.location.href ได้รับทุกสิ่งที่ฉันได้รับจากการเรียกใช้บริการ... ฉันจะทำอย่างไร


person Janier    schedule 06.06.2019    source แหล่งที่มา


คำตอบ (1)


เนื่องจาก jsdom#unimplemented-parts-of-the-web- แพลตฟอร์ม และเราทราบจากปัญหานี้: window.location.href ไม่สามารถ มีการเปลี่ยนแปลงในการทดสอบ

เราจำเป็นต้องเปลี่ยนแปลงโค้ดเล็กน้อย นี่คือวิธีแก้ปัญหา:

index.ts:

import { StudentServices } from './StudentServices';

export class PornClass {
  private errorMessage: string = '';
  constructor(private studentId: string) {}

  public async mounted() {
    return StudentServices.getCollegeurl(this.studentId)
      .then(response => {
        // window.location.href = response.data.collegeurl;
        Object.defineProperty(window, 'location', {
          value: {
            href: response.data.collegeurl
          }
        });
      })
      .catch(response => {
        this.errorMessage = 'errr';
      });
  }
}

StudentServices.ts:

export class StudentServices {
  public static async getCollegeurl(id: string) {
    return {
      data: {
        collegeurl: 'real url'
      }
    };
  }
}

index.spec.ts:

import { PornClass } from './';
import { StudentServices } from './StudentServices';

jest.mock('./StudentServices.ts', () => {
  const mockedStudentServices = {
    getCollegeurl: jest.fn()
  };
  return {
    StudentServices: mockedStudentServices
  };
});

describe('PornClass', () => {
  describe('#mounted', () => {
    it('should get college url and redirect correctly', async () => {
      const studentId = '1';
      const collegeurl = 'http://github.com/mrdulin';
      const porn = new PornClass(studentId);
      (StudentServices.getCollegeurl as jest.MockedFunction<
        typeof StudentServices.getCollegeurl
      >).mockResolvedValueOnce({ data: { collegeurl } });

      await porn.mounted();
      expect(StudentServices.getCollegeurl).toBeCalledWith(studentId);
      expect(window.location.href).toBe(collegeurl);
    });
  });
});

ผลการทดสอบหน่วยพร้อมรายงานความครอบคลุม:

 PASS  src/stackoverflow/56482707/index.spec.ts
  PornClass
    #mounted
      ✓ should get college url and redirect correctly (8ms)

----------|----------|----------|----------|----------|-------------------|
File      |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files |       90 |      100 |       80 |    88.89 |                   |
 index.ts |       90 |      100 |       80 |    88.89 |                18 |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.815s

นี่คือการสาธิตที่สมบูรณ์: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/56482707

person slideshowp2    schedule 26.09.2019